<ej-button id="btn" text="filter" click="onClick" />
<ej-grid id="Grid" allow-paging="true" allow-filtering="true">
</ej-grid>
<script>
function onClick(args) {
var gridObj = $("#Grid").ejGrid("instance");
if (val == "clearfiltering")
gridObj.clearFiltering();
else
gridObj.filterColumn("CustomerID", "VINET", "equal");
}
</script> |
<script type="text/x-jsrender" id="template">
<div class="e-pagercontainer">
<input type="text" id="pager" />
</div>
</script>
<ej-grid id="Grid" datasource="ViewBag.dataSource" allow-paging="true" allow-filtering="true" databound="dataBound">
<e-page-settings enable-templates="true" show-defaults="true" template="#template"/>
. . .
</ej-grid>
<script>
var pagerData = [
{ text: "10", value: 10 },
. . .
];
function dataBound(args) {
$('#pager').ejDropDownList({
change: "change",
value: this.model.pageSettings.pageSize,
dataSource: pagerData,
targetID: "pagesize"
});
}
function change(args) {
var gridObj = $("#Grid").ejGrid("instance");
gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } });
gridObj.getPager().find("input").ejDropDownList({
selectedIndex: args.itemId,
change: "change",
dataSource: pagerData
});
}
</script> |
<script type="text/x-jsrender" id="template">
<div class="e-pagercontainer">
<input type="text" id="pager" />
</div>
</script>
@{Html.EJ().Grid<WebApplication8.Controllers.HomeController.Orders>("Editing")
.Datasource(ds => ds.URL(@Url.Action("DataSource")).UpdateURL("/Home/CellEditUpdate").InsertURL("/Home/CellEditInsert").RemoveURL("/Home/CellEditDelete").Adaptor(AdaptorType.UrlAdaptor))
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.PageSettings(Page => { Page.EnableTemplates().Template("#template").ShowDefaults(true); })
.ClientSideEvents(eve => eve.DataBound("dataBound"))
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.AllowPaging()
.AllowFiltering()
.Columns(col =>
{
. . .
}).Render();
}
<script type="text/javascript">
var pagerData = [
{ text: "10", value: 10 },
{ text: "9", value: 9 },
{ text: "8", value: 8 },
{ text: "7", value: 7 },
];
function dataBound(args) {
$('#pager').ejDropDownList({
change: "change",
value: this.model.pageSettings.pageSize,
dataSource: pagerData,
targetID: "pagesize"
});
}
function change(args) {
var gridObj = $("#Editing").ejGrid("instance");
gridObj.option({ "pageSettings": { pageSize: parseInt(args.text) } });
gridObj.getPager().find("input").ejDropDownList({
selectedIndex: args.itemId,
change: "change",
dataSource: pagerData
});
}
</script>
|
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("CellEditUpdate").InsertURL("CellEditInsert").RemoveURL("CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("OrderDate").HeaderText("Order Date").EditType(EditingType.Datepicker).ValidationRules(v => v.AddRule("required",true)).Format("{0:dd/MM/yyyy}").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
}))
|