Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
148995 | Nov 11,2019 01:14 PM UTC | Nov 15,2019 10:45 AM UTC | JavaScript - EJ 2 | 4 |
![]() |
Tags: Grid |
[Index.cshtml]
var dataManager = new ej.data.DataManager({
url: "/Home/UrlDatasource",
updateUrl: "/Home/Update",
insertUrl: "/Home/Insert",
removeUrl: "/Home/Delete",
adaptor: new ej.data.UrlAdaptor()
});
var grid = new ej.grids.Grid({
dataSource: dataManager,
allowPaging: true,
allowSorting: true,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true, validationRules: { required: true } },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120, validationRules: { required: true, minLength: 3 }, defaultValue: 'HANAR' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
]
});
grid.appendTo('#Grid');
----------------------------------------------------------------------------------------------------------------
[HomeController.cs]
public ActionResult UrlDatasource(DataManagerRequest dm)
{
IEnumerable DataSource = orddata;
DataOperations operation = new DataOperations();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
}
int count = DataSource.Cast<OrdersDetails>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}
|
Hi,
Sort foreign key column based on Text section
Let me know if this is
the correct approach for server-side sorting in JavaScript grid.
Please crate an example of server-side sorting with fake backend and post here. So that I can use that in our demo since we don’t have the real backend ready yet.
var grid = new ej.grids.Grid({
dataSource: [],
created: created,
allowSorting: true,
dataStateChange: dataStateChange,
pageSettings: {pageSize: 10},
allowPaging: true,
columns: [
{ field: "CustomerID", headerText: "Customer Name", width: 150 },
. . . . .
]
});
grid.appendTo("#Grid");
function getData(gridquery) {
var state = gridquery;
var sortQuery = "";
const skipquery = state.skip ? `$skip=${state.skip}` : null;
var pageQuery = "";
const takeQuery = state.take ? `$top=${state.take}` : null;
if (skipquery) {
pageQuery = `${skipquery}&`;
}
if (takeQuery) {
pageQuery = `${pageQuery}${takeQuery}`;
}
var filterQuery = "";
if ((state.sorted || []).length) {
sortQuery =
`&$orderby=` +
state.sorted
.map(obj => {
return obj.direction === "descending" ? `${obj.name} desc` : obj.name;
})
.reverse()
.join(",");
}
// based on the grid query we have form the url and get the result you can generate query based on your service
var ajax = new Ajax(
`${BASE_URL}?${pageQuery}${sortQuery}&$count=true`
);
ajax.send();
ajax.onSuccess = data => {
if (grid.element !== undefined) {
var final = JSON.parse(data);
// finally return the value as result(JSON Object) and count(total count) pair
grid.dataSource = { result: final.value, count: final["@odata.count"] };
}
};
}
function dataStateChange(state) {
// get grid queries from the Grid action
getData(state); // trigger for every grid action (page, sort, ect.,)
}
function created() {
var state = { skip: 0, take: 10 };
getData(state); // for initial grid settings
}
|
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.
This page will automatically be redirected to the sign-in page in 10 seconds.