1

When I am making a call first time it shows data in my details grid from master grid but when selecting other row its not populating the new data in the details grid..

jQuery("#list10").jqGrid({
    sortable: true,
    url: '/cpsb/unprocessedOrders.do?method=getInitialUnprocessedList',
    datatype: 'json',
    colNames: ['Order', 'Load', 'Gate Time', 'Stop', 'Customer', 'Status'],
    colModel: [
        { name: 'orderNumber', index: 'orderNumber', width: 120, align: "center",
          sorttype: "int", key: true },
        { name: 'loadNumber', index: 'loadNumber', width: 100, align: "center",
          sorttype: "int" },
        { name: 'latestTime', index: 'latestTime', width: 160, align: "center",
          align: "center" },
        { name: 'stopSeq', index: 'stopSeq', width: 80, align: "center",
          sorttype: "int" },
        { name: 'customerNumber', index: 'customerNumber', width: 60,
          align: "center", sorttype: "int" },
        { name: 'orderStatus', index: 'orderStatus', width: 120, align: "center" }
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    jsonReader: { repeatitems: false,
        root: function (obj) {
            return obj;
        },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    },
    pager: '#pager10',
    sortname: 'Gate Time',
    sortorder: "desc",
    gridview: true,
    loadonce: true,
    viewrecords: true,
    multiselect: true,
    multikey: 'ctrlKey',
    caption: "Order Header",
    onSelectRow: function (ids) {
        if (ids == null) {
            ids = 0;
            if (jQuery("#list10_d").jqGrid('getGridParam', 'records') > 0) {
                jQuery("#list10_d").jqGrid('setGridParam', { url:
"/cpsb/unprocessedOrders.do?method=getUnprocessedOrderDetails&orderNum=" + ids });
                jQuery("#list10_d").jqGrid('setCaption',
                        "Order Header: " + ids).trigger('reloadGrid');
            }
        }
        else {
            jQuery("#list10_d").jqGrid('setGridParam', { url:
"/cpsb/unprocessedOrders.do?method=getUnprocessedOrderDetails&orderNum=" + ids });
            jQuery("#list10_d").jqGrid('setCaption',
                      "Order Details: " + ids).trigger('reloadGrid');
        }
    },
    height: '100%'
}); 
jQuery("#list10").jqGrid('navGrid','#pager10',
       {view:true,add:false,edit:false,del:false,searchtext:"Filter"},
       {},{},{},{multipleSearch:true});
$("#list10").jqGrid('hideCol', 'cb');

2nd grid for order details

jQuery("#list10").jqGrid('reloadGrid');
jQuery("#list10_d").jqGrid({
    height: 100,
    url: "/cpsb/unprocessedOrders.do?method=getUnprocessedOrderDetails&orderNum=",
    datatype: "json",
    colNames: ['Order', 'SKU', 'UPC', 'Item Description', 'Quantity Ordered',
               'Teach in Hold?'],
    colModel: [
        { name: 'orderNumber', index: 'orderNumber', width: 55 },
        { name: 'sku', index: 'sku', width: 55 },
        { name: 'upc', index: 'upc', width: 40, align: "right" },
        { name: 'itemDescription', index: 'itemDescription', width: 150,
          align: "right" },
        { name: 'quantityOrdered', index: 'quantityOrdered', width: 150,
          align: "right", sortable: false, search: false },
        { name: 'teachInId', index: 'teachInId', width: 150,
          align: "right", editable: true, edittype: "checkbox",
          formatter: 'checkbox', editoptions: { value: "true:false"} }],
    rowNum: 5,
    rowList: [5, 10, 20],
    jsonReader: { repeatitems: false,
        root: function (obj) {
            return obj;
        },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    },
    pager: '#pager10_d',
    sortname: 'SKU',
    loadonce: true,
    viewrecords: true,
    sortorder: "asc",
    multiselect: true,
    multikey: 'ctrlKey',
    caption: "Order Detail",
    height: '100%'
}).navGrid('#pager10_d', { view: true, add: false, edit: false, del: false },
            {}, {}, {}, { multipleSearch: true });
$("#list10_d").jqGrid('hideCol', 'cb');
jQuery("#ms1").click(function () {
    var s;
    s = jQuery("#list10_d").jqGrid('getGridParam', 'selarrrow');
    alert(s);
});

Edit: I am able view different records once I refresh the page...But after one selection other selection don't work

edit2: after debugging i saw that I am appending the orderNum parameter correctly but this is not making any call to the action class....any idea? thanks!

Toto
  • 89,455
  • 62
  • 89
  • 125
paul
  • 1,124
  • 9
  • 27
  • 45

1 Answers1

2

It seems to me that the answer on your main problem you find here: JqGrid Reload not working.

Because you use loadonce:true in both grids, the datatype in every grid will be changed from "json" to "local" after the first load. It seems to me that you should just remove loadonce:true for the second (detailed) grid. If you do want use loadonce:true for example for local sorting or local paging, then you should reset datatype to "json" in the same call jQuery("#list10_d").jqGrid('setGridParam',{url:"...", datatype: "json"}); .

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks! its working but not sure about the pagination and sorting ..need to populate with more data to check for pagination.. – paul Sep 01 '10 at 02:03
  • Pagination for second grid not working when i removed the loadonce:true...any idea what I am doing wrong in here – paul Sep 01 '10 at 16:24
  • Try reset also `rowNum` (with `setGridParam({ rowNum: 10 })`) before `trigger('reloadGrid');` See http://stackoverflow.com/questions/3566820/jqgird-problems-paging-from-an-existing-table/3568195#3568195 – Oleg Sep 01 '10 at 16:53
  • should I do like this jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails&orderNum="+ids,datatype:"json", rowNum:10}); – paul Sep 01 '10 at 18:58
  • Exactly! You can also try with `jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails&orderNum="+ids,datatype:"json", page:1});` or with `jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails&orderNum="+ids,datatype:"json"}).trigger('reloadGrid',[{page:1}]);`. I hope one from the calls will help you. – Oleg Sep 01 '10 at 19:22
  • By the way, the form `grid.trigger("reloadGrid",[{page:1}])` will be permanently used intern in jqGrid in grid.custom.js and grid.formedit.js. – Oleg Sep 01 '10 at 19:25
  • thanks! but still those approaches were not working...pagination for the 2nd grid is not working.... – paul Sep 01 '10 at 20:25
  • If you has your example somewhere on the web server and post me URL I'll try look at this. – Oleg Sep 01 '10 at 20:51
  • this is still in development phase ...so I don't have a public URL but I can send you the whole code in zip file ...thanks! again – paul Sep 01 '10 at 21:03
  • OK, probably morning I'll find time to look through your code. My e-mail is oleg.kirljuk@ok-soft-gmbh.com. – Oleg Sep 01 '10 at 21:11
  • Do you receive my response to your e-mail? – Oleg Sep 04 '10 at 00:24
  • I have received your email about the suggestions on using doctype! and using proper encoding , meta tag.. ...and I send you the json files...did you received that email? – paul Sep 04 '10 at 15:24
  • Moment, I will go to another computer and look at this. Moreover I'll post in some minutes more information about the datepicker question. – Oleg Sep 04 '10 at 15:32
  • I found your e-mail in spam blocked by web-provider. I'll examine the data and send you my comments. By the way I included your e-mail in the white-list, so your mails will be not blocked in the future. – Oleg Sep 04 '10 at 15:53
  • @paul: Look at this page http://www.ok-soft-gmbh.com/jqGrid/releasedOrders.htm where you can select first two rows inthe master grid. All work. Compare the source code of the page with your page. – Oleg Sep 04 '10 at 19:02
  • thanks! you are using loadonce=true in second grid as well which I think solved the problem and reloading the grid ....thanks ! again – paul Sep 04 '10 at 21:20
  • @paul: Yes! Moreover there are some small bugs in the `releasedOrders.jsp` like usage of `jQuery("pselectAll")` instead of `jQuery("#pselectAll")` and other. You used also too much `trigger('reloadGrid')`, setting of `rowNum` with `'setGridParam'` is not needed, hiding of non existing column `'cb'` with `$("#list10").jqGrid('hideCol', 'cb')` and something more (I am not remember exactly). Just compare my code with your code more carefully. – Oleg Sep 04 '10 at 21:56
  • @Oleg thanks again for your help...I will be more careful..moreover I don't have to show the selection checkbox column(so hiding 'cb' ) and multiselection should work only with combination of key+click...which I don't think present current API supports... – paul Sep 05 '10 at 05:19
  • @paul: You welcome! Now I understand what you mean with `jqGrid('hideCol', 'cb')`. I almost don't use `multiselect`, so don't known this trick before. – Oleg Sep 05 '10 at 07:42
  • @Oleg..is it possible to have 2 different jQuery script? since I am importing my navigation menu on each page which also uses jquery and whenever I use jqgrid on each page ...my JqGrid disappear...main culprit is $(document).onReady which can be use only once – paul Sep 05 '10 at 13:05
  • I mean jQuery(document).ready...just getting confused with EXT-JS . – paul Sep 05 '10 at 13:15
  • Yes, it is possible. You can **define**, but not call some global functions in one JavaScript, include the script **before** your other js-scripts. Then you can call everywhere you need the global function. To have less conflicts with other scripts you should do following: In first script you define on top level a variable which will be like a namespace: `var paul = {};` (or just `paul = {};` without `var`). Then in the same script you define `var paul.NavMenu = function () { ...};` or you can use a function with parameters. Then in the main script you can just call `paul.NavMenu();`. – Oleg Sep 05 '10 at 15:37
  • Exactly in the way in jquery-1.4.2.min.js are defined global `var jQuery` with some functions and you can use the functions after including the jquery-1.4.2.min.js. – Oleg Sep 05 '10 at 15:39
  • @Oleg I have defined the conflicting issue on a different question...http://stackoverflow.com/questions/3646984/including-jquery-menu-and-jqgrid-on-the-page – paul Sep 05 '10 at 17:24
  • 1
    @paul: I use ASP.NET instead of JSP and can't help you in the question. In ASP.NET you can define master page and place some placeholder with different IDs: `` in the `` element of the `` block, another `<asp:contentplaceholder id="HeadContent" runat="server"></asp:contentplaceholder>` at the end of `` block and one more `<asp:contentplaceholder id="MainContent" runat="server"></asp:contentplaceholder>` in the middle of `<div id="main">` in the body like you do. So all pages start with including master page and defining of up to 3 `<asp:content ids.="" some="" with=""></asp:content></div> – Oleg Sep 05 '10 at 18:12
  • So in ASP.NET in every page you include Master page and then define only the changes to it as `` with `contentPlaceHolderID="MainContent"`, `contentPlaceHolderID="HeadContent"` or other place previously defined in the master page. I am not sure whether the information helps you, but I don't use JSP and can't give you practical tips about the subject. The most `` will be included also on the master page, but in "HeadContent" placeholder I define – Oleg Sep 05 '10 at 18:17
  • 1
    I modified tags of your question, and you received immediately more viewers, voting and already one answer which sound interesting. I write this only to show that choosing of tags of the question is very important and can be very helpful. – Oleg Sep 05 '10 at 21:56
  • @Oleg thanks a lot...your suggestion always help me to improve my web development work...I will definitely be more careful in using choosing correct tips....thanks! again – paul Sep 06 '10 at 05:01
  • @Oleg ..I think I can work on the same line you have use master pages. Moreover my main conflict is with the jQuery ready which can be use only once . So if I define the menu as var navMenu = function(){} and call that function inside the jQgrid ready ...it may solve the problem...Thanks! – paul Sep 06 '10 at 05:56
  • @paul: Exactly! This is the advantage of `var navMenu = function(){}`. You can call the function where you it need. – Oleg Sep 06 '10 at 07:18
  • @Oleg ...problem solved ...I have combine your approach and remove html, head, title and body from my menu page ...than call the navMenu inside the ready funtion on the page where I am using ...it works fine just need to do some css fix for alignment issues...thanks again! – paul Sep 06 '10 at 15:14
  • @paul: Congratulations! The best problem is the solved problem! – Oleg Sep 06 '10 at 15:24