<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True" AllowSelection="true" Selectiontype="Multiple"> <ClientSideEvents ActionBegin="begin" ActionComplete="complete"RowSelecting="rowSelect"/> . . . . </ej:Grid> <script type="text/javascript"> var gridObj; function complete(args) {
$("#<%= Grid.ClientID %> .rowCheckbox").on("change", checkChange); gridObj = $('#<%= Grid.ClientID %>').data("ejGrid"); if (args.requestType == "paging") { . . . . gridObj.selectRows(0, gridObj.model.pageSettings.pageSize); } else { var idx = 0; for (i = args.startIndex; i < args.endIndex; i++) { if (gridObj.model.dataSource[i].Checked == true) { gridObj.multiSelectCtrlRequest = true; gridObj.selectRows(idx); $('#<%= Grid.ClientID %> .rowCheckbox')[idx].checked = true; } idx++; }}}}
function begin(args) { gridObj = $('#<%= Grid.ClientID %>').data("ejGrid"); if (args.requestType == "paging") { . . . . data.filter(function (x) { if ((x.Checked) == true) index.push(j) j++; return index; }); for (j = 0; j < index.length; j++) { gridObj.multiSelectCtrlRequest = true; $('#<%= Grid.ClientID %> .rowCheckbox')[j].checked = true; }}}} |
<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True" |
Hi Ray,
Thanks for using Syncfusion products.
Query 1: Just Compare with This control,There is no chechboxcolumn?
Based on your requirement we have created a sample and the same can be downloaded from the following link.
Sample Link: Sample
In the above sample, we have created a column “checked” with value “false” by default. Based on the checkbox selection, the corresponding record’s checked value is assigned true.
In actionComplete and actionBegin events of the grid, the records with “checked” value “true” are retrieved and thus the selection made is persisted while navigating to other pages.
<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"
AllowSelection="true" Selectiontype="Multiple">
<ClientSideEvents ActionBegin="begin" ActionComplete="complete"RowSelecting="rowSelect"/>
. . . .
</ej:Grid>
<script type="text/javascript">
var gridObj;
function complete(args) {
$("#<%= Grid.ClientID %> .rowCheckbox").on("change", checkChange);
gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");
if (args.requestType == "paging") {
. . . .
gridObj.selectRows(0, gridObj.model.pageSettings.pageSize);
}
else {
var idx = 0;
for (i = args.startIndex; i < args.endIndex; i++) {
if (gridObj.model.dataSource[i].Checked == true) {
gridObj.multiSelectCtrlRequest = true;
gridObj.selectRows(idx);
$('#<%= Grid.ClientID %> .rowCheckbox')[idx].checked = true;
}
idx++;
}}}}
function begin(args) {
gridObj = $('#<%= Grid.ClientID %>').data("ejGrid");
if (args.requestType == "paging") {
. . . .
data.filter(function (x) {
if ((x.Checked) == true)
index.push(j)
j++;
return index;
});
for (j = 0; j < index.length; j++) {
gridObj.multiSelectCtrlRequest = true;
$('#<%= Grid.ClientID %> .rowCheckbox')[j].checked = true;
}}}}
function rowSelect(args)
{
if (!ej.isNullOrUndefined(args.target) && args.target.hasClass("e-rowcell"))
args.cancel=true;
}
<script>
Query 2: Can i set the page size in the grid?
Yes. We can set the page size in the grid using “PageSize” property of the “PageSettings” of the grid as follows.
<ej:Grid ID="Grid" runat="server" DataSourceID="SqlData" AllowPaging="True"
AllowSelection="true" Selectiontype="Multiple" >
. . . .
<PageSettings PageSize="10" />
</ej:Grid>
Please try the sample and let us know if you have any queries.
Regards,
Gowthami V.
<script type="text/javascript"> function enableCheckbox(gridElement) { gridElement.element.find("input[type='checkbox']").removeAttr("disabled"); this.element.find("input[type='checkbox']").on("change", function (e) { checkChange(this, e); }); } function create(args) { enableCheckbox(this); function complete(args) { enableCheckbox(this); if (args.requestType == "paging") { var idx = 0; . . . . this.selectRows(idx); $('#<%= Grid.ClientID %> input[type="checkbox"]')[idx].checked = true; } idx++; . . . . |
<script type="text/javascript"> function checkChange(ele,e) { gridObj = $('#<%= Grid.ClientID %>').data("ejGrid"); if (ele.checked == false) { gridObj.model.dataSource[gridObj.getIndexByRow(ele.parentElement.parentElement)].Checked = false; } gridObj.multiSelectCtrlRequest = true; . . . . var add = temp + arr; gridObj.model.dataSource[add].Checked = true; } } </script> |
<ej:DropDownList ID="optIndexChange" WaterMarkText="Select" ClientSideOnChange="onActiveIndexChange" runat="server" Width="107px"> . . . . </ej:DropDownList> <script type="text/javascript"> function onActiveIndexChange(args) { . . . . $('#<%= Grid.ClientID %>').ejGrid("getPager").ejPager("goToPage", newLastPage); $('#<%= Grid.ClientID %>').ejGrid({ "pageSettings": { pageSize: parseInt(args.value) } }); setPageValue(model1.totalPages); } function setPageValue(val) { $("#currentpage").ejNumericTextbox("model").maxValue = val; $("#pagecount").ejNumericTextbox("model").maxValue = val; } </script> |