views:

242

answers:

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!

+1  A: 

It seems to me that the answer on your main problem you find here: http://stackoverflow.com/questions/3441839/jqgrid-reload-not-working/3442156#3442156.

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"}); .

Oleg
Thanks! its working but not sure about the pagination and sorting ..need to populate with more data to check for pagination..
paul
Pagination for second grid not working when i removed the loadonce:true...any idea what I am doing wrong in here
paul
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
should I do like this jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails
paul
Exactly! You can also try with `jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails` or with `jQuery("#list10_d").jqGrid('setGridParam',{url:"/cpsb/processedOrders.do?method=getInitialprocessedListDetails`. I hope one from the calls will help you.
Oleg
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
thanks! but still those approaches were not working...pagination for the 2nd grid is not working....
paul
If you has your example somewhere on the web server and post me URL I'll try look at this.
Oleg
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
OK, probably morning I'll find time to look through your code. My e-mail is [email protected].
Oleg
thanks! but mail to this email [email protected] is bounced....
paul
Try another one [email protected]
Oleg
thanks! this is working...
paul
Do you receive my response to your e-mail?
Oleg
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
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
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
@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
thanks! you are using loadonce=true in second grid as well which I think solved the problem and reloading the grid ....thanks ! again
paul
@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
@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
@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
@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
I mean jQuery(document).ready...just getting confused with EXT-JS .
paul
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
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
@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
@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: `<asp:ContentPlaceHolder ID="TitleContent" runat="server" />` in the `<title>` element of the `<head>` block, another `<asp:ContentPlaceHolder ID="HeadContent" runat="server" />` at the end of `<head>` block and one more `<asp:ContentPlaceHolder ID="MainContent" runat="server" />` 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` with some ids.
Oleg
So in ASP.NET in every page you include Master page and then define only the changes to it as `<asp:Content .../>` 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 `<scripts>` will be included also on the master page, but in "HeadContent" placeholder I define <script>'s for a page.
Oleg
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
@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
@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
@paul: Exactly! This is the advantage of `var navMenu = function(){}`. You can call the function where you it need.
Oleg
@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
@paul: Congratulations! The best problem is the solved problem!
Oleg
thanks! your advices always help me to solve problem...
paul