We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Neil,
Thanks for
using Syncfusion Products.
Based on your
request, we have created a sample to define dynamic column binding and also
perform filtering operation using an external form. The sample can be
downloaded from the attachment.
Please refer
the below code snippet.
|
<body> <input type="text" class="e-field e-ejinputtext" id="ShipCountry"
/> <button class="btn-default" id="btn">Build
Report</button> . . . </body> <script>
$(function
() {
$("#btn").ejButton();
$("#btn").click(function () {
var value
= $("#ShipCountry").val();
var obj =
$("#Grid").data("ejGrid");
obj.sendFilteringRequest("ShipCountry","equal",value,"or",false);
});
var dm = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/"); var query = ej.Query().from("Orders").select("OrderID","CustomerID","ShipCountry").page(1,
10) var promise =
dm.executeQuery(query); promise.done(function (e) {
$("#Grid").ejGrid({ dataSource: e.result,
allowFiltering: true, filterSettings: {filterType: "menu"}
}); });
}); </script> |
In the attached
sample the _metadata values are also displayed in the grid while
binding the result to the grid datasource. We have confirmed it as an issue and
the fix for this issue is estimated to be available in our Volume 2, 2014
release.
Please let us
know if you need any further assistance.
Regards
Ragavee U S
Hi Neil
We regret for the inconvenience caused.
Currently we are working on your
requirement “Dynamic columns with
javascript ejGrid and async filtering of grid data via search form”
with high priority and we will provide you the
response by May 30, 2014.
Regards
Ragavee U S
Hi Neil
Thanks for your patience.
Query #1: “Is there any way of getting this working
if the action is returning the result and count?”
Instead of passing the query using the dataManager, we can
directly bind the dataSource to the grid and pass query through it. Please
refer the below code snippet.
|
<script> window.dm
= ej.DataManager({ url: "/Home/Index/" });
$("#Grid").ejGrid({
dataSource: window.dm,
query: ej.Query().search(search, ["CustomerID", "EmployeeID"]), . . . </script> |
Query #2: “I also would need to alter some of the
columns i.e. to disable sorting and because only part of my data has dynamic
columns not the whole result set, ”
We have confirmed that there is an issue with disabling
sorting to a particular column. Currently only Freight column can be disabled. We have logged
a defect report on the same. The fix for the issue will be available in our
volume 2, 2014 release at the mid of June month.
Query #3: “I have a search form that I will be using
to get the appropriate data, I first want to load the grid only once the user
has applied their search criteria, which doesn't always correspond to the
Grid's columns. My problem is that once the grid has loaded I also want to
have the change in paging make a new request.. rather than have all the data
loaded initially.. but to still the user's search form criteria be applied,
rather than be lost during this page change request.”
The searching and paging query are passed to the controller
and are maintained while performing paging operation. Please refer the below
code snippet.
|
[In
Controller] public JsonResult Index([Bind(Prefix
= "$skip")]int skip, [Bind(Prefix = "$top")]int take, [Bind(Prefix = "$filter")]string search) //the page skip, top and search values are get like this
{ var DataSource = OrderRepository.GetAllRecords();
DataResult
result = new DataResult();
result.result =
DataSource.Skip(skip).Take(take).ToList();
result.count = DataSource.Count();//total
record count of dataSource, not filtered data count
return
Json(result, JsonRequestBehavior.AllowGet);
} [In
View] <script> $("#Grid").ejGrid({ query: ej.Query().search(search, ["CustomerID", "EmployeeID"]), . . . </script> |
While passing search query, it is essential to pass the
columns which are to be searched for. Please find the screenshot for the paging
request passed to the controller with the attachment.
For your convenience, we have created a sample based on your
requirements and the same can be downloaded from the attachment.
In our sample, we have bound five columns
initially by default. In order to dynamically add or remove columns, the click
event of the add or remove buttons, trigger the corresponding actions.
Please refer the below code snippet
|
[In
View] <script> $("#render").click(function () {
var obj =
$("#Grid").data("ejGrid");
$.each(obj._currentJsonData[0],
function
(x) {
index.push(x);
});
$("#col_name").ejDropDownList({
dataSource:
index,
change:
function
(args)
{
$('#remove').click(function () {
$("#Grid").ejGrid("columns", $("#col_name").val(), "remove");
});
$('#add').click(function () {
$("#Grid").ejGrid("columns", $("#col_name").val(), "add");
});
}
});
});</script> |
Please let us know if you need any further assistance.
Regards
Ragavee U S
