JQGrid Referesh

[sampathParticipant]

I’m trying to referesh the grid data but unable to do that .

jqGrid is placed in the jquery popup dialog box , onclick event of button I’m opennig the the popup.

 

 

[DimitarParticipant]

Hello sampath,

Please provide us with a sample code which demonstrates the issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sampathParticipant]

Hi Dimitar,

Thanks for quick response.

Below is the code,

function OnGetFrequencyComplete(result) {
            FrequencyDataAdapter = "";
            var FrequencySource =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'FrequencyName' },
                        { name: 'FrequencyId' }
                    ],
                    localdata: result,
                    id: 'ddlFrequencyId'
                }
            FrequencyDataAdapter = new $.jqx.dataAdapter(FrequencySource);
            PageMethods.GetDetailsToBind(OnGetTableDataComplete);
        }
        function OnGetTableDataComplete(result) { 
            var theme = 'office';
            var source = {
                datatype: "json",
                datafields: [
                    { name: 'ChargeId' },
                    { name: 'ChargeDescription' },
                    { name: 'ChargeFrequency' },
                    { name: 'ChargeFrequencyId' },
                    { name: 'VendorName' },
                    { name: 'VendorId' },
                    { name: 'ChargeTypeId' },
                    { name: 'ChargeType' },
                    { name: 'GuestCharge' },
                    { name: 'VendorCharge' }
                ],
                id: 'ChargeId',
                localdata: result,
                updaterow: function (rowid, rowdata, commit) {
                    //UPDATE THE DETAILS OF  Charge Fequency Id 
                    //                    if (selChargeFequencyIndex != undefined && selChargeFequencyIndex != -1) {
                    //                        rowdata.ChargeFrequencyId = selChargeFequencyId;
                    //                        rowdata.ChargeFrequency = selChargeFequency;
                    //                        selChargeFequencyIndex = -1;
                    //                    }
                    // synchronize with the server - send update command
                    if (selChargeFequencyId != null) {
                        rowdata['ChargeFrequencyId'] = selChargeFequencyId;
                    }
                    if (selChargeTypeId != null) {
                        rowdata['ChargeTypeId'] = selChargeTypeId;
                    }
                    if (selVendorId != null) {
                        rowdata['VendorId'] = selVendorId;
                    }
                    var data = "update=true&ChargeId=" + rowdata.ChargeId + "&ChargeDescription=" +
                                                  rowdata.ChargeDescription + "&ChargeFrequency=" + rowdata.ChargeFrequency;
                    data = data + "&ChargeFrequencyId=" + rowdata.ChargeFrequencyId + "&VendorName=" + rowdata.VendorName + "&VendorId=" +
                                              rowdata.VendorId + "&ChargeTypeId='" + rowdata.ChargeTypeId;
                    data = data + "&ChargeType=" + rowdata.ChargeType + "&GuestCharge=" + rowdata.GuestCharge + "&VendorCharge=" +
                                              rowdata.VendorCharge;
                    PageMethods.UpdateDetails(data, OnUpdateComplete);
                    commit(true);
                }
            };
            var dataAdapter = "";
            dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: 820,
                height: 200,
                editable: true,
                theme: theme,
                virtualmode: false,
                selectionmode: 'singlecell',
                columns: [
                    {
                        text: 'Charge Description', columntype: 'textbox', datafield: 'ChargeDescription', width: 150, editable: true
                    },
                    {
                        text: 'Charge Frequency', columntype: 'dropdownlist', displayfield: 'ChargeFrequency', datafield: 'ChargeFrequencyId', width: 150,
                        createeditor: function (row, value, editor) {
                            editor.jqxDropDownList({ source: FrequencyDataAdapter, displayMember: 'FrequencyName', valueMember: 'FrequencyId', id: 'ddlFrequency' });
                            editor.on('select', function (event) {
                                var args = event.args;
                                if (args) {
                                    var item = args.item;
                                    selChargeFequencyId = item.value;
                                }
                            });
                        }
                    },
        {
            text: 'Vendor Name', columntype: 'dropdownlist', displayfield: 'VendorName', datafield: 'VendorId', width: 150,
            createeditor: function (row, value, editor) {
                editor.jqxDropDownList({ source: VendorDataAdapter, displayMember: 'vendor_name', valueMember: 'vendor_id' });
                editor.on('select', function (event) {
                    var args = event.args;
                    if (args) {
                        var item = args.item;
                        selVendorId = item.value;
                    }
                });
            }
        },
        {
            text: 'Charge Type', columntype: 'dropdownlist', displayfield: 'ChargeType', datafield: 'ChargeTypeId', width: 120,
            createeditor: function (row, value, editor) {
                editor.jqxDropDownList({
                    source: ChargeTypeDataAdapter, displayMember: 'charge_type', valueMember: 'charge_type_id'
                });
                editor.on('select', function (event) {
                    var args = event.args;
                    if (args) {
                        var item = args.item;
                        selChargeTypeId = item.value;
                    }
                });
            }
        },
        { text: 'Guest Charge', columntype: 'numberinput', datafield: 'GuestCharge', width: 120, cellsalign: 'right' },
        { text: 'Vendor Charge', columntype: 'numberinput', datafield: 'VendorCharge', width: 120, cellsalign: 'right' }
                ]
            });
            $("#PopUpToDisplay").dialog({
                autoOpen: false,
                width: 833,
                height: 275,
                modal: true,
                resizable: false,
                open: function (event, ui) {
                    $("#PopUpToDisplay").css("display", "block"); 
                    $("#jqxgrid").css("display", "block");
                },
                close: function (event, ui) { 
                    $("#jqxgrid").css("display", "none");
                    $("#PopUpToDisplay").css("display", "none");
                }
            });
            $("#PopUpToDisplay").dialog("open");
        }

