Refresh Page

[mail2taurusParticipant]

Dear Sir,

When I delete all items in the last page, and command to refresh the grid
function refreshGrid() {
$(‘#glpPermitItem’).jqxGrid(‘updatebounddata’); //Refresh the grid.
//$(‘#glpPermitItem’).jqxGrid({ source: dataAdapter }); //Refresh the grid.
}
After that it seem the grid work incorrectly such as, it false display or i cannot click the previous page button.
I noticed that the information of page navigation is incorrect like an example:

Assumed that I delete row number 11 at page 3 of grid display 5 rows per page. After deleting the grid display:
[Go to page 3, row number 5, 0-0 to 0]
Actually, i think it should display page 2, 6-10 to 10

Best Regards,
Wijit,

My Code:
@using IBSAdmin.Helpers.Htmls;

@{
ViewBag.Title = “รหัสสิทธิ์”;
}

<div class=”header_label”>
<span>@ViewBag.Title</span>
</div>
<div style=”padding-left: 30%”>
<label>ชื่อสิทธิ์:</label>
<input id=”txtSearch” type=”text” onkeydown=”search_keyenter(event)”/>
<input id=”btnSearch” type=”button” value=”ค้นหา″ />
</div>

<br />

<div style=”margin-left: 0px;”>
<input id=”btnAdd” type=”button” value=”+ เพิ่ม” style=”width: 50px;” />
<input id=”btnDelete” type=”button” value=”- ลบ” style=”width: 50px;” />

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = “__AjaxAntiForgeryForm” }))
{
@Html.AntiForgeryToken()
}
</div>

<div style=”padding-top: 10px;”></div>

<div>ผลการค้นหา</div>
<div id=”glpPermitItem” style=”width: 100%”></div>
<span id=”txtStatus”></span>

<script type=”text/javascript”>
var source =
{
datatype: “json”,
datafields: [
{ name: ‘IDROW’, type: ‘number’ },
{ name: ‘PERMITEM_NAME’, type: ‘string’ },
{ name: ‘DESCRIPTION’, type: ‘string’ },
],
url: ‘/PermitItem/ShowDataToGrid’,
root: ‘Rows’,
sortcolumn: ‘IDROW’,
sortdirection: ‘asc’,
sort: function () {
$(“#glpPermitItem”).jqxGrid(‘updatebounddata’, ‘sort’);
},
beforeprocessing: function (data) {
source.totalrecords = data.TotalRows;
},
data: {
searchParam: ”
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#glpPermitItem”).jqxGrid({
width: ‘810px’,
autoheight: true,
source: dataAdapter,
pageable: true,
//theme: ‘classic’,
sortable: true,

filterable: false,

virtualmode: true,
rendergridrows: function (obj) {
return obj.data;
},
localization: getLocalization(),
sorttogglestates: 1,

ready: function () {
// called when the Grid is loaded. Call methods or set properties here.
$(‘#glpPermitItem’).jqxGrid({ pagesize: 10 });
},

selectionmode: ‘checkbox’,
altrows: true,

columns: [
{ text: ‘ลำดับที่’, datafield: ‘IDROW’, width: ’80px’, cellsalign: ‘center’, align: ‘center’, editable: false },
{ text: ‘ชื่อสิทธิ์’, datafield: ‘PERMITEM_NAME’, width: ‘300px’, cellsalign: ‘left’, align: ‘center’, editable: false },
{ text: ‘คำอธิบาย’, datafield: ‘DESCRIPTION’, width: ‘400px’, cellsalign: ‘left’, align: ‘center’, editable: false },
],
});

$(‘#glpPermitItem’).on(‘rowdoubleclick’, function (event) {
/*
ต้องบอกน้องให้เปลี่ยนการหา row index โดยเพิ่มบันทัดการหา row data
*/
var dataRecord = $(“#glpPermitItem”).jqxGrid(‘getrowdata’, event.args.rowindex);
window.showModalDialog(‘/PermitItem/Edit/’ + dataRecord.uid, window, ‘dialogwidth: 400px; dialogheight: 250px; resizable: no’);
});

function refreshGrid() {
$(‘#glpPermitItem’).jqxGrid(‘updatebounddata’); //Refresh the grid.
//$(‘#glpPermitItem’).jqxGrid({ source: dataAdapter }); //Refresh the grid.
}

function doSearch() {
var txtSearch = $(“#txtSearch”).val();
source.data.searchParam = txtSearch;
refreshGrid();
}

function search_keyenter(evt) {
var p = evt.which;
if (p == 13) {
doSearch();
}
}

$(“#btnSearch”).click(function () {
doSearch();
});

$(“#btnAdd”).click(function () {
window.showModalDialog(‘/PermitItem/Create’, window, ‘dialogwidth: 400px; dialogheight: 250px; resizable: no’); //Shows pop up dialog (Create.cshtml).
});

$(‘#btnDelete’).click(function () {
if (confirm(“ยืนยันการลบข้อมูล”)) {
var selectedRowIndexes = $(“#glpPermitItem”).jqxGrid(‘getselectedrowindexes’);
var mylist = new Array();
for (i = 0; i < selectedRowIndexes.length; i++) {
mylist[i] = selectedRowIndexes[i];
}
var jsonIDList = ko.toJSON(mylist);
var form = $(‘#__AjaxAntiForgeryForm’);
var token = $(‘input[name=”__RequestVerificationToken”]’, form).val();
$.post(‘/PermitItem/Delete’, { __RequestVerificationToken: token, ‘selectedIndexes’: jsonIDList }, function (e) {
onDeleteSuccess(e);
}, “json”);
}
else {
return false;
}
});

function onDeleteSuccess(e) {
if (e.status == “SUCCESS”) {
refreshGrid();
$(‘#glpPermitItem’).jqxGrid(‘clearselection’); //Unselect all items.
}
else {
}
$(‘#txtStatus’).html(e.message).fadeOut(3000, null);
}
</script>

[DimitarParticipant]

Hello Wijit,

Could you, please, create a JSFiddle example which demonstrates the reported issue and provide us with a step-by-step guide to reproducing it?

Best Regards,
Dimitar

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

[Author]

Posts