Grid with Detail Template

[Maria]

Hi i need a support on thi section. I want create a detail template, as in example in demo, also with tab, because i need to show more date of different date of an row in the same section. The template is perfect. But i see, that you have used json for retrive data on datasource; instead i have a sqldatasource available with a selectcommand, i want to use that to make detail template on principal grid, how i can do it?

i cannot reach to modify script code in section DataManager, to put my sqldatasource control for datasource on new grid detail template.

please help me.

[Seeni Sakthi Kumar Seeni Raj]

Hi Maria, 

We could see you would like to populate the DetailsTemplate with the SqlDatSource SelectCommand. Since the DetailsTemplate is rendered using JavaScript, we cannot assign the sqldatasource server control directly to them in client-side. So we have retrieved the data in the code behind using the SqlDataSource defined at the view page and bound them to the Grid.  Refer to the following code example.  

        public IEnumerable SqlDataSource; 

        List<Employees> emp = new List<Employees>(); 

        protected void Page_Load(object sender, EventArgs e) 

        { 

            this.EmployeesGrid.DataSource = emp; 

            this.EmployeesGrid.DataBind(); 

 

            //this.childData a SQLDataSource defined at the client-end used to retrieve the data in code behind. 

            DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty); 

            DataTable dt1 = dv.ToTable(); 

            IEnumerable Data = (from DataRow row in dt1.Rows 

                                select new Order 

                                { 

                                    OrderID = Convert.ToInt32(row["OrderID"]), 

                                    CustomerID = row["CustomerID"].ToString(), 

                                    Freight = Convert.ToDecimal(row["Freight"]), 

                                    EmployeeID = Convert.ToInt32(row["EmployeeID"]), 

                                    ShipCity = row["ShipCity"].ToString(), 

                                    ShipCountry = row["ShipCountry"].ToString() 

                                }).ToList(); 

            this.SqlDataSource = Data; 

        } 

 

    <ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents"> 

        <ClientSideEvents DetailsDataBound="detailGridData" /> 

                 . . . . 

                     . . . . 

    </ej:Grid> 

 

    <asp:SqlDataSource 

          id="childData" 

          runat="server" 

          ConnectionString="<%$ ConnectionStrings:SQLConnectionString%>" 

          SelectCommand="SELECT * FROM Orders"> 

      </asp:SqlDataSource> 

 

    <script id="tabGridContents" type="text/x-jsrender"> 

             . .  

    </script> 

 

    <script type="text/javascript"> 

        //SqlDataSource a variable defined at the code behind 

        var orderData = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource)%>'); 

        function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            var data = ej.DataManager(orderData).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

            e.detailsElement.find("#detailGrid" + filteredData).ejGrid({ 

                dataSource: data, 

                allowSelection: false, 

                allowPaging: true, 

                       . . . . 

            }); 

            e.detailsElement.css("display", ""); 

            e.detailsElement.find("#detailChart" + filteredData).ejChart({ 

               . . . .  . 

            }); 

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

    </script> 

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/126047/ze/ASPGrid1978566945.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Maria]

Mmm. I try it. But I have two question: I

Not have any entity similar to order to make on code behind and making column, in this case how can I do? In other, I want to make this manage with multiple data source, I imaging that in principal grid employed, I want in detail more tab that point at more Dow data source different, with different date and same key employeID. For example tab 1 I want orders, tab 2 I want invoice, tab 3 I want product etc. How can I update your code for make this?

[Maria]

in other, i want to make in detail template a separate grid that make more thing, i want that detailed grid have, over the column, also some button that make other thing with other control. is possible to make this management in detailedtempalte?

[Seeni Sakthi Kumar Seeni Raj]

Hi Maria, 

Query #1: tab 1 I want orders, tab 2 I want invoice, tab 3 I want product 

We have achieved your requirement “Dynamically define the columns without using any class name” using TypeBuilder Concept and rendered three Grids in each tab items with the different Tables. Refer to the following code example. 

