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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Dynamic columns with javascript ejGrid and async filtering of grid data via search form

Dynamic columns with javascript ejGrid and async filtering of grid data via search form

I am using the EJ javascript Grid in an ASP.NET MVC4 C# and .NET 4.5 project, getting the data manager to make requests to my controller.

I am looking for information on whether the grid can work without defining the columns and fields, i.e. dynamic fields.. my initial attempt at this was to build up the json for the column fields based on the data before loading the grid, but I have not got this working fully yet.. is there a better approach that I am not aware of?

I want to filter the grid data from a search form, I can obviously pass my filter criteria to my request and reload the whole grid but is there async support for this with the data manager or knockout support for refreshing the grid data from a search form selection in this way? 

Please can I ask if you have any more documentation available on this example from your help documents, because I am not entirely sure of it's purpose over setting the properties in the grid? 

var dm = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/"); 
var query = ej.Query().from("Orders").select("OrderID","CustomerID","OrderDate").page(1, 10) 
var promise = dm.executeQuery(query); 
promise.done(function (e) { $("#Grid").ejGrid({dataSource: e.data}); });

Thanks

7 Replies
RU Ragavee U S Syncfusion Team May 26, 2014 04:37 PM UTC

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



Attachment: Sampl116426_54d4f0ae.zip

NE Neil May 27, 2014 12:21 PM UTC

Thanks for the reply.

Is there any way of getting this working if the action is returning the result and count?

i.e. like this from an MVC action:

return Json(new { result = list, count= count }, JsonRequestBehavior.AllowGet);

When I try your example approach I get a javascript error, it only works if only the result is returned.

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, so presumably after the promise has returned a result, I need to iterate over it and build up a column schema JSON object before loading the grid? is this a recommended approach?


NE Neil May 27, 2014 02:00 PM UTC

I have stopped the error by adding .requiresCount()

shown in the below example:
        var dataManager = ej.DataManager({ url: "/Home/GetData/", dataType: "json" });
        var query = ej.Query().page(1, 20).requiresCount();
        var promise = dataManager.executeQuery(query);

but my issue seems to be related to want to use the paging without loading all the data at the start, changing a page in the grid is not making a new data request.

NE Neil May 27, 2014 03:41 PM UTC

Your example shows a nice example of calling the column filtering using a search field but that unfortunately wasn't what I was trying to do.

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.

Is this supported?

RU Ragavee U S Syncfusion Team May 28, 2014 12:49 PM UTC

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


RU Ragavee U S Syncfusion Team May 30, 2014 12:55 PM UTC

Hi Neil

We regret for the inconvenience caused.

We are working on your requirement.  We will update you the response on June 2, 2014

Regards

Ragavee U S

RU Ragavee U S Syncfusion Team June 2, 2014 05:06 PM UTC

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



Attachment: Sample_with_screenshot_ab2bfc1b.zip

Loader.
Live Chat Icon For mobile
Up arrow icon