ASP.Net 4, SyncFusion grid populated by a Web API binding

[Stephen Harris]

I am trying to bind aSyncFusion grid on an MVC view usingWeb API binding. I am using an ApiController that finds the correct method via the WebApiConfig router. All this works in terms of getting to the controller method. It determines the correct number of records to return. I am returning the records as a PageResult. The return type of the method is PageResult:

return new PageResult(results, null, count);

When I debug this, there are records in results and the count is always correct. The problem I have is that nothing appears in the grid

In the view I am using the following to get the data:

$(function () {

var dataManager = ej.DataManager({ url: "http://localhost:40362/api/AcrArchives/", crossDomain: true, adaptor: new ej.WebApiAdaptor() }).executeQuery(new ej.Query().addParams("LastName", "'").addParams("AcrNumber", "'").addParams("TifName", "'"));

var query = new ej.Query().take(10);

var promise = dataManager.executeQuery(query);

promise.done(function (e) {

$("FlatGrid").html($("#instance").render(e.result.value));

});

});

Are the complete web api examples that show not only the view but the ApiController method employed. The problem I have is that I try various combinations of this that and the other but am still not able to render data in the grid using addParams.

Any help would be apprecicated.

[Seeni Sakthi Kumar Seeni Raj]

Hi Stephen, 

To update the Grid datasource, you have to use the Grid dataSource method. In the click event of the Button, we have repopulated Grid data using the dataSource method. Refer to the following code example and Help Document.  

    @Html.EJ().Button("btn").Text("Render Data").ClientSideEvents(e => e.Click("onClick")) 

 

    @(Html.EJ().Grid<object>("FlatGrid") 

             .AllowPaging() 

              . .  

                 ..  

    ) 

 

    <script> 

        function onClick(args) { 

            var dataManager = ej.DataManager({ 

                url: "/api/Values/", 

                adaptor: new ej.WebApiAdaptor() 

            }); 

            var query = new ej.Query().take(10); 

            var promise = dataManager.executeQuery(query); 

            promise.done(function (e) { 

                var gridObj = $("#FlatGrid").ejGrid("instance"); 

                gridObj.dataSource(e.result.result) 

            }); 

        } 

    </script> 

https://help.syncfusion.com/js/api/ejgrid#methods:datasource 

We have prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/126405/ze/WebAPIService-1995186966.zip 

Regards, 

Seeni Sakthi Kumar S.