Category / Section
How to get selected records from all pages in multiCheckbox feature with remote data?
1 min read
This Knowledge base explains how to get the selected records details when checkbox selection is used with remote data.
Solution:
In client-side it’s not feasible to get all selected records in multiple pages since only current page data is available with on-demand data loading.
Yet we have found the selected rows indexes using checkSelectedRowsIndexes property and obtained the selected records details by sending the indexes to the server side using an ajax post.
HTML
<input type="button" value="Records" onclick=" onClick()" /> <div id="Grid"></div>
JavaScript
<script>
$(function () {
var dataManager = ej.DataManager({
url: "/Home/UrlDataSource",
adaptor: new ej.UrlAdaptor(),
});
$("#Grid").ejGrid({
dataSource: dataManager,
allowPaging: true,
columns: [
{type:"checkbox",width:50},
{ field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 75, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID",textAlign: ej.TextAlign.Right, width: 75 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 75 },
{ field: "ShipCity", headerText: "Ship City",textAlign: ej.TextAlign.Right, width: 75 },
]
});
});
</script>
MVC
RAZOR
<input type="button" value="Records" onclick=" onClick()" />
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.URL("/Home/UrlDataSource").Adaptor(AdaptorType.UrlAdaptor))
.AllowPaging()
.Columns(col =>
{
col.Type("checkbox").Width(50).Add();
col.Field("OrderID").HeaderText("Order ID").Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(75).Add();
}))
C#
public ActionResult UrlDataSource(DataManager dm)
{
IEnumerable DataSource = OrderRepository.GetAllRecords();
DataOperations ds = new DataOperations();
List<string> str = new List<string>();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = ds.PerformSearching(DataSource, dm.Search);
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = ds.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = ds.PerformWhereFilter(DataSource, dm.Where, dm.Where[0].Operator);
}
var count = DataSource.Cast<EditableOrder>().Count();
DataSource = ds.PerformSkip(DataSource, dm.Skip);
DataSource = ds.PerformTake(DataSource, dm.Take);
return Json(new { result = DataSource, count = count });
}
public ActionResult Data(int[] value)
{
List<EditableOrder> Rec = new List<EditableOrder>();
var DataSource = OrderRepository.GetAllRecords().ToList();
for (int i = 0; i < value.Length; i++)
{
Rec.Add(DataSource.ElementAt(value[i])); //getting the selected records from the server side
}
return Json(Rec, JsonRequestBehavior.AllowGet);
}
ASP.NET
ASPX
<input type="button" value="Records" onclick=" onClick()" /> <ej:Grid runat="server" ID="Grid" AllowPaging="true"> <DataManager URL="/Default.aspx/DataSource" Adaptor="WebMethodAdaptor" /> <Columns> <ej:Column Type="checkbox" Width="50" /> <ej:Column Field="OrderID" HeaderText="Order ID" Width="75" /> <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="75" /> <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="75" /> <ej:Column Field="ShipCity" HeaderText="ShipCity" TextAlign="Right" Width="75" /> </Columns> </ej:Grid>
ASPX.CS
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object DataSource(DataManager value)
{
IEnumerable data = OrderRepository.GetAllRecords().ToList();
DataOperations ds = new DataOperations();
if (value.Where != null && value.Where.Count > 0) //Filtering
{
data = ds.PerformWhereFilter(data, value.Where, value.Where[0].Operator);
}
if (value.Search != null && value.Search.Count > 0) // Searching
{
data = ds.PerformSearching(data, value.Search);
}
var count = data.AsQueryable().Count();
if (value.Sorted != null && value.Sorted.Count > 0) //Sorting
{
data = ds.PerformSorting(data, value.Sorted);
}
List<string> str = new List<string>();
if (value.Aggregates != null) // Summary
{
for (var i = 0; i < value.Aggregates.Count; i++)
str.Add(value.Aggregates[i].Field);
}
data = ds.PerformSkip(data, value.Skip); //Paging
data = ds.PerformTake(data, value.Take);
return new { result = data, count = count};
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object Data(int[] value)
{
List<EditableOrder> Rec = new List<EditableOrder>();
var DataSource = OrderRepository.GetAllRecords().ToList();
for (int i = 0; i < value.Length; i++)
{
Rec.Add(DataSource.ElementAt(value[i]));
}
return Rec;
}
ASP.NET CORE
RAZOR
<input type="button" value="Records" onclick=" onClick()" /> <ej-grid id="Grid" allow-paging="true"> <e-datamanager url="/Home/DataSource" adaptor="UrlAdaptor"></e-datamanager> <e-columns> <e-column type="checkbox" width="50"></e-column> <e-column field="OrderID" header-text="Order ID" width="75" text-align="Right"></e-column> <e-column field="CustomerID" header-text="Customer ID" width="75" text-align="Right"></e-column> <e-column field="EmployeeID" header-text="Employee ID" width="75" text-align="Right"></e-column> <e-column field="ShipCity" header-text="ShipCity" width="75" text-align="Right"></e-column> </e-columns> </ej-grid>
C#
public ActionResult DataSource([FromBody]DataManager dataManager)
{
IEnumerable data = _context.Orders.Take(50).ToList();
DataOperations operation = new DataOperations();
if (dataManager.Sorted != null && dataManager.Sorted.Count > 0) //Sorting
{
data = operation.PerformSorting(data, dataManager.Sorted);
}
if (dataManager.Where != null && dataManager.Where.Count > 0) //Filtering
{
data = operation.PerformWhereFilter(data, dataManager.Where, dataManager.Where[0].Operator);
}
int count = data.Cast<Orders>().Count();
if (dataManager.Skip != 0)
{
data = operation.PerformSkip(data, dataManager.Skip);
}
if (dataManager.Take != 0)
{
data = operation.PerformTake(data, dataManager.Take);
}
return Json(new { result = data, count = count });
}
[AcceptVerbs("POST")]
public ActionResult Data([FromBody]receivedata value)
{
List<Orders> Rec = new List<Orders>();
var DataSource = _context.Orders.ToList(); ;
for (int i = 0; i < value.value.Count; i++)
{
Rec.Add(DataSource.ElementAt(value.value[i]));
}
return Json(Rec);
}
public class receivedata
{
public List<int> value { get; set; }
}
2. In the button click event we have obtained the selected records indexes using checkSelectedRowsIndexes property and passed the indexes to server side using an ajax post to filter the selected records from the database.
JS
<script>
function onClick(args) {
var obj = $("#FlatGrid").ejGrid("instance"), rec = [];
var check = obj.checkSelectedRowsIndexes; // collection which holds the page index and the selected record index
if (check.length) {
for (var pageInx = 0; pageInx < check.length; pageInx++) {
if (!ej.isNullOrUndefined(check[pageInx]))
rec = getRecords(pageInx, check[pageInx], obj, rec);
}
}
$.ajax
({
url: "/Home/Data",
type: 'POST',
data: JSON.stringify({ value: rec }), //
contentType: "application/json",
success: function (data) {
console.log(data);
}
});
}
function getRecords(pageInx, inx, proxy, rec) {
if (inx.length) {
for (var i = 0; i < inx.length; i++) {
var pageSize = proxy.model.pageSettings.pageSize; //gets the page size of grid
var data = pageInx * pageSize + inx[i];
rec.push(data); //pushing all the selected Records
}
}
return rec;
}
</script>
Output:
