jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Issue while updating Grid based on Searching
Tagged: grid, grid updation, updating grid
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 5 months ago.
-
Author
-
Hey,
I am getting some issue while updating grid based on search criteria. Here’s i am describing about what i am trying to do.
When first time page loads, I am filling Grid with data based on some default search values and again user can narrow down to
results by new search values and got new set of records from database. At this point I am using “updatebounddata” to update
the Grid. Now here problem occurs, if at page load i am getting 4000 records and on norrow down results i am getting 2000 records,
total records value in paging section doesn’t changing on “updatebounddata”.
Here’s the code I am using :var source;var dataAdapter;$(document).ready(function () { /* Called on PAGE LOAD event */ BindGrid('new') /* Called when user search for new records */ $('#btnSearch').click(function () { BindGrid('update'); });}function BindGrid(type){ if (type == 'new') { source = { datatype: "json", datafields: [ { name: 'Kontonummer', type: 'string' }, { name: 'Navn', type: 'string' }, { name: 'Kmailadresse', type: 'string' }, { name: 'Mailadresse', type: 'string' }, { name: 'Adresse1', type: 'string' }, { name: 'Telefon', type: 'string' }, { name: 'DebitorGruppe', type: 'string' }, { name: 'Kontoudtog', type: 'number' }, { name: 'Spxrret', type: 'number' }, { name: 'Saldodkr', type: 'number' }, { name: 'Rykkerkode', type: 'number' } ], formatdata: function (data) { $('#page').BlockUI('Loading account list....'); var num = parseInt(data.pagenum) + parseInt(1); gridPageSize = data.pagesize; return { Kontonummer: $('#txtKontonummer').val(), PageSize: data.pagesize, PageNumber: num } }, cache: false, root: 'Debitors', url: '/ajax/opretkontoudtog-helper.aspx/GetDebtors' }; dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8', downloadComplete: function (data, textStatus, jqXHR) { var sResponse = $.parseJSON(data.d); var dResponse = $.parseJSON(sResponse.ResponseData); source.totalrecords = dResponse.TotalRecords; cTotalRecords = dResponse.TotalRecords; currentRecords = dResponse.Debitors.length; return dResponse.Debitors; }, loadComplete: function () { if ($("#page").isMasked()) { $('#page').UnBlockUI(); } } }); $("#accountlist").jqxGrid({ width: 1300, autoheight: true, source: dataAdapter, theme: "HattenTheme", selectionmode: 'multiplerows', columnsresize: true, enabletooltips: true, virtualmode: true, pageable: true, pagesize: 100, pagesizeoptions: ['100', '250', '500'], rendergridrows: function (args) { return args.data; }, columns: [ { text: 'Kontonummer', datafield: 'Kontonummer', width: 100 }, { text: 'Navn', datafield: 'Navn', width: 205 }, { text: 'K Mail', datafield: 'Kmailadresse', width: 175 }, { text: 'F Mail', datafield: 'Mailadresse', width: 175 }, { text: 'Adresse1', datafield: 'Adresse1', width: 175 }, { text: 'Telefon', datafield: 'Telefon', width: 75 }, { text: 'Debitor Gruppe', datafield: 'DebitorGruppe', width: 100 }, { text: 'Kontoudtog', datafield: 'Kontoudtog', width: 75 }, { text: 'Spræret', datafield: 'Spxrret', width: 60 }, { text: 'Saldo', datafield: 'Saldodkr', width: 80 }, { text: 'Rykkerkode', datafield: 'Rykkerkode', width: 80 } ] }); $("#accountlist").bind('bindingcomplete', function () { if (currentRecords < gridPageSize) { $("#accountlist").jqxGrid({ pagesize: currentRecords }); } else { $("#accountlist").jqxGrid({ pagesize: gridPageSize }); } }); } else if (type == 'update') { $('#page').BlockUI('Loading account list....'); source = { datatype: "json", datafields: [ { name: 'Kontonummer', type: 'string' }, { name: 'Navn', type: 'string' }, { name: 'Kmailadresse', type: 'string' }, { name: 'Mailadresse', type: 'string' }, { name: 'Adresse1', type: 'string' }, { name: 'Telefon', type: 'string' }, { name: 'DebitorGruppe', type: 'string' }, { name: 'Kontoudtog', type: 'number' }, { name: 'Spxrret', type: 'number' }, { name: 'Saldodkr', type: 'number' }, { name: 'Rykkerkode', type: 'number' } ], formatdata: function (data) { $('#page').BlockUI('Loading account list....'); var num = parseInt(data.pagenum) + parseInt(1); return { Kontonummer: $('#txtKontonummer').val(), PageSize: data.pagesize, PageNumber: num } }, totalrecords: cTotalRecords, root: 'Debitors', url: '/ajax/opretkontoudtog-helper.aspx/GetDebtors' }; dataAdapter = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8', downloadComplete: function (data, textStatus, jqXHR) { var sResponse = $.parseJSON(data.d); var dResponse = $.parseJSON(sResponse.ResponseData); source.totalrecords = dResponse.TotalRecords; cTotalRecords = dResponse.TotalRecords; currentRecords = dResponse.Debitors.length; return dResponse.Debitors; }, loadComplete: function () { if ($("#page").isMasked()) { $('#page').UnBlockUI(); } } }); $("#accountlist").jqxGrid('updatebounddata'); }}
What I am doing wrong in code ?
Hi Robby,
In your second source object definition, cache: false is missing so your Ajax calls could be cached. I also do not see where you use the dataAdapter that is defined when the “type” == “update”. If you want to use that dataAdapter, set the Grid’s source property to point to it. Otherwise, by calling the “updatebounddata” you will make the Grid to call the dataBind method of its original dataAdapter.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comI got it working after resigning the Value of “dataAdapter” to the grid again under Update section.
$("#accountlist").jqxGrid({ source: dataAdapter }); $("#accountlist").jqxGrid('updatebounddata');
Thanks.
Hi Robby,
According to me, the
$("#accountlist").jqxGrid('updatebounddata');
is unnecessary.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter, I have removed the “updatebounddata” from the script.
I have one more requirement within Grid but don’t know whether its there or not. Sometime I am loading around 1000 Records
in the Grid with Page Size 250 or 500 or many be more then I need to scroll down the page to hit next page button from paging
section. Is there any way to duplicate the same paging section at the top of Grid ? So I don’t have to go at the bottom.Thanks,
Ravi JoshiHi Ravi Joshi,
Top Pager UI is currently not available. We will consider adding such in the future versions.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.