Question

I have selet list where I pass the id to the jqGrid function and I want to load different sets of data according to the id that is selected by the user.
So I pass the value as in the change event of the select list.

RelaodGrid($(this).val());

Then I havethe RelaodGridfunction like this.

function RelaodGrid(Id) {
       jQuery("#list").jqGrid({
            url: '/Home/GridData',
            datatype: 'json',
            mtype: 'POST',
            postData:{Id:Id},
            colNames: ['Id', 'Value1', 'Value2'],
            colModel: [
          { name: 'Id', index: 'Id', width: 50, align: 'left' },
          { name: 'Value1', index: 'Value1', width: 100, align: 'left' },
          { name: 'Value2', index: 'Value2', width: 100, align: 'left'}],
            pager: jQuery('#pager'),
            viewrecords: true,
            caption: 'Summary'
        }).trigger("reloadGrid");


    };

This reloads the grid but return the same value.First time it takes the correct Id value but after that for every reload,it takes the first selected id value though the selected list correctly returns the value.

How to solve this issue?Where did I go wrong??
Thanks.

Answer 1

First of all you should initialize jqGrid only once. One do this with the call jQuery("#list").jqGrid({...});.

To your main problem. It could be solved very easy. The most information about this approach you can find in the old answer. What you should do is just define id property of postData parameter as a function:

postData:{Id:function() { return $("#mySelect").val(); }

instead of postData:{Id:Id}. Now the grid will call the function and load the current value of selected item at every grid reloading. what you just need will be to place

jQuery("#list").trigger("reloadGrid",[{page:1}])

inside the 'change' event handler of the select.