In this we have rendered the each Grid with an unique ID and assigned the data to the Grid after filtering the serialized data. 

    <ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents"> 

        <ClientSideEvents DetailsDataBound="detailGridData" /> 

              . . . 

               . . .  

    </ej:Grid> 

    <asp:SqlDataSource 

          id="childData" 

          runat="server" 

          ConnectionString="<%$ ConnectionStrings:SQLConnectionString%>" 

          SelectCommand="SELECT * FROM Orders"> 

      </asp:SqlDataSource> 

            . . . . 

                 . . . 

 

    <script id="tabGridContents" type="text/x-jsrender"> 

        <div class="tabcontrol"> 

            <ul> 

                <li><a rel='nofollow' href="#gridTab1{{:EmployeeID}}">Stock Chart</a> 

                </li> 

                <li><a rel='nofollow' href="#gridTab2{{:EmployeeID}}">Stock Grid</a> 

                </li> 

                <li><a rel='nofollow' href="#gridTab3{{:EmployeeID}}">Stock Grid</a> 

                </li> 

            </ul> 

            <div id="gridTab1{{:EmployeeID}}"> 

                <div id="detailGrid1{{:EmployeeID}}"></div> 

            </div> 

            <div id="gridTab2{{:EmployeeID}}"> 

                <div id="detailGrid2{{:EmployeeID}}"></div> 

            </div> 

             

            <div id="gridTab3{{:EmployeeID}}"> 

                <div id="detailGrid3{{:EmployeeID}}"></div> 

            </div> 

        </div> 

    </script> 

 

    <script type="text/javascript"> 

        //SqlDataSource a variable defined at the code behind 

        var orderData1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource1)%>'); 

        var orderData2 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource2)%>'); 

        var orderData3 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource3)%>'); 

        

        function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            var data1 = ej.DataManager(orderData1).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

                . . . . 

                     . . 

 

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 

                dataSource: data1, 

                allowSelection: false, 

                allowPaging: true, 

                 . . . .  

            }); 

            e.detailsElement.find("#detailGrid2" + filteredData).ejGrid({ 

                dataSource: data2, 

            }); 

            e.detailsElement.find("#detailGrid3" + filteredData).ejGrid({ 

                dataSource: data3, 

            }); 

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

    </script> 

Based on the DataTable values, you can get the type of each column and using the that type for the Dynamic Class and its class can defined. Refer to the following code example. 

        public IEnumerable SqlDataSource1; 

        public IEnumerable SqlDataSource2; 

        public IEnumerable SqlDataSource3; 

        List<Employees> emp = new List<Employees>(); 

        List<Orders> order = new List<Orders>(); 

        protected void Page_Load(object sender, EventArgs e) 

        { 

              . . .  

              .. . . . 

 

            DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty); 

            DataView dv1 = (DataView)this.childData1.Select(DataSourceSelectArguments.Empty); 

            DataView dv2 = (DataView)this.childData2.Select(DataSourceSelectArguments.Empty); 

            DataTable dt = dv.ToTable(); 

            DataTable dt1 = dv1.ToTable(); 

            DataTable dt2 = dv2.ToTable(); 

            this.SqlDataSource1 = ToDynamicList(dt); 

            this.SqlDataSource2 = ToDynamicList(dt1); 

            this.SqlDataSource3 = ToDynamicList(dt2); 

        } 

        public List<dynamic> ToDynamicList(DataTable dt) 

        { 

            List<string> cols = (dt.Columns.Cast<DataColumn>()).Select(column => column.ColumnName).ToList(); 

            var dictData = ToDictionary(dt); 

            return ToDynamicList(dictData, getNewObject(cols, dictData)); 

        } 

        public List<dynamic> ToDynamicList(List<Dictionary<string, object>> list, Type TypeObj) 

        { 

            dynamic temp = new List<dynamic>(); 

            foreach (Dictionary<string, object> step in list) 

            { 

                object Obj = Activator.CreateInstance(TypeObj); 

                PropertyInfo[] properties = Obj.GetType().GetProperties(); 

                Dictionary<string, object> DictList = (Dictionary<string, object>)step; 

                foreach (KeyValuePair<string, object> keyValuePair in DictList) 

                { 

                    foreach (PropertyInfo property in properties) 

                    { 

                        if (property.Name == keyValuePair.Key) 

                        { 

                            var convertedValue = keyValuePair.Value == System.DBNull.Value ? null : keyValuePair.Value; 

                            property.SetValue(Obj, convertedValue, null); 

                            break; 

                        } 

                    } 

                } 

                temp.Add(Obj); 

            } 

            return temp; 

        } 

        public List<Dictionary<string, object>> ToDictionary(DataTable dt) 

        { 

            var columns = dt.Columns.Cast<DataColumn>(); 

            var Temp = dt.AsEnumerable().Select(dataRow => columns.Select(column => 

                                 new { Column = column.ColumnName, Value = dataRow[column] }) 

                             .ToDictionary(data => data.Column, data => data.Value)).ToList(); 

            return Temp.ToList(); 

        } 

        private Type getNewObject(List<string> list, List<Dictionary<string, object>> dictList) 

        {     .. .   

              . . . . 

            bool flag = true; 

            if (flag) 

            { 

                foreach (Dictionary<string, object> dictStep in dictList) 

                { 

                    flag = false; 

                    Dictionary<string, object> DictList = (Dictionary<string, object>)dictStep; 

                    foreach (KeyValuePair<string, object> keyValuePair in DictList) 

                    { 

                        var type = keyValuePair.Value.GetType().ToString(); 

                        colType.Add(type); 

                    } 

                } 

            } 

            foreach (string step in list) 

            { 

                int inx = list.IndexOf(step); 

                var type = colType[inx]; 

                string propertyName = step; 

                 . . . . 

            } 

            Type obj = typeBuilder.CreateType(); 

            return obj; 

        } 

