1

i have a js file and pass parameters to a webmethod which returns the output in json format. only the first page is displayed. there are some 100 records and only 20 records are displayed. I need to display the other records in the subsequent pages. I tried adding a div tag after the table like 

<div id="pager12" class="scroll" style="text-align:center;></div>

then in the jqgrid function $('#SearchForComp).jqGrid(), I have added this line pager: jQuery('#pager12'). is that enough for displaying the output in pages or should I add anything? Its not working.

Thanks

jquery looks like this 

$("#SearchForComp").jqGrid({
    scroll: true,
    treeGrid: true,
    altRows: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'DISPLAY_NAME',
    datatype: function (postdata) {
        postdata.deptSeqNo = null;
        postdata.searchString = $("#SearchForComp").val().trim();

        $.ajax({
            type: "POST",
            url: 'Department.aspx/compsearch',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(postdata),
            complete: completeUserSearch
        });
    },
    mtype: "POST",

    colModel: [{ name: 'KEY_FIELD', index: 'KEY_FIELD', width: 1, hidden: true, key: true },
               { label: 'Department/Name', name: 'DISPLAY_NAME', index: 'DISPLAY_NAME', width: 200, resizable: false, sortable: false },
               { label: 'Telephone', name: 'DISPLAY_PHONE', index: 'DISPLAY_PHONE', width: 150, align: 'center', resizable: false, sortable: false },
               { label: 'Email', name: 'DISPLAY_EMAIL', index: 'DISPLAY_EMAIL', width: 225, align: 'center', resizable: false, sortable: false, formatter: 'email'}],
    treeIcons: { plus: 'ui-icon-plus', minus: 'ui-icon-minus', leaf: 'ui-icon-radio-off' },
    height: 'auto',
    caption: "User Search",
    treeReader: {
        level_field: "TREE_LEVEL",
        parent_id_field: "PARENT_ID",
        leaf_field: "IS_LEAF",
        expanded_field: "EXPANDED"
    },
    jsonReader: {
        root: "Data",
        page: "CurrentPage",
        total: "TotalPages",
        records: "TotalRecords",
        repeatitems: false,
        id: "0",
        userdata: "UserData"

    },

    beforeSelectRow: function (id, e) { return false; },
 });

I call a webmethod "compsearch" that returns the data in json format and then display it to the user.

Oleg
  • 220,925
  • 34
  • 403
  • 798
Bala
  • 1,129
  • 1
  • 9
  • 23

1 Answers1

3

Probably you don't define rowNum option and so the default value 20 will be used. Typically it's not a problem if you correct implement server side paging of data. If you don't want implement paging and filtering of the data on the server side you can add loadonce: true option to jqGrid. In the case the datatype option will be changed to 'local' automatically and the paging will be done without additional communication with your server. More then that, loadonce: true allows you in one line implement filtering of the data by the usage of toolbar filter or Advanced Searching.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Hey, thanks for the reply Oleg. I have tried the loadonce:true, some 20 rows are displayed and then again they are repeated, how to avoid the repetition? if i give the rownum as 80, after 80 records, the records start repeating. – Bala Apr 18 '12 at 19:21
  • @user1341773: You are welcome! You should append the text of your question (click on "edit" link below the question) your JavaScript. One can't say where there are error in your code without to see it. [Here](http://meta.stackexchange.com/a/22189/147495) you will find detailed instruction how to format the code inserted in the answer. It's really simple. At least some part of the test data which you use could be also helpful (2-3 rows of data would be enough). – Oleg Apr 18 '12 at 19:29
  • I have pasted the jquery code. hope this helps you in understanding. :) – Bala Apr 18 '12 at 20:28
  • 1
    @user1341773: You don't wrote that you use **TreeGreed** instead of simple jqGrid. You can find [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid#cautions_and_limitations) limitations of TreeGrid. One from the limitations is: no pagination is supported. If you consider about the implementation details you will understand that it's not so clear how the paging of TreeGrid can be implemented. On the second page you want probably see the parents of the first displayed item and it's parents too. – Oleg Apr 18 '12 at 20:45
  • @user1341773: ... So is the page size is less then the level of the item which you need to display you will have no place to display the item itself because of displaying parent items. There are more problems as this. In any way jqGrid as TreeGrid don't support paging. – Oleg Apr 18 '12 at 20:47
  • Hey Oleg, you are awesome. Thanks for letting me know. I was wasting my time in finding how to implement paging. So for that code, if I want to implement paging is it enough that I remove the "treeGrid" and "treeGridModel" attributes and add the pager attribute like "pager: jQuery('#pager12')"? – Bala Apr 18 '12 at 21:07
  • @user1341773: In general it's enough, but your question looks a little like: if I get the wings of my back can I then fly? It could be possible... In any way you should better use `pager: '#pager12'` instead of `pager: jQuery('#pager12')`. In any way I would recommend you don't use `datatype` as a function. I suppose that you found some code as an example which is very old (at least 2,5 years old). If you just need to use `$.ajax` you don't need to use `datatype` as a function which reduce your possibilities to work with jqGrid. – Oleg Apr 18 '12 at 21:34
  • Hi Oleg, Yeah may be the code is that much old. This was not written by me, but was asked to implement the pagination feature for this thing. I removed the tree attributes(treegrid,treegridmodel,treereader,treeicons) and added the pager attributed. in my aspx i have just
    below the table. still its not working. can u suggest a good website for jquery. currently am learning things by trial and error. sorry for bugging you so much. Thanks a lot for your time.
     – Bala Apr 18 '12 at 21:49
  • @user1341773: What you have on the server side under "Department.aspx/compsearch"? Do you implemented something like ashx? Do you use WebForm? Which .NET version you use? – Oleg Apr 18 '12 at 21:55
  • @user1341773: In [the answer](http://stackoverflow.com/a/8545518/315935) for example you can find some links to ASP.NET projects (sometimes also not so new) which you can compile and use as examples. In [one more answer](http://stackoverflow.com/a/9349688/315935) you can find link to more recent ASP.NET project which demonstrate some features which can be interesting for you. – Oleg Apr 18 '12 at 22:02
  • hey Oleg, its just a webmethod. I use .net version 4.0. I am yet to look at the answers which you have sent. Will let you know for further doubts. Thanks a lot for your help. – Bala Apr 19 '12 at 14:31
  • @user1341773: You are welcome! I suspected that you used some very old technology because the page has `aspx` extension and not `ASMX` typically used by WebServices. If you use .net version 4.0 I would you recommend to use WCF instead of ASMX web services. You can combine WCF with any other ASP.NET technology on the same site. It works more quickly as ASMX web services (webmethods) and gives you much more flexibility. Look [here](http://stackoverflow.com/a/3079326/315935), [here](http://stackoverflow.com/a/3131413/315935) for example. – Oleg Apr 19 '12 at 14:42
  • hello Oleg, the jquery work was stalled because of some other projects. Now am doing the same thing, I have implemented the pager. there are some 100 records, but only 20 are displayed. its like "Page 1 of 1". I have changed the rowNum to -1. this is not working. still other pages are not displayed. any other suggestions? – Bala May 01 '12 at 15:15
  • @user1341773: The value of `rowNum` must be positive. If you need to display all rows try with `rowNum: 10000` for example. – Oleg May 01 '12 at 15:47
  • I came to know from here that we can set the rowNum to be 1. http://support.dovetailsoftware.com/selfservice/solutions/show/471. setting rownum to 10000 too didnt work. the page is stalled. – Bala May 01 '12 at 16:07
  • @user1341773: Sorry, but I don't understand you. What you mean under "rownum to 10000 too didnt work". I don't really understand what you want to do. In any way you can't use the value `-1` for `rowNum`. *It was supported in old version of jqGrid, but you can't use such value now. Could you describe more clear what you want and what is not work. – Oleg May 01 '12 at 16:34
  • hmmm. I am one step ahead. I have implemented paging, but it always returns the same set of data. there are 7 pages with 20 records. whenever I go to each page, same set of data is displayed. onpaging: function() should be modified? – Bala May 01 '12 at 18:30
  • @user1341773: Now my children are sleeping and I had time to read the code of your question one more time. I don't understand you at all now. I wrote you before that treeGrid don't support pagination. So I suppose **you write now about some absolutely unknown code for me**. To implement pagination you don't need use `onPaging` (not `onpaging`). You should implement some code on the server side. I posted you links with working WCF and ASMX projects. I have no idea what code you discuss now, but you do definitively many things wrong. You should open new question where you describe all. – Oleg May 01 '12 at 19:20
  • Hi Oleg, I got it working. Thanks for your support. yeah I went wrong in the middle and later got it. – Bala May 02 '12 at 13:40