How to access Grid from JavaScript?

[Patrik Volka]

Good day,

I've created an application in MVC (Esential JS1) and I'm trying to upgrade it to Esential JS2.

Have I encountered one problem how do I access the elements (eg Grid) from javascript?

For example, I have a Grid, when I click on the line, a Dialog containing a different Grid with additional entries opens.

I have attached an example from Esential JS1.

Thanks for help.

Attachment: About_e0774caa.zip

[Mani Sankar Durai]

Hi Patrik, 

Thanks for contacting Syncfusion support.  

We have checked the query and found that you would like to get the instance of the grid along with the grid element.  To achieve your requirement please refer the below code example 

 

        @Html.EJS().Grid("Grid").DataBound("dataBound").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering().Columns(col => 

   { 

       ... 

 

   }).AllowPaging().Render() 

   

<script> 

    function dataBound(args) { 

        var gridObj = document.getElementById("Grid").ej2_instances[0];  //to get the instance of grid 

        var gridEle = document.getElementById("Grid");  //Here Grid is the ID of the grid. 

       // var gridEle = gridObj.element;   //another way to get the grid element. 

    } 

</script> 

We have prepared a sample that can be available from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/137214/ze/WebApplication11475543515 

Please refer the documentation link of grid 

Getting Started: https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/getting-started-mvc.html?syntax=razor 

API link: https://ej2.syncfusion.com/16.1.32/documentation/grid/api-grid.html 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai 

[Patrik Volka]

Please advise how to properly define DataManager. In the MVC application I want to display the Grid in the dialog element. I define its dataSource in JavaScript. 

I define the DataManager as follows: 

var dm = new ej.DataManager ({url: "/ Home / GetAction", adapter: new ej.UrlAdaptor}); 

Error ej.DataManager is not construct when trying to display Grid. 

Please advise.

[Venkatesh Ayothi Raman]

Hi Patrik, 

Thanks for the update. 

We went through your code example which you have shared with us and found that you are defined DataManager as ej.DataManager instead of ej.data.DataManager as well as adaptor name as ‘ej.UrlAdaptor’ instead of ‘ej.data.UrlAdaptor/ UrlAdaptor’. This is the cause of this issue.  

Please refer to the following code example to resolve this issue, 

var data = new ej.data.DataManager({ 

        url: '/Home/UrlDatasource', 

        crossDomain: true, 

        adaptor:'UrlAdaptor' 

    }); 

 

Please let us if you have any further assistance on this or if you are still facing same issue then could you please share the following details? 

1)      Share the full Grid code example. 

2)      Share the grid Code example which is defined in the JavaScript. 

3)      Issue reproducing scenario. 

4)      Any script error thrown in console window? If so, please share the details and full stack trace of the script error. 

Regards, 

Venkatesh Ayothiraman. 

[Patrik Volka]

Thank you for replying, I've already come to define DataManager, but I can not create Query right now.

Double click on the entry in the Master Grid opens the PopUp Dialog where you should see the Detail Grid based on the Query in the DataManager.

Thanks for advice.

Attachment: App_143f36f4.zip