We have also modified the sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/126047/ze/ASPGrid-543450573.zip 

Query #2: in other, i want to make in detail template a separate grid that make more thing, i want that detailed grid have, over the column, also some button that make other thing with other control. is possible to make this management in detailedtempalte? 

We suspect that you would like to render a button over the Grid in the DetailsTemplate. Refer to the following code example. 

    <ej:Grid ID="EmployeesGrid" runat="server" DetailsTemplate="#tabGridContents"> 

        <ClientSideEvents DetailsDataBound="detailGridData" /> 

                . ..  

                    . .  

 

    </ej:Grid> 

 

    <script id="tabGridContents" type="text/x-jsrender"> 

        <div class="tabcontrol"> 

            <ul> 

                <li><a rel='nofollow' href="#gridTab1{{:EmployeeID}}">Stock Chart</a> 

                </li> 

            </ul> 

            <div id="gridTab1{{:EmployeeID}}"> 

                <button id="btn{{:EmployeeID}}"></button> 

                <div id="detailGrid1{{:EmployeeID}}"></div> 

            </div> 

        </div> 

    </script> 

 

    <script type="text/javascript"> 

        //SqlDataSource a variable defined at the code behind 

        var orderData1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource1)%>');  

        function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            var data1 = ej.DataManager(orderData1).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

 

            e.detailsElement.find("#btn" + filteredData).ejButton({ 

                text: "ClickMe" 

            }); 

 

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 

                dataSource: data1, 

                allowSelection: false, 

                allowPaging: true, 

 

            }); 

               . . .  

                   . . . 

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

    </script> 

Regards, 

Seeni Sakthi Kumar S. 

[Maria]

thanks for response. i try it!

[Seeni Sakthi Kumar Seeni Raj]

Hi Maria, 

Thanks for the update. If you require further assistance, please get back to us. 

Regards, 

Seeni Sakthi Kumar S. 

[Maria]

i have write another ticket... now , i want anther management, similar to this and similar to edit template form, i must do a mix. can you responde me there?

[Maria]

i received this error: 

Errore durante la serializzazione o la deserializzazione mediante JavaScriptSerializer JSON. La lunghezza della stringa supera il valore impostato nella proprietà maxJsonLength.

what mean?

[Seeni Sakthi Kumar Seeni Raj]

Hi Maria, 

Query #1: i have write another ticket 

Yes, you can create new support forum for new queries.  

Query #2: i received this error 

While serializing the data, maxjsonlength will be exceed which is the cause of the problem. To overcome this, you can redefine the maxjsonlength in the web.config. Refer to the code example and article. 

<configuration>  

   <system.web.extensions> 

       <scripting> 

           <webServices> 

               <jsonSerialization maxJsonLength="50000000"/> 

           </webServices> 

       </scripting> 

   </system.web.extensions> 

</configuration> 

http://stackoverflow.com/questions/1151987/can-i-set-an-unlimited-length-for-maxjsonlength-in-web-config 

You can also avoid them by binding a remote dataSource to the Grid using the WebMethodAdaptor as shown in the following code example and article. 

        [WebMethod] 

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 

        public static object Data(Syncfusion.JavaScript.DataManager value) 

        { 

            IEnumerable Data = Data1; //it is a Dynamically created data  

            DataOperations dp = new DataOperations(); 

                                                                           

            if (value.Where != null) 

            { 

                Data = dp.PerformWhereFilter(Data, value.Where, value.Where[0].Condition); 

            } 

            int count = Data.AsQueryable().Count(); 

            if (value.Skip != null) 

                Data = dp.PerformSkip(Data, value.Skip); 

            if (value.Take != null) 

                Data = dp.PerformTake(Data, value.Take); 

            return new { result = Data, count = count }; 

        } 

 

       function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            e.detailsElement.find("#btn" + filteredData).ejButton({ 

                text: "ClickMe" 

            }); 

 

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 

                dataSource: ej.DataManager({ url: "Default.aspx/Data", adaptor: new ej.WebMethodAdaptor() }), 

                query: ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true), 

                allowPaging: true, 

                    load: function (args) { 

                        this.model.dataSource.dataSource.headers = [];//So define them as array 

                        this.model.dataSource.dataSource.headers.push({ "ID": this._id });// 

                    }, 

            }); 

             . . .  

              . ..  

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

https://www.syncfusion.com/kb/3063/script-error-throws-for-exceeding-maxjson-length-while-performing-serialization-or-deserialization 

Regards, 

Seeni Sakthi Kumar S. 

[Maria]

Excuse me, can you update you second example project with this modify for Json Max lenght with dataadaptor?I'm not so good to JavaScript, and I'm

Very difficult to make all this code with this, I not image  that in   asp sync there is  more JavaScript code! Thank you!

[Maria]

i have resolve this, but i not reach to view date of child data, the grid appear empty!

this is my code. The BindFunction where called?

 protected void Page_Load(object sender, EventArgs e)

    {

        emp.Add(new Employees(11377, 000611171007, "RISCATTO TOTALE", "---"));

        emp.Add(new Employees(11378, 000611171008, "RISCATTO TOTALE", "---"));

        emp.Add(new Employees(11379, 000611171009, "RISCATTO TOTALE", "---"));

        emp.Add(new Employees(11380, 000611171010, "RISCATTO TOTALE", "---"));

        emp.Add(new Employees(11381, 000611171011, "RISCATTO TOTALE", "---"));

       

        this.Grid2.DataSource = emp;

        this.Grid2.DataBind();

        DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty);

          DataTable dt = dv.ToTable();

      

     

        this.SqlDataSource1 = ToDynamicList(dt);//dt.AsEnumerable().ToList();

 

    }

    public List<dynamic> ToDynamicList(DataTable dt)

    {

        List<string> cols = (dt.Columns.Cast<DataColumn>()).Select(column => column.ColumnName).ToList();

        var dictData = ToDictionary(dt);

        return ToDynamicList(dictData, getNewObject(cols, dictData));

    }

    public List<dynamic> ToDynamicList(List<Dictionary<string, object>> list, Type TypeObj)

    {

        dynamic temp = new List<dynamic>();

        foreach (Dictionary<string, object> step in list)

        {

            object Obj = Activator.CreateInstance(TypeObj);

            PropertyInfo[] properties = Obj.GetType().GetProperties();

            Dictionary<string, object> DictList = (Dictionary<string, object>)step;

            foreach (KeyValuePair<string, object> keyValuePair in DictList)

            {

                foreach (PropertyInfo property in properties)

                {

                    if (property.Name == keyValuePair.Key)

                    {

                        var convertedValue = keyValuePair.Value == System.DBNull.Value ? null : keyValuePair.Value;

                        property.SetValue(Obj, convertedValue, null);

                        break;

                    }

                }

            }

            temp.Add(Obj);

        }

        return temp;

    }

    public List<Dictionary<string, object>> ToDictionary(DataTable dt)

    {

        var columns = dt.Columns.Cast<DataColumn>();

        var Temp = dt.AsEnumerable().Select(dataRow => columns.Select(column =>

                             new { Column = column.ColumnName, Value = dataRow[column] })

                         .ToDictionary(data => data.Column, data => data.Value)).ToList();

        return Temp.ToList();

    }

    private Type getNewObject(List<string> list, List<Dictionary<string, object>> dictList)

    {

        AssemblyName assemblyName = new AssemblyName();

        assemblyName.Name = "tmpAssembly";

        AssemblyBuilder assemblyBuilder = Thread.GetDomain().DefineDynamicAssembly(assemblyName, AssemblyBuilderAccess.Run);

        ModuleBuilder module = assemblyBuilder.DefineDynamicModule("tmpModule");

        TypeBuilder typeBuilder = module.DefineType("ejGrid", TypeAttributes.Public);

        List<string> colType = new List<string>();

        bool flag = true;

        if (flag)

        {

            foreach (Dictionary<string, object> dictStep in dictList)

            {

                flag = false;

                Dictionary<string, object> DictList = (Dictionary<string, object>)dictStep;

                foreach (KeyValuePair<string, object> keyValuePair in DictList)

                {

                    var type = keyValuePair.Value.GetType().ToString();

                    colType.Add(type);

                }

            }

        }

        foreach (string step in list)

        {

            int inx = list.IndexOf(step);

            var type = colType[inx];

            string propertyName = step;

            FieldBuilder field = typeBuilder.DefineField(propertyName, Type.GetType(type), FieldAttributes.Public);

            PropertyBuilder property = typeBuilder.DefineProperty(propertyName, System.Reflection.PropertyAttributes.None, typeof(string), new Type[] { typeof(string) });

            MethodAttributes GetSetAttr = MethodAttributes.Public | MethodAttributes.HideBySig;

            MethodBuilder currGetPropMthdBldr = typeBuilder.DefineMethod("get_value", GetSetAttr, Type.GetType(type), Type.EmptyTypes);

            ILGenerator currGetIL = currGetPropMthdBldr.GetILGenerator();

            currGetIL.Emit(OpCodes.Ldarg_0);

            currGetIL.Emit(OpCodes.Ldfld, field);

            currGetIL.Emit(OpCodes.Ret);

            MethodBuilder currSetPropMthdBldr = typeBuilder.DefineMethod("set_value", GetSetAttr, null, new Type[] { Type.GetType(type) });

            ILGenerator currSetIL = currSetPropMthdBldr.GetILGenerator();

            currSetIL.Emit(OpCodes.Ldarg_0);

            currSetIL.Emit(OpCodes.Ldarg_1);

            currSetIL.Emit(OpCodes.Stfld, field);

            currSetIL.Emit(OpCodes.Ret);

            property.SetGetMethod(currGetPropMthdBldr);

            property.SetSetMethod(currSetPropMthdBldr);

        }

        Type obj = typeBuilder.CreateType();

        return obj;

    }

    private void BindDataSource()

    {

        if ((List<Orders>)Session["InlineEditDataSource"] == null)

        {

            

                order.Add(new Orders(38709, 11380, 3919,  "ALFKI"));

                order.Add(new Orders(38711,11381, 3919,  "ANATR"));

                order.Add(new Orders(38713,11382, 3919,  "ANTON"));

                order.Add(new Orders(38715, 11383, 3919, "AROUT"));      

             

           

        }

        else

        {

            order = (List<Orders>)Session["InlineEditDataSource"];

        }

        //this.OrdersGrid.DataSource = order;

        //this.OrdersGrid.DataBind();

    }

    [Serializable]

    public class Employees

    {

        public Employees(int IDPOLIZZA, int NUMPOLIZZA, string STATUS, string TARGA_TELAIO)

        {

            this.IDPOLIZZA = IDPOLIZZA;

            this.NUMPOLIZZA = NUMPOLIZZA;

            this.STATUS = STATUS;

            this.TARGA_TELAIO = TARGA_TELAIO;

        

        }

      

        public int IDPOLIZZA { get; set; }

        public int NUMPOLIZZA { get; set; }

        public string STATUS { get; set; }

        public string TARGA_TELAIO { get; set; }

      

    }

    [Serializable]

    public class Orders

    {

    

        public Orders(int IDTIT_APP, int IDPOLIZZA, int IDPRODOTTO,string CONTRAENTE)

        {

            this.IDTIT_APP = IDTIT_APP;

            this.IDPOLIZZA = IDPOLIZZA;

            this.IDPRODOTTO = IDPRODOTTO;         

            this.CONTRAENTE = CONTRAENTE;

          

        }

  

        public int IDTIT_APP { get; set; }

        public int IDPOLIZZA { get; set; }

        public int IDPRODOTTO { get; set; }     

        public string CONTRAENTE { get; set; }

     

    }

[Maria]

