Databind grid to web api service

[Fraser]

I created a post in the wrong section here:  https://www.syncfusion.com/forums/136055/databind-grid-to-web-api-service

Hi,

Referring to your documentation located at https://help.syncfusion.com/aspnetmvc/grid/data-binding in the Web API Service it tells us that we have to return objects from this call... Is there a way we can return ienumerable in Json form and bind it to the grid ?

We want to avoid doing below

"The datasource from Web API service must be returned as object that has property Items with its value as datasource and another property Count with its value as datasource’s total records count."

We already have a built api and this is not suitable for us.

Thanks.

[Kuralarasan Muthusamy]

Hi Fraser, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and we found that you want to return Json result only on Web API service. If you return Json result only on Web API the data’s will be bounded to the Grid but the other actions like sorting, filtering, paging will not be performed in the server-end. Because this actions all are depends on the Items and Count values. Henceforth, these actions will be done by Grid in the client-end. So, you have to set the property offline as true in the DataManager.  

Please refer the following link to know about offline support: https://help.syncfusion.com/aspnetmvc/datamanager/advancedfunctionalities#offline-support 

If you need further assistance please get back to us, 

Regards, 

Kuralarasan M.  

[Fraser]

Hi Kuralarasan,

Thanks for the reply, yes this is exactly what we are looking for.

I have another question if you don't mind I looked at the documentation at https://help.syncfusion.com/aspnetmvc/datamanager/cruddataoperations but this only talks about how to update the grid i think.

What me and my team want to do is use the EditMode.DialogTemplate to add and manipulate records and for it to be updated via a an API call.

Can you help with this?

Also looking at the following code

    <script type="text/javascript" class="jsScript">

        function onClick(e) {

            try {

                var record = { OrderID: 10253, CustomerID: "ANGEL", EmployeeID: 4, ShipCity: "Reims", Freight: 23.1 };

                window.Data.insert(record)

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

            }

            catch (err) {

                alert(err);

            }

                obj.dataSource(window.FlatData.executeLocal(ej.Query().sortByDesc("OrderID")));

        }

    </script>

With this code i get an this error "TypeError:$(...)djGrid is not a funciton could you help with this too?

Please see attachment.

Thanks

Attachment: SFSFSFSFSF_bf3362af.zip

[Kuralarasan Muthusamy]

Hi Fraser, 

 

According to your code we suspect that you need to addrecord in a button click event in webapi Adaptor. To insert an record in Grid, we suggest you to use addRecord method of ejGrid.  

Find the code example:  

 

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

    .Datasource(ds => ds.URL("/api/Orders").Adaptor(AdaptorType.WebApiAdaptor)) 

    .ClientSideEvents(eve => { eve.ActionComplete("complete"); }) 

            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); }) 

   .AllowPaging() 

 

    .Columns(col => 

    { 

         ....... 

 }) 

) 

 

-------------------------------------------------------------------- 

 

<script> 

    function onClick(e) { 

            try { 

                var record = { OrderID: 10253, CustomerID: "ANGEL", EmployeeID: 4, ShipCity: "Reims", Freight: 23.1 }; 

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

                obj.addRecord(record); 

            } 

} 

</script> 

 

<script id="template" type="text/template"> 

    <table cellspacing="10"> 

        <tr> 

            <td>Order ID</td> 

            <td> 

                <input id="OrderID" name="OrderID" disabled="disabled" value="{{:OrderID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" /> 

            </td> 

            ...... 

            <td>Ship City</td> 

            <td> 

                <select id="ShipCity" name="ShipCity"> 

                    <option value="Argentina">Argentina</option> 

                 ..... 

                    <option value="Denmark">Denmark</option> 

                </select> 

            </td> 

        </tr> 

    </table> 

</script> 

 

…………………………………………. 

 

Controller page 

 

  // POST api/<controller> 

        public void Post(EmployeePhoto Value) 

        { 

                        

        } 

 

        // PUT api/<controller>/5 

        public void Put(EmployeePhoto Value) 

        { 

             

        } 

 

        // DELETE api/<controller>/5 

        public void Delete(int id) 

        { 

        } 

 

Please refer the following help document to know about addRecord: 

 

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

 

Please refer the following help document to know about update, delete: 

 

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

 

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

 

Regards, 

Kuralarasan M.