Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
141603 | Dec 20,2018 06:53 AM UTC | Dec 31,2018 12:06 PM UTC | ASP.NET Core - EJ 2 | 7 |
![]() |
Tags: DataGrid |
function buttonClick(args){
var gridObj = (document.querySelector('#Grid')).ej2_instances[0];
var drpObj = document.getElementById('daterangepicker').ej2_instances[0];
var dateValue1= drpObj.value[0];
var dataValue2= drpObj.value[1]; //get date values from date range picker
gridObj.filterSettings.columns = [
{ "value": dateValue1, "operator": "greaterthanorequal", "field": 'OrderDate', predicate: 'and'},
{ "value": dataValue2, "operator": "lessthanorequal", "field": 'OrderDate', predicate: 'and'}]
}
|
...
<div>
<ejs-multiselect id="multiselect" placeholder="EmployeeID" mode="Default" select="select">
<e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/Orders" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager>
<e-multiselect-fields text="EmployeeID" value="EmployeeID"></e-multiselect-fields>
</ejs-multiselect>
<ejs-grid id="Grid" allowSorting="true" allowFiltering="true" allowPaging="true" allowGrouping="true" toolbar="@(new List<string>(){"Add", "Edit", "Delete", "Update", "Cancel" })">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-data-manager url="https://ej2services.syncfusion.com/production/web-services/api/Orders" crossdomain="true" adaptor="WebApiAdaptor"></e-data-manager>
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="OrderID" width="120" headerText="Order ID"></e-grid-column>
<e-grid-column field="EmployeeID" width="120" headerText="Employee ID"></e-grid-column>
<e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
var orPredicate = null;
function select(args) {
if (orPredicate) {
orPredicate = orPredicate.or('EmployeeID', 'equal', args.itemData['EmployeeID']);
}
else {
orPredicate = new ej.data.Predicate('EmployeeID', 'equal', args.itemData['EmployeeID']);
}
var grid = document.getElementById("Grid").ej2_instances[0];
grid.query = new ej.data.Query().where(orPredicate);
grid.refresh();
}
</script>
... |
<ejs-grid id="Grid" allowSorting="true" allowPaging="true"
toolbar="@(new List<string>(){"Add", "Edit", "Delete", "Update", "Cancel" })">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-columns>
<e-grid-column field="OrderID" width="120" headerText="Order ID"></e-grid-column>
. . .
</e-grid-columns>
</ejs-grid>
<button id="btn" onclick="btnClick()">Load data</button>
<script>
// you can assign the dataSource in any other function as per your requirement after Grid is rendered
function btnClick(args) {
var grid = document.getElementById("Grid").ej2_instances[0];
var data = new ej.data.DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
crossdomain: true,
adaptor: new ej.data.ODataV4Adaptor
});
grid.dataSource = data;
}
</script>... |
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.