<asp:SqlDataSource ID="childData" runat="server" ConnectionString="<%$ ConnectionStrings:ULNWEBConnectionString %>" 

        SelectCommand="SELECT [IDTIT_APP], [IDPOLIZZA],[CONTRAENTE] FROM [TITOLO_APPENDICE]">

    </asp:SqlDataSource>

    <ej:Grid ID="Grid2" runat='server' AllowFiltering="True" AllowPaging="True" AllowSorting="True" 

        AllowTextWrap="True" DataSourceCachingMode="None"  EnableResponsiveRow="false" 

      AllowResizing="true" DetailsTemplate="#tabGridContents" AllowSelection="true" AllowResizeToFit="true"   MinWidth="0" IsResponsive="True"

         Locale="it-IT" AllowScrolling="true" >

      <ClientSideEvents DetailsDataBound="detailGridData" /> 

       

        <Columns>

            <ej:Column AllowEditing="False" DataType="number"  Visible="true" HeaderText="Cod. Polizza" Field="IDPOLIZZA" IsIdentity="True" IsPrimaryKey="true">

                  </ej:Column>

            <ej:Column DataType="string" Field="NUMPOLIZZA"  Priority="1" Width="110" HeaderText="Polizza" >

            </ej:Column>

             <ej:Column DataType="string" Field="STATUS" Priority="6" Visible="true" HeaderText="Status" Width="100">

            </ej:Column>           

            <ej:Column AllowEditing="False" DataType="string" Field="TARGA_TELAIO" Priority="1" HeaderText="Targa_Telaio" Width="150">

            </ej:Column>

          

        </Columns>

    </ej:Grid>

     <script id="tabGridContents" type="text/x-jsrender"> 

        <div class="tabcontrol"> 

            <ul> 

                <li><a rel='nofollow' href="#gridTab1{{:IDPOLIZZA}}">Stock Chart</a> 

                </li> 

            </ul> 

            <div id="gridTab1{{:IDPOLIZZA}}"> 

                   Provaaaa label  :<asp:Label ID="Label1" Text="{{: IDPOLIZZA}}"  runat="server" ></asp:Label>

              

                <div id="detailGrid1{{:IDPOLIZZA}}"></div> 

            </div>            

        </div> 

    </script> 

     <script type="text/javascript"> 

         var serializer = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer()%>'); 

         serializer.MaxJsonLength = 500000000;

        //SqlDataSource a variable defined at the code behind 

        var orderData1 = serializer.Serialize(this.SqlDataSource1); 

      

        function detailGridData(e) { 

            var filteredData = e.data["IDPOLIZZA"]; 

            var data1 = ej.DataManager(orderData1).executeLocal(ej.Query().where("IDPOLIZZA", "equal", parseInt(filteredData), true)); 

         

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 

                dataSource: data1, 

                allowSelection: false, 

                allowPaging: true   ,

                columns: [

                  { field: "IDTIT_APP", key: true, headerText: "IDTIT_APP", width: 80, textAlign: ej.TextAlign.Right },

                  { field: "IDPOLIZZA", headerText: 'IDPOLIZZA', width: 80, textAlign: ej.TextAlign.Left },

                  { field: "IDPRODOTTO", headerText: 'IDPRODOTTO', width: 120, textAlign: ej.TextAlign.Left },

                  { field: "CONTRAENTE", headerText: 'CONTRAENTE', width: 120, textAlign: ej.TextAlign.Left }

                ]

            });

          

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

    </script> 

 

[Maria]

making test i have note thaat with this code, the sqldatasource1 it fill at code behind, but result empty when called javascript seralizable.

[Seeni Sakthi Kumar Seeni Raj]

Hi Maria, 

We are unable to reproduce any problem with that. We have prepared a sample that can be downloaded from the following locatin. 

Sample: https://www.syncfusion.com/downloads/support/forum/126047/ze/ASPGrid-651297415.zip 

Please ensure the following things in your application. 

1)      Whether TITOLO_APPENDICE is having a ForeignKey value equal to the Parent Grid’s PrimaryKey value.  

2)      In our sample, EmployeeID is the PrimaryKey of the Parent Grid and its equivalent value is present in the childGrid, so the Grid child Grid will be populated with the data based on the filtereddata. 

3)      Ensure whether the orderData1 and data1 are having Json Array as shown in the following code example. 

<script type="text/javascript"> 

        //SqlDataSource a variable defined at the code behind 

        var orderData1 = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.SqlDataSource1)%>'); 

         

        var data1 = ej.DataManager(orderData1).executeLocal(ej.Query().where("CustomerID", "equal", parseInt(filteredData), true)); 

 

        function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            e.detailsElement.find("#btn" + filteredData).ejButton({ 

                text: "ClickMe" 

            }); 

 

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 

                dataSource: data1, 

                   . ..  

            }); 

           .. . 

              .. .  

            e.detailsElement.find(".tabcontrol"