Master Detail Grid

[bloatus]

Hello,

I'm using:
Visual Studio 2010 Asp.net
SyncFusion 13.2.0.34

I'm trying to create a master detail page in Asp.net using and I am receiving the following error: "Error: DataManager- executeLocal() : Json data is required to execute". when clicking on a grid row.

The code causing the issue is:
<script type="text/javascript">
        $(function () {
            $('#<%= FlatGrid.ClientID %>').ejGrid({
                selectedRowIndex: 0,
                rowSelected: function (args) {
                    var Id = args.data.ID;
                    var gridObj = $('#<%= NotesGrid.ClientID %>').ejGrid("instance");
                    var detaildata = ej.DataManager(gridObj.model.dataSource).executeLocal(ej.Query().where("ItemId", ej.FilterOperators.equal, Id, false).take(10));
                    gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));
                }
            });
        });
    </script>

Please see image attached.

Classes:
 [Serializable]
    public class InventoryItem
    {
        public Int64 ID { get; set; }
        public string SerialNumber { get; set; }
....
}
[Serializable]
 public class Note
    {
        public int ID { get; set; }
        public string Descrip { get; set; }
        public int ItemId { get; set; }
        public DateTime Ts { get; set; }
}
Ultimately, what I would like to do is have tabs in the detail area with grids inside the tabs.

Attachment: md_grid_cc4492f3.7z

[Gowthami V]

Hi Cliff,

Thanks for using Syncfusion products.

From your code example we found that you have passed the ejDataManager type data to the ejDataManager, due to this reason the issue occurred.

We can resolve the issue using below code example,

<script type="text/javascript">

             $(function () {

//Getting the datasource of the Notes grid(Details grid) at initial

                 var data = $('#<%= NotesGrid.ClientID %>').ejGrid("model").dataSource;

            $('#<%= FlatGrid.ClientID %>').ejGrid({

                selectedRowIndex: 0,

                rowSelected: function (args) {

                    var employeeId = args.data.EmployeeID;

                 

                    var gridObj = $('#<%= NotesGrid.ClientID %>').ejGrid("instance");

                    var detaildata = ej.DataManager(data).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeId, false).take(10));

                   

                    gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));

                }

            });

        });
    </script>

As in the code example, we can save the Notes grid datasource at the initial time for avoid the type conflict.

Regards,
Gowthami V.

[bloatus]

Thank You for the quick response! Its working great!

[Gowthami V]

Hi Cliff,
 
We are happy that the provided code working fine at your end.

 
Thanks & Regards,
Gowthami V.