Qfyilyi

I am very new to syncfusion controls for mvc. While exploring how to set dynamic datasource to grid, I came across this line of javascript code which I cannot understand. I have been through the javascript api docs for ej grid but couldn't find the meaning.

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

If someone can explain the meaning and point out some reference documentation, I will be highly grateful.

The example I came across
https://help.syncfusion.com/aspnetmvc/grid/how-to

The javascript api I have been through
https://help.syncfusion.com/api/js/ejgrid#members:datasource

P.s: I know from a comment I came across that this has something to do with current instance of ej grid but I would like a solid understanding via a reference so I can understand.

From my little experience with Syncfusion controls the documentation explaining how to perform tasks is not well stated. If you have a license you can ask questions in their forum but I can tell you what little I learned perusing their forum.

In their JS 1 version

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

and in their JS 2 version

var obj = document.getElementById('Grid').ej2_instances[0];

The variable obj appears to get an object reference to the grid identified by the id Grid. I am not sure what the instance value refers to other than the examples in the documentation show it and it works when it is used.

Not sure if I was much help.

In the Below code example Grid – Grid ID and you can take the Grid instance using the above code example. From the instance you can get the details regarding the column, dataSource, filterSettings, sortSettings etc currently applied to ejGrid. We have given support to customize the Grid using several public method. You can call those method by taking the Grid instance.

@(Html.EJ().Grid<EJGrid.Models.Order>("Grid")

.Datasource((IEnumerable<object>)ViewBag.datasource)

.AllowPaging()

.Columns(col =>

{    col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();

     col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();

     col.Field("Freight").HeaderText("Freight").Format("{0:c}").TextAlign(TextAlign.Right).Width(90).Add();

     col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();

     col.Field("Child.Test").HeaderText("TEst").Format("{0:c}").Width(90).Add();

     col.Field("ShipCountry").HeaderText("Ship Country").Width(90).Add();

})

)



<script>

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

        var value = $("#colValue").val();

        //Add custom parameter to the server 

        var query = new ej.Query().addParams("EmployeeID", value);

        //Creating ejDataManager with UrlAdaptor

        var dataManager = ej.DataManager({ url: "/Home/GetData", adaptor: new ej.UrlAdaptor() }); 

        var promise = dataManager.executeQuery(query); promise.done(function (e) { 

            //Assign the result to the grid dataSource using "dataSource" method. 

            obj.dataSource(e.result);

    </script>

To update the Grid, you can use dataSource() method. To call that method you need to take the Grid instance and call that method.

Refer the below API documentation for your reference

https://help.syncfusion.com/api/js/ejgrid#methods:datasource - used to update the Grid dataSource dynamically

https://help.syncfusion.com/api/js/ejgrid#members:datasource - returns the Grid dataSource.

Please get back to us if you have further queries.