update the data from API when we change/update the page number

[Mohan MadhugunduParticipant]

Hi,

Actually i am getting the total number records of the table and showing the pagination in grid. I need to get the 5 to 10 row for first hit and when i changed the paging number i need to hit the API and get the data and show those data in grid.Here i am sharing my code.

var source =
{
datatype: “array”,
datafields: [
{ name: ‘ID’, type: ‘string’ },
{ name: ‘DepartmentName’, type: ‘string’ },
{ name: ‘SchoolID’, type: ‘number’ },
{ name: ‘Status’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘string’ },
{ name: ‘CreatedAt’, type: ‘date’ },
{ name: ‘UpdatedBy’, type: ‘string’ },
{ name: ‘UpdatedAt’, type: ‘date’ },
{ name: “Operation”, type: “string” }
],
totalrecords: 1000000,
url: “/Department/GetAllDepts?Sid=” + $(“#hdn_SIDD”).val() + “”
};

var cellsrenderer = function (row, column, value, defaulthtml, columnproperties, rowdata ) {
var Edit = 0, Delete = 1;
var build = “<div style=’text-align:center;padding-top:1%;’>”;
build += ‘Edit<span style=”color:#23527c;”> | </span>’;
build += ‘Delete‘;
build += ‘</div>’;
return build;
};

// generate sample data.
var generatedata = function (startindex, endindex) {
debugger;
var data = {};

var Sid = {
Sid: parseInt($(“#hdn_SIDD”).val())
};

$.ajax({
cache: false,
type: “POST”,
url: “../Department/GetAllDepts/”,
data: JSON.stringify(Sid),
dataType: “json”,
contentType: ‘application/json; charset=utf-8’,
success: function (datas) {
debugger;
data = datas;
},
error: function (ex) {

}
});
return data;
};

var rendergridrows = function (params) {
debugger;
var data = generatedata(params.startindex, params.endindex);
return data;
};
var totalcolumnrenderer = function (row, column, cellvalue) {
debugger;
var cellvalues = $.jqx.dataFormat.formatnumber(cellvalue, ‘c2’);
return ‘<span style=”margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;”>’ + cellvalues + ‘</span>’;
};

var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#grid”).jqxGrid({
width: ‘100%’,
height: 250,
source: dataAdapter,
pageSize: 5,
pageable: true,
pagerMode: ‘advanced’,
filterable: true,
showfilterrow: true,
autoshowfiltericon: true,
filterMode: ‘advanced’,
selectionMode: ‘multiplerows’,
keyboardnavigation: false,
columnsResize: true,
columns: [
{ text: “ID”, datafield: “ID” },
{ text: “Dept.Name”, datafield: “DepartmentName” },
{ text: “Status”, datafield: “Status” },
{ text: “Created By”, datafield: “CreatedBy”, hidden: true },
{ text: “Created At”, datafield: “CreatedAt”, hidden: true },
{ text: “Updated By”, datafield: “UpdatedBy”, hidden: true },
{ text: “Updated At”, datafield: “UpdatedAt”, hidden: true },
{ text: “Operation”, datafield: “Operation”, hidden: false, cellsrenderer: cellsrenderer, cellsformat: ‘c2’, align: ‘center’, cellsAlign: ‘center’}
]
});

var listSource = [
{ label: ‘ID’, value: ‘ID’, checked: true },
{ label: ‘Dept.Name’, value: ‘DepartmentName’, checked: true },
{ label: ‘Status’, value: ‘Status’, checked: true },
{ label: ‘Created By’, value: ‘CreatedBy’, checked: false },
{ label: ‘Created At’, value: ‘CreatedAt’, checked: false },
{ label: ‘Updated By’, value: ‘UpdatedBy’, checked: false },
{ label: ‘Updated At’, value: ‘UpdatedAt’, checked: false },
{ label: ‘Operation’, value: ‘Operation’, checked: true }
];

$(“#jqxlistbox”).jqxListBox({ source: listSource, width: ‘100%’, height: 235, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
$(“#grid”).jqxGrid(‘beginupdate’);
if (event.args.checked) {
$(“#grid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#grid”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#grid”).jqxGrid(‘endupdate’);
});

I am not able to see the data in grid even it is first time. Can any one help for this to me.

[Peter StoevKeymaster]

Hi,

Please, refer to: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-server-side-paging.htm. The documentation page shows how to implemetn server paging with Grid used in ASP .NET environment.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts