We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to add checkbox column in a grid and obtain row checked with paging in true

Thread ID:

Created:

Updated:

Platform:

Replies:

119152 May 14,2015 04:18 PM May 20,2015 06:34 AM ASP.NET Web Forms 6
loading
Tags: Grid
Roimer Machacón Otero
Asked On May 14, 2015 04:18 PM

Hi, we're using the grid and are need put a check column for mark several rows that after need save in a json, using the grid with paging in true.

Is there a way to do this?

Gowthami V [Syncfusion]
Replied On May 15, 2015 05:47 AM

Hi Nestor,

Thanks for using Syncfusion products.

We have analyzed your query and we suspect that you have expected to select the rows while check the checkbox and maintain the selection while navigate to the another page.

Based on your requirement we have created a sample and the same can be downloaded from the following link.

Sample Link: Sample.zip

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" Width="1500px" 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") {

if ($("#headchk").is(':checked')) {

$(".rowCheckbox").prop('checked', true);

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") {

var query = ej.Query().page(args.currentPage, gridObj.model.pageSettings.pageSize);

var data = ej.DataManager(gridObj.model.dataSource).executeLocal(query);

var index = [];

var j = 0;

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>


If we misunderstood your requirement please provide below details about the requirement.

1. Please explain the exact scenario for saving checked rows to json.

2. Please share us the screenshot/video of your requirement.

Please try the sample and let us know if you have any queries.

Regards,

Gowthami V.


Roimer Machacón Otero
Replied On May 15, 2015 10:10 AM

Hi, the grid in the example dont' work the paging, we're need that the grid have the paging in true.

We're need save the rows in the json to pass to another grid that receive the information of the rows for after save in the database 

Roimer Machacón Otero
Replied On May 15, 2015 10:12 AM

We 've the version 12.4.0.24 and can't download the version 13 and also working in the framework 4.0 no 4.5

Gowthami V [Syncfusion]
Replied On May 18, 2015 08:43 AM

Hi Nestor,

Thanks for your update,

The solution provided in our previous update works well with local datasource and we suspect that you are using remote datasource and hence the selection was not maintained on paging. Now based on your requirement we have modified our previous sample and the same can be downloaded from the following link.

Sample Link: Sample.zip

In the above sample we have maintained the selection while navigating to another page and also bound the selected current page data to the another grid’s dataSource.

Please refer the below code snippet.

<ej:Grid ID="Grid" runat="server" Width="1500px" AllowPaging="true" AllowSelection="true" Selectiontype="Multiple">

<ClientSideEvents ActionBegin="begin" ActionComplete="complete" RowSelecting="rowSelect" />
. . . .
</ej:Grid>

function checkChange() {
gridObj = $('#Grid').data("ejGrid");

gridObj["checkState"] = gridObj["checkState"] || {};

gridObj["checkState"][gridObj.model.pageSettings.pageSize] = gridObj["checkState"][gridObj.model.pageSettings.pageSize] || [];
. . . .

gridObj["checkState"][gridObj.model.pageSettings.currentPage] = gridObj.selectedRowsIndexes;


}


function complete(args) {
var data = [];

else {

if (!ej.isNullOrUndefined(Changestate)) {

for (i = 0; i < Changestate.length; i++) {


gridObj.multiSelectCtrlRequest = true;

gridObj.getRowByIndex(Changestate[i]).find('input').prop("checked", true);

gridObj.selectRows(Changestate[i]);

data.push(gridObj.model.currentViewData[Changestate[i]]);

gridObjnew.dataSource(data);


}
}


In the above code snippet, we have maintained the row selection details using an additional property gridObj["checkState"] . For your information , using above snippet we can bind only the current page data to the another grid since it’s a remote binding and the selection is maintained at the client side.

If you wantto bind all the selected data (data from another page) to the grid then the selection details must be saved as a field at the database and then only it can be bound to the another grid, please let us know if you want to show all theselected records and we can provide you the sample based on that.

If we misunderstood your requirement please share us the below details about your requirement.

1. Share us the code snippet that you have used for rendering grid.

2. Share us the screenshot/video of your requirement.

Please try the sample and let us know if you have any queries.

Regards,
Gowthami V.


Roimer Machacón Otero
Replied On May 19, 2015 09:43 AM

HI, I can't see the example. Appear this error (attached image), we're using the version 12.3400.0.36, because in the version 12.4400.0.24 testing the excel filter in the grid that are need and this don't work.

Attachment: error_64aaa5b0.rar

Gowthami V [Syncfusion]
Replied On May 20, 2015 06:34 AM

Hi Nestor,

Thanks for your update.

For your information , the property _selectedRowsIndexes” is changed to public in the version 12.4400.0.24. So that only the provided sample is not working in the version “12.3400.0.36”.

Now we have modified the sample based on your requirement and the same can be downloaded from the following link.

Sample Link: Sample.zip

Please modify the below code in the “change” event of the checkbox.

<script type="text/x-jsrender" id="check">

<input type="checkbox" class="rowCheckbox" id="chk" onchange="checkChange()">
</script>

function checkChange() {
. . . .
gridObj["checkState"][gridObj.model.pageSettings.currentPage] = gridObj._selectedRowsIndexes;
}



Please try the sample and let us know if you have any queries.

Regards,
Gowthami V.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;