Grid with dynamic columns, totalrecords, rows se

[vishalParticipant]

Hello Peter,

I am trying to implement a grid with the following behaviour:
1. totalrows, rows and column names are fetched dynamically from the server as json object
2. The grid has server side sorting, filtering and paging

Can you provide me with am example?
I have searched but i couldn’t find an example that has all the above behaviour.

<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
url: ‘/List/Get/1’,
dataType: ‘json’,
datafields: [],
root: ‘Rows’,
cache: false,
beforeprocessing: function (data) {
source.totalrecords = data.TotalRows;
source.columns = data.columns;
},
filter: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
},
sort: function () {
// update the grid and send a request to the server.
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘sort’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source,
{
downloadComplete: function (data, status, xhr) {
var columns = data.columns;
var rows = data.Rows;
if (!source.totalRecords) {
source.totalRecords = data.TotalRows;
}
var records = rows;
dataAdapter.loadjson(null, records, source);
console.log(source.columns);
$(“#jqxgrid”).jqxGrid(‘columns’, source.columns);
}
}
);

$(“#jqxgrid”).jqxGrid(
{
autowidth: true,
source: dataAdapter,
theme: ‘classic’,
sortable: true,
filterable: true,
pageable: true,
columns: [
{ text: ‘ID’, datafield: ‘Id’, width: 200 }
]
});
});

</script>

<div id=”jqxgrid”></div>

[HristoParticipant]

Hello vishal,

You could use the settings from “jqxDataAdapter” – beforeLoadComplete: function (records) {}.
A callback function which is called before the data is fully loaded. Could read more about:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=

We have those demos in section “Integration”:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/index.htm#demos/php/listbox.htm
Please take a look this demos:
http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic
http://jspexamples.jqwidgets.com/examples/grid-sorting-paging-filtering.htm?arctic
(this is with server side – sorting, filtering and paging)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[vishalParticipant]

hello,

I got the column to display, but i can’t filter/sort/paginate.
I got the error when trying to sort a column.

Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

and the page freezes with a loader image.

Regards,
Rakesh

[HristoParticipant]

Hello vishal,

Looks it is a server issue.
Try to investigate communication with the server.
(particular with “sorting” functionality)
And to note the examples above again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts