|
yogesh
|
 |
« on: November 07, 2012, 07:38:39 AM » |
|
Hi
i am using CheckBox Selection on DataGrid with paging
if 2 rows are selected on 1 st page and i am moving to second page then again its showing 2 rows selected on second page
How to stop this ?
its mantaining the rownumber not the data id number
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #1 on: November 09, 2012, 06:19:57 AM » |
|
below are in details <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to implement client side pagination in DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
singleSelect: true,
checkOnSelect: false,
selectOnCheck: false,
pageSize:10">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
<script type="text/jscript">
function getData(){
var rows = [];
for(var i=1; i<=800; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = data.rows;
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = data.originalRows.slice(start, end);
return data;
}
$(function(){
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</script>
</body>
</html>
select the any check box and navigate to 2nd page now come back to 1 page checkbox not maintaing state is there any setting in datagrid control to maintain the state of checkboxes of previous page ? |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #2 on: November 09, 2012, 06:03:59 PM » |
|
To remember the selection state when going through different page, set 'idField' property to indicate the key field of record. <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:false,
idField:'nav',
autoRowHeight:false,
pagination:true,
singleSelect: true,
pageSize:10">
...
</table>
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #3 on: November 12, 2012, 02:39:10 AM » |
|
hi , i tried as u said it is working for row selection that is also for the last selected row my scenario is different below is my code <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>This sample shows how to implement client side pagination in DataGrid.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
singleSelect:false,
autoRowHeight:false,
pagination:true,
checkOnSelect: false,
idField:'inv',
selectOnCheck: false,
pageSize:10">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th field="inv" width="80">Inv No</th>
<th field="date" width="100">Date</th>
<th field="name" width="80">Name</th>
<th field="amount" width="80" align="right">Amount</th>
<th field="price" width="80" align="right">Price</th>
<th field="cost" width="100" align="right">Cost</th>
<th field="note" width="110">Note</th>
</tr>
</thead>
</table>
<script type="text/jscript">
function getData(){
var rows = [];
for(var i=1; i<=800; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = data.rows;
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = data.originalRows.slice(start, end);
return data;
}
$(function(){
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</script>
</body>
</html>
now check screen 1 i am selecting 3 check boxes and now i will move to screen 2 which page 2 check screen 2 i am selecting one more check box on the page 2 now check screen 3 i am moving back to page 1 and there is no previous selected check boxes i want to maintain the check box state during page navigation |
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #4 on: November 12, 2012, 05:34:28 PM » |
|
The check box state remembering feature is not supported in current version(1.3.1). The sample below shows another way to do this. <table id="dg" title="Client Side Pagination" style="width:700px;height:300px" data-options="
rownumbers:true,
autoRowHeight:false,
idField:'inv',
checkOnSelect:false,
selectOnCheck:false,
onCheck:onCheck,
onUncheck:onUncheck,
onLoadSuccess:onLoadSuccess,
pagination:true,
pageSize:10">
</table>
<script>
var checkedRows = [];
function onCheck(index,row){
for(var i=0; i<checkedRows.length; i++){
if (checkedRows[i].inv == row.inv){return}
}
checkedRows.push(row);
}
function onUncheck(index,row){
for(var i=0; i<checkedRows.length; i++){
if (checkedRows[i].inv == row.inv){
checkedRows.splice(i,1);
return;
}
}
}
function onLoadSuccess(data){
var dg = $(this);
var rows = data.rows;
for(var i=0; i<rows.length; i++){
var index = i;
var row = rows[i];
(function(){
for(var i=0; i<checkedRows.length; i++){
if (checkedRows[i].inv == row.inv){
dg.datagrid('checkRow', index);
return;
}
}
})();
}
}
</script>
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #5 on: November 13, 2012, 02:02:50 AM » |
|
thank you, it is working fine for data rows
how to handle same on the header check box ?
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #6 on: November 14, 2012, 07:14:04 AM » |
|
is there way to extend the header click event or to extend the header checkbox click event
|
|
|
|
|
Logged
|
|
|
|
|
stworthy
|
|
« Reply #7 on: November 14, 2012, 07:37:31 AM » |
|
When clicking the check box of header, the onCheckAll or onUncheckAll event will be triggered. Append all records of current page to checkedRows array on onCheckAll event and remove them from checkedRows array on onUncheckAll event.
|
|
|
|
|
Logged
|
|
|
|
|
yogesh
|
|
« Reply #8 on: November 15, 2012, 05:56:34 AM » |
|
thank you  |
|
|
|
|
Logged
|
|
|
|
|