I’m trying to open this dialog box on two different button click event..

When I open dialog in first click and I have change the data in that grid ,after clicked on second button dialog opens and grid changes remains same but I am setting the default data , even then also data is previously changed data.

Thanks,
J Sampath Kumar

[DimitarParticipant]

Hi J Sampath Kumar,

To update the grid data, you should set the grid source property to the new instance of the jqxDataAdapter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sampathParticipant]

I got the solution , popup div was in UpdatePanel When I updated the updatepanel, issue is solved.

[chaitaniyaMember]

Hi Dimitar,

I am using JQX grid in the AJAX call, which is in the Submit click function.

The problem is, I am able to get the data for the first submit click, but not from the next submit clicks.The page has got struck.
I think there is a refreshing problem.Please give me a solution for this problem.And here is my Code:

function submit() {

var str = “”;
jQuery(“#grid”).jqxGrid(‘destroy’);
jQuery(“#grid”).jqxGrid(‘reload’);
jQuery(“#grid”).jqxGrid(‘refreshdata’);

jQuery(“#grid”).jqxGrid(‘refresh’);

var fc = new Array();
fc.push(jQuery(“#DataInput”).val());
fc.push(jQuery(“#Quarter”).val());
fc.push(jQuery(“#Quarter1”).val());
fc.push(jQuery(“#Version”).val());
fc.push(jQuery(“#Version1”).val());
fc.push(jQuery(“#Year”).val());
fc.push(jQuery(“#Year1”).val());

var PrintSource = new Array();

PrintSource.push(vid1);
PrintSource.push(jQuery(“#Year”).val());
PrintSource.push(jQuery(“#Quarter”).val());

var PrintTarget = new Array();

PrintTarget.push(vid2);
PrintTarget.push(jQuery(“#Year1”).val());
PrintTarget.push(jQuery(“#Quarter1”).val());

jQuery(“#ProductlistboxCommon option”).attr(“selected”, “selected”);
var fcr = new Array();
fcr.push(jQuery(“#Region”).val());
var ProductlistboxCommon2 = new Array();
for (var i = 0; i < jQuery("#ProductlistboxCommon").multiselect("getChecked").length; i++) {
var productid = jQuery("#ProductlistboxCommon").multiselect("getChecked")[i].value;

ProductlistboxCommon2.push(productid.substring(0, productid.indexOf(':')));

}

jQuery("#Productlistboxone option").attr("selected", "selected");
var Productlistboxtwo = new Array();
for (var i = 0; i < jQuery("#Productlistboxone").multiselect("getChecked").length; i++) {
Productlistboxtwo.push(jQuery("#Productlistboxone").multiselect("getChecked")[i].value);
}

jQuery.ajax({
dataType: 'json',

beforeSend: function () {
jQuery('#loading').show();
},

url: 'GetCompareData',
data: { submit: 'Compare', fc: JSON.stringify(fc), columnsList: JSON.stringify(Productlistboxtwo), fcr: JSON.stringify(fcr), fcp: JSON.stringify(ProductlistboxCommon2), PrintSource: JSON.stringify(PrintSource), PrintTarget: JSON.stringify(PrintTarget) },
success: function (result) {

var columnSchema = [];

for (var i = 0; i < jQuery("#Productlistboxone").multiselect("getChecked").length; i++) {
var name = jQuery("#Productlistboxone").multiselect("getChecked")[i].value
var alias_name = jQuery("#Productlistboxone [value=" + name + "]").text();
columnSchema.push({ text: 'alias_name', datafield: 'name', minwidth: 150, filtertype: true, pinned: true, editable: false });
// columnVal += "{ text: '" + ec.aum_entity_column_alias_name.Replace("'", "\\'") + "', datafield: '" + ec.aum_entity_column_name + "', minwidth: 150,filtertype: '" + ec.aum_entity_column_filtertype + "', pinned: " + ec.aum_entity_column_pinned.ToString().ToLower() + ", cellsrenderer: validRenderer,align:'center' },\n";
}
alert(JSON.stringify(columnSchema));
var theme = 'classic';

var gridData = result;
var source =
{
async: false,
localdata: gridData,
datatype: 'json'
};
var dataAdapter = new jQuery.jqx.dataAdapter(source);

jQuery("#grid").jqxGrid('updatebounddata');

jQuery("#grid").jqxGrid(
{
width: '100%',
source: dataAdapter,
theme: theme,
columnsheight: 50,
scrollmode: 'logical',
pageable: true,
pagesize: 25,
altrows: true,
clear: true,
pagesizeoptions: ['25', '50', '75'],
autoheight: false,
showfilterrow: true,
filterable: true,
sortable: true,
cache: true,
async: false,
selectionmode: 'singlerow',
setcolumnalign: 'center',
columnsresize: true,
columnsreorder: true,
autoresizecolumns: true,

horizontalscrollbarlargestep: 150,
columns: [{ text: 'asset code', datafield: 'aum_asset_code', minwidth: 150, filtertype: true, pinned: true, editable: false },
{ text: 'asset name', datafield: 'aum_asset_name', minwidth: 150, filtertype: true, pinned: true, editable: false },
{ text: 'Master Entity Code', datafield: 'aum_asset_product_code', minwidth: 150, filtertype: true, pinned: true, editable: false },
{ text: 'product name', datafield: 'aum_asset_product_name', minwidth: 150, filtertype: true, pinned: true, editable: false}]

});

jQuery("#compare_result").show();
jQuery('#loading').hide();
jQuery('#comparepanel').collapsible('close');
jQuery('#compare_result').collapsible('open');
jQuery("#grid").show();

}
});
}

[DimitarParticipant]

Hello chaitaniya,

The destroy method completely removes the grid’s HTML elements from the DOM. You should initialize it every time after calling that method.

On a side note, please update to the latest version of jQWidgets (2.9.2).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts