@(Html.EJ().Grid<object>("Editing")
.Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/")
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("ShipCity").HeaderText("ShipCity").Width(90).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();
col.Field("ShipAddress").HeaderText("Address corresponding to Shipment").HeaderTooltip("Address corresponding to Shipment").ClipMode(ClipMode.EllipsisWithTooltip).Width(55).Add(); // customized header text tooltip for grid column header
col.Field("EmployeeID").HeaderText("EmployeeID").Width(80).Add();
})
) |
<button id="btnOpen" > Filter </button>
<button id="btnclose"> Sort </button>
@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("Editing")
.Datasource((IEnumerable<object>)ViewBag.dataSource)
.ToolbarSettings(tool => tool.ShowToolbar().CustomToolbarItems(newList<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID ="#filter" }, new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID ="#sort " } }))
.ClientSideEvents(eve => eve.ToolbarClick("click").Create("create"))
.Columns(col =>
{
…
})
)
..
<script>
function click(args) {
if ($(args.target).text() == " Filter") {
var grid = $("#FlatGrid").ejGrid("instance");
…
grid.filterColumn(OrderID, "equal", value, "and", true); // OrderID as columnName
}
else {
…
gridObj.sortColumn("OrderID", "ascending"); // OrderID as columnName
}
}
</script>
|