public ActionResult DataSource(DataManager dm)
{
IEnumerable DataSource = new NorthwindDataContext().OrdersViews.ToList();
DataResult result = new DataResult();
DataOperations operation = new DataOperations();
result.result = DataSource;
---------
result.count = result.result.AsQueryable().Count();
if (dm.RequiresCounts)
return Json(result, JsonRequestBehavior.AllowGet);
else
return Json(result.result, JsonRequestBehavior.AllowGet); // return only data, when RequiresCounts is set as false
}
|
Thanks for the quick response.
Everything works perfectly.
But one of the questions remained unanswered.
How do I add auto-complete for a table search?
<div>
@{
Html.EJ()
.Autocomplete("selectCustomerID")
.EnableAutoFill(true)
.Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor))
.WatermarkText("Select a CustomerID")
.Query("ej.Query()").AutocompleteFields(af => af.Text("CustomerID")).Width("300")
.FilterType(FilterOperatorType.Contains)
.Render();
}
<input type="button" value="ClickToSearch" onclick="Searching()" />
</div>
@(Html.EJ().Grid<object>("FlatGrid")
---------
.AllowPaging() /*Paging Enabled*/
.AllowSearching()
.Columns(col =>
{
-------------
}))
</div>
<script type="text/javascript">
function Searching()
// Create a grid object.
var gridObj = $("#FlatGrid").ejGrid("instance");
// create a send request to the grid
gridObj.search($("#selectCustomerID").val())
}
</script>
|
Thanks for the help, in my project I did exactly that. But I thought there might be some other way to implement this feature
[GridFeatures.cshtml]
@(Html.EJ().Grid<OrdersView>("FlatGrid")
.Datasource(ds => ds.URL("/Grid/DataSource").Adaptor(AdaptorType.UrlAdaptor))
---------
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar(true).CustomToolbarItems(new List<object>() { new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Search" }, new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#button" } });
})
.AllowSearching()
.ClientSideEvents(cevent => cevent.ActionComplete("complete").ToolbarClick("toolbarclick"))
.Columns(col =>
{
--------
})
)
</div>
<script id="Search" type="text/x-jsrender">
<input />
</script>
<script id="button" type="text/x-jsrender">
<input type="button" value="ClearSearch" />
</script>
<script type="text/javascript">
function complete(args) {
var dataManager = ej.DataManager({ url: "/Grid/DataSource", adaptor: new ej.UrlAdaptor() });
$("#FlatGrid_Search input").ejAutocomplete({ dataSource: dataManager, fields: { text: "CustomerID" }, select: "searchingText" });
}
function toolbarclick(args) {
if (args.itemName != "Search") {
var gridObj = $("#FlatGrid").ejGrid('instance');
gridObj.clearSearching();
}
}
function searchingText(args) {
var gridObj = $("#FlatGrid").ejGrid('instance');
gridObj.search($("#FlatGrid_Search input").val());
}
</script>
|