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

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

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.

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 14, 2016 12:57 PM UTC

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> 


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


Regards, 
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon