We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid with Detail Template

Thread ID:

Created:

Updated:

Platform:

Replies:

126047 Sep 20,2016 10:13 AM Dec 14,2016 07:36 AM ASP.NET Web Forms 58
loading
Tags: Grid
Maria
Asked On September 20, 2016 10:13 AM

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 [Syncfusion]
Replied On September 21, 2016 08:41 AM

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. 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On September 24, 2016 04:56 PM

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
Replied On September 26, 2016 04:04 AM

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 [Syncfusion]
Replied On September 26, 2016 08:35 AM

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. 


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
Replied On September 26, 2016 09:34 AM

thanks for response. i try it!

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 27, 2016 12:12 AM

Hi Maria, 

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

Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On September 27, 2016 07:38 AM

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
Replied On September 27, 2016 10:32 AM

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 [Syncfusion]
Replied On September 28, 2016 10:03 AM

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> 



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 }); 
        } 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On September 28, 2016 10:15 AM

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
Replied On September 29, 2016 05:55 AM

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
Replied On September 29, 2016 06:17 AM

<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
Replied On September 29, 2016 09:27 AM

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 [Syncfusion]
Replied On September 29, 2016 09:29 AM

Hi Maria, 

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


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").ejTab({ selectedItemIndex: 1 }); 
        } 
    </script> 
</asp:Content> 
 
 
 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On September 29, 2016 09:39 AM

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

Maria
Replied On September 29, 2016 09:43 AM

all field match, also because i have data in sqdatasource, aregenerated correctly, but, as you have sayed, when call json serialized the data is empty, then orderData1 is empty!

Maria
Replied On September 29, 2016 10:11 AM

  this is my java code, Sql datasource at code behind have all date, there are all grid foreach record.
i have also added the maxlenght for variable for serialize

 <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
Replied On September 29, 2016 10:12 AM

i give you anther information, on dom element in broweser, i have this error in script section:
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 30, 2016 02:50 AM

Hi Maria, 

We are able to reproduce the problem at our end. The cause of the problem is that the way you are using the JavaScriptSerialzer (which is not recommened). So we suggest to add the MaxJsonLength in the Web.config as shown in the following code example. 

<configuration> 
  <configSections> 
          . . . 
  </connectionStrings> 
  <system.web.extensions> 
    <scripting> 
      <webServices> 
        <jsonSerialization maxJsonLength="500000000" /> 
      </webServices> 
    </scripting> 
  </system.web.extensions> 
 . ..  
           . . 
</configuration> 

And use the Script section as shown in the below code example. You can also refer our previous update’s sample for your reference. 

    <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> 
</asp:Content> 
 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On September 30, 2016 08:41 AM

Thanks e er for respinse, i Have used my custom code because also with serializa in web confit the error apper me same. But yesterday after more and more test, finally seems to run me! For the moment, thank all.. Really! I contact you if have other problem. 

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 3, 2016 06:22 AM

Hi Maria, 

Thanks for the update.  

We are happy to hear that your requirement has been achieved. If you require further assistance on this, please get back to us. 

Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On October 17, 2016 07:36 AM

hi! i0m again here. The solution will run correctly, but i have a big problem. For my child dataource, i  have a query with more join and field, then it have more rec ord: if i write to 500 recordr, all run, but as i get over 500 record, such us 1000 the Json Serialize problem will appear again. Then, i have read there is a solution for that, using paging of grid and rewrite json specification. In my case, what is the solution?


Maria
Replied On October 17, 2016 07:37 AM

hi! i0m again here. The solution will run correctly, but i have a big problem. For my child dataource, i  have a query with more join and field, then it have more rec ord: if i write to 500 recordr, all run, but as i get over 500 record, such us 1000 the Json Serialize problem will appear again. Then, i have read there is a solution for that, using paging of grid and rewrite json specification. In my case, what is the solution?


PS: i have already set the max Json in WebConfig.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 18, 2016 08:31 AM

Hi Maria, 

The reported issue occurs because of the datasource length exceeding maxJson length while performing serialization or deserialization at the server end. We have already discussed about this in the following KB. 


To overcome this serialization problem, use LoadOnDemand concept and bind the remote dataSource using WebMethoAdaptor of DataManager for the Grid in details template. At the initial load of the application a public variable named Data1 collects records to be populated in the Grid.  Later, while expanding the details template, Grid (placed in details template) will send a POST requesting the Data which will be populated.  Refer to the following code example. 

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
    <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 type="text/javascript"> 
        function detailGridData(e) { 
            var filteredData = e.data["EmployeeID"]; 
 
            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "Default.aspx/DataSource", 
                    adaptor: new ej.WebMethodAdaptor() 
                }), 
                allowPaging: true, 
                query: new ej.Query().where("EmployeeID", "equal", parseInt(filteredData)), 
                 . .  
                      ..  
            }); 
            . .  
             ..   
            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 
        } 
    </script> 
</asp:Content> 
 
    public partial class _Default : Page 
    { 
        public static IEnumerable Data1; 
        List<Employees> emp = new List<Employees>(); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
 
            this.EmployeesGrid.DataSource = emp; 
            this.EmployeesGrid.DataBind(); 
 
            DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty); 
            DataTable dt = dv.ToTable(); 
 
            JavaScriptSerializer serializer = new JavaScriptSerializer(); 
            List<Dictionary<string, object>> dictData = ToDictionary(dt); 
 
            //Creating Table Type 
            Type tableType = GetTableType(dictData); 
            var inst = Array.CreateInstance(tableType, 1); 
 
            //Converting to JSON String 
            string str = DataTableToJSONWithJavaScriptSerializer(dt); 
 
            //Generating Deserialized data 
            Data1 = serializer.Deserialize(str, inst.GetType()) as object[]; 
        } 
        public string DataTableToJSONWithJavaScriptSerializer(DataTable table) 
        { 
             . . 
                  . .  
            return jsSerializer.Serialize(parentRow); 
        }   
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object DataSource(Syncfusion.JavaScript.DataManager value) 
        { 
            IEnumerable Data = Data1; 
            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 }; 
        } 
        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(); 
        } 
        public static Type GetTableType(List<Dictionary<string, object>> dictList) 
        { 
            // Create needed TypeBuilder helpers 
              . .. 
                    . . 
 
            return myTypeBuilder.CreateType(); 
        } 
    } 


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


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On October 18, 2016 10:17 AM

excuse me, you have helped me and have propose another method for my needs, for resolve this question, and now all run, but with limited uantity of record.  what is the different? not is a mst simple code for adjustable my code for fix this problem? i don't wont to cancel all and rewrite all code.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 19, 2016 08:59 AM

Hi Maria, 

We cannot place any ASP controls within the Template tags (jsrender), so we supposed to render the Grid using JS. Since we cannot bind the datatable directly to the JS Grid, we suggested to use the Javascript serializer to bind the data to the Grid. But the JavaScript serializer has some memory limit for serializing the data which has been occurred in your case. To overcome this, we have recommended to replace the solution with the WebMethodAdaptor which will limit the number of records has been rendered to the Grid and retrieve the data in the pagination. So the maxjsonlength length error will not occur and it’s the only option to overcome this serialization error. 

If you are facing any problem with replacing previous solution with the WebMethodAdaptor, please get back to us. 

Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On October 24, 2016 06:18 AM

hi, i have a problem, the solution not run!
seems, that the function Datasoure, on url, not called on stack of javascript... the page not apper nothing data on detailed but the wheel continusly turns without apper data. 
maybe the url is wrong? I haver write: Default2.aspx/DataSource because ,y page called Default2.

Maria
Replied On October 24, 2016 06:20 AM

hi, i have a problem, the solution not run!
seems, that the function Datasoure, on url, not called on stack of javascript... the page not apper nothing data on detailed but the wheel continusly turns without apper data. 
maybe the url is wrong? I haver write: Default2.aspx/DataSource because ,y page called Default2.

in other, the javascript error apperar seems when i put all date.


Maria
Replied On October 24, 2016 10:00 AM

hi, i have a problem, the solution not run!
seems, that the function Datasoure, on url, not called on stack of javascript... the page not apper nothing data on detailed but the wheel continusly turns without apper data. 
maybe the url is wrong? I haver write: Default2.aspx/DataSource because ,y page called Default2.

in other, the javascript error apperar seems when i put all date.


i attach project

Attachment: ULN_Intermediari_26e1ae8b.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 25, 2016 06:07 AM

Hi Maria, 

We are able to reproduce the problem at our end. You have missed the WebMethod attribute above the DataSource method, which is the cause of the problem. So we suggest to place the WebMethod attribute above the method as shown in the following code example. 

    [WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public static object DataSource(Syncfusion.JavaScript.DataManager value) 
    { 
        IEnumerable Data = SqlDataSource1; 
        DataOperations dp = new DataOperations(); 
        List<FilteredColumn> fColList = new List<FilteredColumn>(); 
        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 }; 
    } 

If you are still facing any error, please share the following information to analyze the issue and provide you solution as early as possible. 

1)      Stacktrace of browser consoler (if any error) 
2)      Screenshot for the issue 

Note: The attached sample doesn’t have DataSource. Please share the sample with DataSource. 

Regards, 
Seeni Sakthi Kumar S.  


Maria
Replied On October 25, 2016 07:37 AM

hi, i have already correct WebMethod but nothing. Seems that the datasource not fill at ej grid, infct appera error about: not is possible have wmpty dataource on ej grid

Maria
Replied On October 25, 2016 10:09 AM

i attach you my project, and database file. I attend your response. 

Attachment: ULN_Intermediari__Copia_f82c5a7a.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 26, 2016 09:00 AM

Hi Maria, 

We are able to reproduce the problem at our end. Since you have given incorrect routing path and routing configuration, the reported issue occurs. Refer to the following code example and forum. 

    <script type="text/javascript"> 
        function detailGridData(e) { 
            var filteredData = e.data["IDPOLIZZA"];          
 
            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "Default2.aspx/DataSource", 
                    adaptor: new ej.WebMethodAdaptor() 
                }), 
                allowPaging: true, 
                query: new ej.Query().where("IDPOLIZZA", "equal", parseInt(filteredData)), 
            }); 
           
            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 
        } 
    </script> 
 
    public static class RouteConfig 
    { 
        public static void RegisterRoutes(RouteCollection routes) 
        { 
            var settings = new FriendlyUrlSettings(); 
           // settings.AutoRedirectMode = RedirectMode.Permanent; remove this line 
            routes.EnableFriendlyUrls(settings); 
        } 
    } 


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


Note: If the Child Grid data doesn’t match with “IDPOLIZZA”, it will return an Empty Grid for the child Data. 

Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On November 1, 2016 03:24 PM

i have always the serialize javascript problem also in this case! i have select all records

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On November 2, 2016 07:37 AM

Hi Maria, 
  
 
To overcome this serialization problem, we already suggested  you to use  LoadOnDemand” concept. While using LoadOnDemand concept, please make ensure that you have given the `allowPaging` property as true so that only 12 records will be requested from server (12 is the default value of pageSize property of pageSettings). 
  

At  Serverside, also make ensure that skip and take operations are performed to get the proper data counts. Please refer the following code example. 

  
        [WebMethod]  
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  
        public static object DataSource(Syncfusion.JavaScript.DataManager value)  
        {  
                .  .  . 
            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 };  
        }  
  
 
  
 
Please check with the sample that we have provided in our previous update. 
  
 
If you still facing the same problem again, Could you please share us the following details so that we could sort out the cause of the issue and provide a solution as early as possible? 
  
 
1.       Please share the code snippet for this issue both in view and controller side. 
2.       ScreenShot of the issue. 
3.       If possible, please replicate the issue in our sample. 
 
  
The provided information will help us to analyze the issue and provide you the response as early as possible.  
 
 
Regards, 
  
Farveen.T 
  


Maria
Replied On November 2, 2016 12:02 PM

i have resolve javascript serialized inserting :
serializer.MaxJsonLenght=Int.MaxValue in page load when serailizer and when deserialized. Is right?

In other i have another problem, when i execute a filter, and result is one record, when open detail the grid is so small for make see all detailed date, i attach a pics.

Attachment: screen_234df924.rar

Maria
Replied On November 2, 2016 12:30 PM

i have resolve javascript serialized inserting :
serializer.MaxJsonLenght=Int.MaxValue in page load when serailizer and when deserialized. Is right?

In other i have another problem, when i execute a filter, and result is one record, when open detail the grid is so small for make see all detailed date, i attach a pics.

Attachment: screen_234df924.rar

ah, in other i want to know now, how i can format value, for example date and currency in detailgrid column field and how in label in tabgridcontent. In other i need to set priority in tempalte for tablet view.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 3, 2016 09:33 AM

Hi Maria, 

Query #1: i have resolve javascript serialized inserting :serializer.MaxJsonLenght=Int.MaxValue in page load when serailizer and when deserialized. Is right? 

This solution works for only for the serialization with the maxJsonLength of the 2147483648. If your data exceeds this range, again the same problem will occur. To overcome the serialization problem, use the LoadOnDemand concept suggested by us. 

Query #2: In other i have another problem, when i execute a filter, and result is one record, when open detail the grid is so small for make see all detailed date, i attach a pics. 

From the screenshot, we understand that you would like to render the responsive Grid along with the details template. Since a separate element will be rendered inside a details template, we cannot achieve the responsive behavior with the detailsTemplate.   

Query #3: how i can format value, for example date and currency in detailgrid column  

Using the format property of the Grid columns, you can apply format to required columns. Refer to the following code example and Help Document.  

            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "Default.aspx/DataSource", 
                    adaptor: new ej.WebMethodAdaptor() 
                }), 
                allowPaging: true, 
                query: new ej.Query().where("EmployeeID", "equal", parseInt(filteredData)), 
                columns: [ 
                   .. . .  
                             . . 
                    { field: "Freight", headerText: 'Freight', width: 120,format: "{0:C3}" }, 
                    { field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}" }, 
                ] 
            }); 
  

Query #4: In other i need to set priority in tempalte for tablet view 

We suspect that you would like to use the priority property of the Grid columns along with the Detail Template. But the Grid doesn’t support priority columns feature with details Template. So it is not possible to achieve your requirement. 

Regards, 
Seeni Sakthi Kumar S.  


Maria
Replied On November 6, 2016 08:35 AM

I cannot reach to format date. I always tried that but not format. Instead I have asked,  for label for example,  that I must format with date or currency? Label that is in detail template. For the serialization, I have activate paging, as you tell me. But I have same error. I try debug and give you more information. For responsive grid,  this not is a good notice. 

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 7, 2016 07:12 AM

Hi Maria, 

Query #1: I cannot reach to format date. 

We are able to reproduce the problem at our end with the sample provided by you at earlier updates. Since the every column has been deserialized as the string column, the reported issue has been occurred and the Grid unable to format the columns with mentioned format in the respective columns. So we have modified the solution as follows. Refer to the following code example.  

protected void Page_Load(object sender, EventArgs e) 
    { 
 
        DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty); 
 
        DataTable dt = dv.ToTable(); 
 
        List<Dictionary<string, object>> dictData = ToDictionary(dt); 
        //Creating Table Type 
        Type tableType = GetTableType(dictData); 
        var inst = Array.CreateInstance(tableType, 1); 
        List<string> errors = new List<string>(); 
 
        //Converting to JSON String 
        string str = DataTableToJSONWithJavaScriptSerializer(dt); 
 
//replace the JavaScriptSerializer with JsonConvert 
        SqlDataSource1 = JsonConvert.DeserializeObject(str, inst.GetType(), 
            new JsonSerializerSettings 
            { 
                NullValueHandling = NullValueHandling.Ignore 
            }) as object[]; 
 
    } 
    public static Type GetTableType(List<Dictionary<string, object>> dictList) 
    { 
        // Create needed TypeBuilder helpers 
        AppDomain myDomain = Thread.GetDomain(); 
        AssemblyName myAsmName = new AssemblyName("Anonymous"); 
        AssemblyBuilder myAsmBuilder = myDomain.DefineDynamicAssembly(myAsmName, AssemblyBuilderAccess.Run); 
 
        ModuleBuilder myModBuilder = myAsmBuilder.DefineDynamicModule(myAsmName.Name); 
        TypeBuilder myTypeBuilder = myModBuilder.DefineType("TestClass", TypeAttributes.Public); 
 
        Dictionary<string, object> DictList = (Dictionary<string, object>)dictList[0]; 
        foreach (KeyValuePair<string, object> keyValuePair in DictList) 
        { 
            var type = keyValuePair.Value.GetType().ToString(); 
 
            Type PropertyType; 
            var PropertyName = keyValuePair.Key; 
            PropertyType = Type.GetType(type); //directly assign the property and use them in property/field builder 
            //refer the attached sample 
 
            FieldBuilder PropertyFieldBuilder = myTypeBuilder.DefineField(PropertyName.ToLower(), PropertyType, FieldAttributes.Private); 
            PropertyBuilder PBuilder = myTypeBuilder.DefineProperty(PropertyName, System.Reflection.PropertyAttributes.HasDefault, PropertyType, null); 
 
                . . . 
                   .. .  
 
        } 
                 . .  
 
        return myTypeBuilder.CreateType(); 
    } 

Refer to the following screenshot and code example with the formatted date values.  

    <script type="text/javascript"> 
        function detailGridData(e) { 
            var filteredData = e.data["IDPOLIZZA"];          
 
            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "Default2.aspx/DataSource", 
                    adaptor: new ej.WebMethodAdaptor() 
                }), 
                allowPaging: true, 
                query: new ej.Query().where("IDPOLIZZA", "equal", parseInt(filteredData)), 
                columns: [ 
                           . . . 
                        //currency format 
                        { field: "PASSIVE", headerText: 'PASSIVE', format: "{0:C3}", width: 120, textAlign: ej.TextAlign.Left }, 
                        //date format 
                        { field: "DATA_SCADENZA", headerText: 'DATA_SCADENZA', format: "{0:MM/dd/yyyy}" } 
                ] 
            }); 
           
            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 
        } 
    </script> 


 

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


Query #2: For the serialization, I have activate paging, as you tell me. 

For the serialization issue, we have recommended to use the WebMethodAdaptor along with the paging. We are unable to reproduce any issue with that please refer to the following code example. 

    <script type="text/javascript"> 
        function detailGridData(e) { 
            var filteredData = e.data["IDPOLIZZA"];          
 
            e.detailsElement.find("#detailGrid1" + filteredData).ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "Default2.aspx/DataSource", 
                    adaptor: new ej.WebMethodAdaptor() 
                }), 
                allowPaging: true, 
                 . . . . 
            }); 
           
            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 
        } 
    </script> 
 
 
    [WebMethod] 
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public static object DataSource(Syncfusion.JavaScript.DataManager value) 
    { 
        IEnumerable Data = SqlDataSource1; 
        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 }; 
    } 

If you are still facing the issue, please provide the following details to analyze the issue 

1)      Stack trace of browser console 
2)      Screenshot for the issue 
3)      If possible, modify the attached sample and replicate the issue. 

 Query #3: For responsive grid,  this not is a good notice. 

Since a separate element will be rendered inside a details template, we cannot achieve the responsive behavior with the detailsTemplate. 

Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On November 9, 2016 06:43 AM

Ok. I try all and tell you. 
Another things,  instead for make format to label in detail template?   With asp normale I format that is this mode:
<asp:label runat="server" Id="lab" Text='<%# Bind("Data",{0:dd/MM/yyyy}#> ></asp:label>

Now in label but in detail tempLate how I can do this?

Mani Sankar Durai [Syncfusion]
Replied On November 10, 2016 08:20 AM

Hi Maria, 

We have analyzed your query and we suspect that you are trying to use the asp tag that contains the label for the template column with the certain format to be applied in the grid which is given in the asp label. 

Since ASP tag will be rendered at the initial load and the corresponding value for the tag will be applied at the initial load itself and hence we cannot change. And also we will not able to define the asp controls within the script tag since the column template is defined within the script tag. So we cannot apply the ASP tag in the column template of grid. Instead you can use the HTML elements inside the column template to apply the format for the particular column in grid. 

If you still face the issue please get back to us with the following details, 
1.       Share the video or screenshot of the issue you faced. 
2.       If possible please share the simple sample. 
 
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Maria
Replied On November 17, 2016 11:12 AM

Hi,i have resolve the date format problem. Thank you.
I have another question for you.
Th filter on First parent Grid. I have seen that the only filter pssible for a string text is StartWith search and other, but not is possile to make a search with filetr Contains!
I need to search, for example, a value in Address string,  and i cannot make contains filter, How i can i do this?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 18, 2016 07:41 AM

Hi Maria, 

For a string type of column, filterBar takes a “starstwith” as a default operator. In the ActionBegin event of the Grid, we can change the default operator to our preferred operator. We have already discussed about this in the following KB. 


Grid also provides the Menu filter to filter out the string column as per user wish and it is possible to change the operator. Refer to the following API reference and online demo. 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On November 18, 2016 07:59 AM

ok! thank you for this! i have understand in documentation that this noit is possible to make.
Then, i have another problem with scroll on grid. I not have understand good how the grid adapter to scroll setting and how responsive grid run.
or example, i have this code, and i have added also script for scrollling, but when open grid:
- the column not dimension automatic with text, and if i set width in on ecolumn the other begin smaller
- the important peoblem is that when i resize windows of browser for see repsonsive grid, appera me that image in attach. All column not are responsive also if i have set the piority
Can you explain me how best for run correctly the scroll in grid?
this is my code
 <div class="container">
        <div class="row">
              <div class="cols-sample-area">


    <ej:Grid ID="Grid1" runat='server' AllowFiltering="True" AllowPaging="True" AllowScrolling="false"
        AllowSorting="True"  AllowTextWrap="True" DataSourceCachingMode="None" DataSourceID="SqlElencoClienti" MinWidth="0"
        EnableResponsiveRow="false"   AllowResizing="false" AllowSelection="true" AllowResizeToFit="false"
          IsResponsive="True"    Locale="it-IT" >
         <ScrollSettings Width="1000" EnableTouchScroll="true" ></ScrollSettings>        
        <Columns>
            <ej:Column AllowEditing="False"  Visible="false"  DataType="number" Field="ID" IsIdentity="True" IsPrimaryKey="True">
            </ej:Column>
            <ej:Column DataType="string"  Priority="1" Field="Ragione Sociale / Cognome e Nome" >
            </ej:Column>        
           <ej:Column DataType="string"  Priority="3" Field="Indirizzo"  >
            </ej:Column>
           <%--  <ej:Column DataType="string"  Priority="5" Field="CITTA">
            </ej:Column>
            <ej:Column AllowEditing="False"  Priority="5" DataType="string" Field="PVResidenza">
            </ej:Column>
            <ej:Column DataType="string"  Priority="5" Field="CAP">
            </ej:Column>--%>
            <ej:Column DataType="date"  Priority="3" Field="DATANASCITA"  HeaderText="Data Nascita" Format="{0:d}"  >
            </ej:Column>
            <ej:Column DataType="string"  Priority="5" Field="LUOGO DI NASCITA" >
            </ej:Column>
            <ej:Column AllowEditing="False" DataType="string" Field="PV"  Priority="5"  >
            </ej:Column>
            <ej:Column DataType="string" Field="TELEFONO"  Priority="4"  >
            </ej:Column>           
            <ej:Column DataType="string"  Priority="1" Field="CODICEFISCALE" HeaderText="C.F"  >
            </ej:Column>
            <ej:Column DataType="string"  Priority="2" Field="PARTITAIVA" HeaderText="P.IVA" >
            </ej:Column>
            <ej:Column DataType="string"  Priority="4" Field="EMAIL" >
            </ej:Column>
            <ej:Column DataType="string"  Priority="2" Field="PROFESSIONE"  >
            </ej:Column>
        </Columns>
    </ej:Grid>


                  </div>
 </div>
  </div>


 <script>
          /* Script per far funzionare scroll grid*/
        $(function () {
            var gridObj = $("#<%= Grid1.ClientID %>").ejGrid("instance");
            scrolWidth = gridObj.model.scrollSettings.width / $(".cols-sample-area").width();
            if (gridObj.element.width() > $(".cols-sample-area").width()) {
                var scrollerwidth = Math.floor($(".cols-sample-area").width())
                gridObj.option("model.scrollSettings", { width: scrollerwidth })
                scrolWidth = 1;
            }
        });
        $(window).resize(function () {
            var gridObj = $("#<%= Grid1.ClientID %>").ejGrid("instance")
            var scrollerwidth = Math.floor($(".cols-sample-area").width() * scrolWidth)
            gridObj.option("model.scrollSettings", { width: scrollerwidth })
        });
    </script>
            </ej:Column>
        </Columns>
    </ej:Grid>

Attachment: Immagine_aa1a6c21.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 21, 2016 07:45 AM

Hi Maria, 

Query #1: the column not dimension automatic with text, and if i set width in on ecolumn the other begin smaller 

We could see you would like to place the text of the columns fit to the given space/width and render the column based on header/content width. This can be achieved by enabling the AllowResizeToFit property of the Grid. Refer to the following code example and API Reference Section. 

   <ej:Grid ID="Grid1" runat='server' AllowFiltering="True" AllowPaging="True" AllowResizeToFit="true"  >  
        <Columns> 
                  . . . 
        </Columns> 
    </ej:Grid> 


Query #2: Columns are not responsive while resizing the browser  

We could see you have assigned the MinWidth value as “0” which is the cause of the problem. MinWidth of the Grid largely plays the vital role in the responsive behavior of the Grid. So we suggest to assign the valid values to that. Refer to the following API Reference. 
 
    <ej:Grid ID="Grid1" runat='server' AllowPaging="True" AllowScrolling="false" 
AllowResizing="false" AllowSelection="true" AllowResizeToFit="true"  
          IsResponsive="True"  MinWidth="500"   Locale="it-IT" > 
         <ScrollSettings Width="1000" EnableTouchScroll="true" ></ScrollSettings>          
              . . . 
    </ej:Grid> 
     
                                                                                                                                     
 
Query #3: set the piority 

Priority property of the Columns will be helpful to hide/show the columns based on the browser width. To utilize this functionality, you have to refer the ejgrid.responsive.css file in your application as shown in the following code example. 

Site.master page 
 
<head runat="server"> 
    <meta charset="utf-8" /> 
            . . . 
    <link rel='nofollow' href="Content/ej/web/flat-lime/ej.widgets.all.min.css" rel="stylesheet" /> 
    <link rel='nofollow' href="Content/ej/web/responsive-css/ejgrid.responsive.css" rel="stylesheet" /> 
           . .        
    <script src="Scripts/ej/ej.web.all.min.js"></script> 
</head> 
 
 

You can get this file from the following Essential Studio location of your system. 

C:\xxxx \14.x.0.x\JavaScript\assets\css\web\responsive-css 

Refer to the following API Reference Section for Columns=>Priority. 


Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On November 24, 2016 11:22 AM

hi! i have a problem, i want to retrive to code behind the value of one cell of my grid. How i can do it? I have a button with onclick, on each row, where i want to retrieve after all data in that row of grid.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 25, 2016 06:25 AM

Hi Maria, 
 
We have already discussed about the “Triggering Server events from the Record Button click” in the following KB. Please refer to it. 
 
 
We have also prepared a sample that can be downloaded from the following location. 
 
 
This has been achieved using the column Template of the Grid and placed the button which has been bound a click event in the Grid. The click event of them will manually trigger the OnServerRecoreClick even of the Grid. Refer to the following code example and screenshot. 
 
    <script type="text/x-jsrender" id="buttonTemplate"> 
        <button class="Details" name="Details" title="Vis faktura">Details</button> 
    </script> 
    <ej:Grid ID="FlatGrid" runat="server" OnServerRecordClick="onClick" AllowSorting="true"> 
        <Columns> 
               . . . 
                      . . .  
            <ej:Column HeaderText="Employee Details" Template="#buttonTemplate" /> 
        </Columns> 
        <ClientSideEvents RecordClick="RecordClick"/> 
    </ej:Grid> 
 
    <script type="text/javascript"> 
 
        $(function () { 
            $("#MainContent_FlatGrid").on("click", ".Details", function (e) { 
                triggerEvent(e); 
            }); 
        }); 
        function triggerEvent(e) { 
            var obj = $("#MainContent_FlatGrid").data("ejGrid"); 
            var args = { 
                currentTarget: e.currentTarget.name, 
                selectedRecord: obj.getSelectedRecords(), 
                selectedIndex: obj.model.selectedRowIndex 
            }; 
            obj._trigger("recordClick", args); 
        } 
 
        function RecordClick(e) { 
            if (e.currentTarget != "Details") 
                return false 
            else { 
                triggerEvent(e); 
            } 
        } 
    </script> 
 
namespace WebApplication21 
{ 
    public partial class _Default : Page 
    { 
         
        protected void Page_Load(object sender, EventArgs e) 
        { 
            this.FlatGrid.DataSource = OrderRepository.GetAllRecords().ToList(); 
 
        } 
        protected void onClick(object sender, EventArgs e) { 
            var a = this.FlatGrid.Model.SelectedRowIndex; 
        } 
    } 
} 
 
 
 
 
Note: You can push the needed values in the triggerEvent method as shown in the code example. 
 
Refer to the following Help Document for server-side events. 
 
 
You have to refer the ej.webform.min.js in your application to trigger the server-side events of the Syncfusion ej Controls. 
 
Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On December 1, 2016 06:01 AM

hi, not run at my code, the onclick event not fired by server, this is my code:

  <script type="text/x-jsrender" id="buttonTemplate">
        <button class="Details" name="Details" title="Vis faktura">Details</button>
    </script>

    <ej:Grid ID="Grid2" runat='server' AllowFiltering="True" AllowPaging="True" AllowSorting="True" 
        AllowTextWrap="True" DataSourceCachingMode="None"   DataSourceID="SqlElencoProdotti" EnableResponsiveRow="false" 
      AllowResizing="true" DetailsTemplate="#tabGridContents" AllowSelection="true" AllowResizeToFit="true"   MinWidth="0" IsResponsive="True"
         Locale="it-IT" AllowScrolling="false" OnServerRecordClick="onClick"  >
      <ClientSideEvents DetailsDataBound="detailGridData" RecordClick="RecordClick"/>       
        <Columns>
           <ej:Column AllowEditing="False" DataType="number"  Visible="false" 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="Ndg_Prodotto" Priority="6" Visible="false" HeaderText="Ndg" Width="100">
            </ej:Column>           
            <ej:Column AllowEditing="False" DataType="string" Field="Prodotto" Priority="1" HeaderText="Prodotto" Width="150">
            </ej:Column>
              <ej:Column AllowEditing="False" DataType="string" Field="Società" Priority="1" Width="130">
            </ej:Column>
              <ej:Column AllowEditing="False" DataType="string" HeaderText="Contraente" Priority="3" Field="Cliente" Width="150">
            </ej:Column>
                <ej:Column DataType="string" Field="Cod_Status" HeaderText="Stato" Priority="2" Width="80">
            </ej:Column>
            <ej:Column DataType="date" Field="DATA_INIZIO_CONTRATTO" HeaderText="Data" Priority="3" Format="{0:d}" Width="90">
             </ej:Column>   
             <ej:Column DataType="string" Field="GENERENUOVO" HeaderText="Genere" Priority="6" Width="100">
            </ej:Column>
             <ej:Column AllowEditing="False" DataType="number" Format="{0:c}"  Priority="1" Field="CTV" Width="120">
            </ej:Column>
              <ej:Column HeaderText=" Emp Details" Template="#buttonTemplate" TextAlign="Center" Width="150" />
        </Columns>
    </ej:Grid>
     <script id="tabGridContents" type="text/x-jsrender"> 
        <div class="tabcontrol"> 
            <ul> 
                <li><a rel='nofollow' href="#gridTab1{{:IDPOLIZZA}}">Riepilogo Polizza</a> 
                </li> 
                <li><a rel='nofollow' href="#gridTab2{{:IDPOLIZZA}}">Prodotto</a> 
                </li>
                <li><a rel='nofollow' href="#gridTab3{{:IDPOLIZZA}}">Cliente</a> 
                </li>
                <li><a rel='nofollow' href="#gridTab4{{:IDPOLIZZA}}">Titoli</a> 
                </li>
                <li><a rel='nofollow' href="#gridTab5{{:IDPOLIZZA}}">Valorizzazione</a> 
                </li>
                 
            </ul> 
            <div id="gridTab1{{:IDPOLIZZA}}"> 
                <table class="table">
                    
                     <tr>
                                <td bgcolor="#CCFFFF" colspan="6" >
                                    <b>Polizza</b> </td>
                            </tr>
                     <tr> 
                       
                      
                                <td  >
                                 Cliente : 
                                </td>
                              <td  >
                                     <b><asp:Label ID="Label3" Text="{{: Cliente}}"  runat="server" ></asp:Label></b>  
                                </td>
                           
                                <td>
                                    Polizza :</td>
                                <td >
                                   <b><asp:Label ID="Label1" Text="{{: IDPOLIZZA}}"  runat="server" ></asp:Label></b>    - 
                                       <b>
                                    <asp:Label ID="NUMPOLIZZALabel" runat="server" Text="{{: NUMPOLIZZA}}" />
                                    </b></td>
                                <td >
                                    Status :</td>
                                <td>                                    
                                   <b> <asp:Label ID="STATUSLabel" runat="server" Text="{{: STATUS}}"/> </b>
                                   </td>
                         </tr>
                    <tr>
                                <td>
                                    Frazionamento : </td>
                                <td >
                                    <b>
                                    <asp:Label ID="FRAZIONAMENTOLabel" runat="server" Text="{{: FRAZIONAMENTO}}" />
                                   </b>
                                                                  
                                </td>
                          <td>
                                    Proposta : </td>
                                <td valign="top">
                                    <b>
                                     <asp:Label ID="PROPOSTALabel" runat="server" Text="{{: PROPOSTA}}"  />
                                    </b>
                           
                                </td>
                         <td>

                         </td>
                            </tr>
                          
                    </table>
               

            </div>  
             <div id="gridTab2{{:IDPOLIZZA}}">
                 <table  class="table">
                  <tr>
                                <td bgcolor="#CCFFFF" colspan="6" >
                                    <b>Prodotto</b> </td>
                            </tr>
                            <tr>
                                  <td >Descrizione Prodotto: </td>
                                <td><b>
                                    <asp:Label ID="ProdottoLabel" runat="server" Text="{{: Prodotto}}" />
                                    </b></td>
                                <td>Cod. Prodotto:</td>
                                <td ><b>
                                    <asp:Label ID="Ndg_ProdottoLabel" runat="server" Text="{{: Ndg_Prodotto}}" />
                                    &nbsp;/
                                    <asp:Label ID="COD_PRODOTTOLabel" runat="server" Text="{{: COD_PRODOTTO}}" />
                                    </b></td>
                              
                                <td >Assicurato=Contraente</td>
                                <td><b>
                                    <asp:Label ID="ASS_CONTRALabel" runat="server" Text="{{: ASS_CONTRA}}"/>
                                    </b></td>
                            </tr>
                     <tr>
                                <td >
                                    Compagnia Società:
                                </td>
                                <td  >
                                    <b>
                                    <asp:Label ID="CodLabel" runat="server" Text="{{: Cod}}" />
                                    &nbsp;/
                                    <asp:Label ID="SocietàLabel" runat="server" Text="{{: Società}}" />
                                    &nbsp;/
                                    <asp:Label ID="COD_COMPAGNIALabel" runat="server" Text="{{: COD_COMPAGNIA}}" />
                                    </b>
                                </td>
                                <td >
                                    Cod. Ramo</td>
                                <td  >
                                    <b>
                                    <asp:Label ID="RamoLabel" runat="server" Text="{{: GRUPPO}}" />
                                    </b>
                                </td>
                                <td  >
                                    Cod. Sottoramo</td>
                                <td >
                                    <b>
                                    <asp:Label ID="SottoRamoLabel" runat="server" Text="{{: SOTTOGRUPPO}}"/>
                                    </b></td>
                            </tr>
                            <tr>
                                <td>Genere :</td>
                                <td ><b>
                                    <asp:Label ID="RamoLabel0" runat="server" Text="{{: GENERENUOVO}}" />
                                    </b></td>
                                <td>Categoria :</td>
                                <td ><b>
                                    <asp:Label ID="RamoLabel1" runat="server" Text="{{: CATEGORIA}}" />
                                    </b></td>
                                <td >Sotto Categoria :</td>
                                <td><b>
                                    <asp:Label ID="RamoLabel2" runat="server" Text="{{: SOTTOCATEGORIA}}"/>
                                    </b></td>
                            </tr>
                     <tr>
                                <td>
                                    Contratto : </td>
                                <td >
                                    <b>
                                        <asp:Label ID="DATA_INIZIO_CONTRATTOLabel" runat="server" Text="{{: DATA_INIZIO_CONTRATTO.toLocaleDateString()}}"     />
                                      
                                    - <asp:Label ID="DATA_FINE_CONTRATTOLabel" runat="server" Text="{{:DATA_FINE_CONTRATTO.toLocaleDateString()}}" />
                                    </b>
                                </td>
                                <td >
                                    Durata : </td>
                                <td>
                                    <b>
                                    <asp:Label ID="DurataLabel" runat="server" Text="{{: DURATA}}" />
                                    &nbsp;(Anni) </b></td>
                         <td>
                             -
                         </td>
                         <td>
                             -
                         </td>
                         </tr>
                     </table>
             </div>
              <div id="gridTab3{{:IDPOLIZZA}}">
                 <table  class="table">
                  <tr>
                                <td bgcolor="#CCFFFF" colspan="4" >
                                    <b>Cliente / Assicurato / Beneficiari</b> </td>
                            </tr>
              <tr>
                                   <td >Contraente :</td>
                                   <td><b><asp:Label ID="ClienteLabel" runat="server" Text="{{: Cliente}}" />  </b></td>
                                    <td>Secondo :</td>
                                  <td ><b>
                                    <asp:Label ID="Label2" runat="server" Text="{{: NomeSecondoContraente}}" />
                                    </b></td>
                  </tr>
                     <tr>
                                   <td>Assicurato :</td>
                                   <td ><b> <asp:Label ID="Nome_AssicuratoLabel" runat="server" Text="{{: Nome_Assicurato}}" />  </b></td>
                                   <td>Secondo Assicurato :</td>
                                <td ><b> <asp:Label ID="Nome_Secondo_AssicuratoLabel" runat="server" Text="{{: NomeSecondoAssicurato}}"/> </b></td>
                            </tr>
                          
                    

                    <tr>
                                <td bgcolor="#CCFFFF" colspan="4" >
                                    <b> Beneficiari</b> </td>
                            </tr> 

                 </table>
                  <div id="detailGrid2{{:IDPOLIZZA}}"></div> 

                  </div>
            <div id="gridTab4{{:IDPOLIZZA}}">
                  <div id="detailGrid3{{:IDPOLIZZA}}"></div> 
                </div>
             <div id="gridTab5{{:IDPOLIZZA}}">
                  <div id="detailGrid4{{:IDPOLIZZA}}"></div> 
               <table class="table">
                        <tr>
                                <td bgcolor="#CCFFFF" colspan="8" >
                                    <b>CTV / Valorizzazione</b> </td>
                            </tr>
                    <tr>
                      <td>Imponibile : </td>
                       <td ><b> € <asp:Label ID="IMPONIBILE_LABEL" runat="server" Text="{{: IMPONIBILE}}" />  </b></td>
                       <td >Totale : </td>
                       <td  ><b> € <asp:Label ID="TOTALE_LABEL" runat="server" Text="{{: TOTALE}}" /> </b></td>
                       <td >CTV : </td>
                            <td><b>   € <asp:Label ID="CTV_LABEL" runat="server" Text="{{: CTV}}" />                     </b></td>
                                             
                        <td>Ultima Valorizzazione :</td>
                         <td ><b>
                      
                              <asp:Label ID="DATA_CTV_LABEL" runat="server" Text="{{:DATA_CTV.toLocaleDateString()}}"  />  </b>                             
                             
                         </td>
                                        </tr>
                     </table>
                  </div>
          
            

        </div> 






    </script> 
     <script type="text/javascript"> 
    
        
         function detailGridData(e) {
             var filteredData = e.data["IDPOLIZZA"];

            
             e.detailsElement.find("#detailGrid2" + filteredData).ejGrid({
                 dataSource: ej.DataManager({
                     url: "RicercaPolizze.aspx/DataSource2",
                     adaptor: new ej.WebMethodAdaptor()
                 }),
                 allowPaging: true,
                 query: new ej.Query().where("IDPOLIZZA", "equal", parseInt(filteredData)),
                 columns: [
                         { field: "ID", headerText: 'ID', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "BENEFICIARIO", headerText: 'Beneficiario', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "Nome", headerText: 'Nome', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "PARENTELA", headerText: 'Parentela', width: 120, textAlign: ej.TextAlign.Left }
                 ]
             });

             e.detailsElement.find("#detailGrid3" + filteredData).ejGrid({
                 dataSource: ej.DataManager({
                     url: "RicercaPolizze.aspx/DataSource3",
                     adaptor: new ej.WebMethodAdaptor()
                 }),
                 allowPaging: true,
                 locale: "it",
                 query: new ej.Query().where("IDPOLIZZA", "equal", parseInt(filteredData)),
                 columns: [
                         { field: "IDTIT_APP", headerText: '#', width: 90, textAlign: ej.TextAlign.Left },
                         { field: "Cat", headerText: 'Cat', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "Titolo", headerText: 'Titolo', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "Del", format: "{0:dd/MM/yyyy}", headerText: 'Del.', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "Copertura", format: "{0:dd/MM/yyyy}", headerText: 'Copertura', width: 120, textAlign: ej.TextAlign.Left },
                         { field: "Es", headerText: 'Es', width: 50, textAlign: ej.TextAlign.Left },
                         { field: "Lordo", format:"{0:c}", headerText: 'Lordo', width: 120, textAlign: ej.TextAlign.Left }
                 ]
             });

             e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 0 });
         }
    </script> 
 <script type="text/javascript">

        $(function () {
            $("#MainContent_Grid2").on("click", ".Details", function (e) {
                triggerEvent(e);
            });
        });
        function triggerEvent(e) {
            var obj = $("#MainContent_Grid2").data("ejGrid");
            var args = {
                currentTarget: e.currentTarget.name,
                selectedRecord: obj.getSelectedRecords(),
                selectedIndex: obj.model.selectedRowIndex
            };
            obj._trigger("RecordClick", args);
        }

        function RecordClick(e) {
            if (e.currentTarget != "Details")
                return false
            else {
                triggerEvent(e);
            }
        }
    </script>



oi want remember you that my context is same context we started.

Maria
Replied On December 1, 2016 07:05 AM

my project is the same of last, i have aded also your code. On client i reach to see date, but not firing server event on onclick

Maria
Replied On December 1, 2016 08:06 AM

 this is my project, not is ultimate version, but is good 

Attachment: ULN_Intermediari__Copia_d0766631.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 2, 2016 06:00 AM

Hi Maria,  
 
We are able to reproduce the problem at our end with given sample. Any ASP element rendered inside the asp:Content will never have a static ID until we mention ClientIDMode (“Static”) for the corresponding ASP control. Therefore, element’s ID will be prepend with the ContentPlaceHolderID of the asp:content which is cause of the problem. In your case, Grid ID will be “MainContent_Grid2” in the DOM structure of the browser. Hence the events for the button (in Column Template) were not bound correctly. Refer to the following code example and screenshot 
 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
 
    <ej:Grid ID="Grid2" ClientIDMode="Static" runat='server' AllowFiltering="True" AllowPaging="True" AllowSorting="True" > 
                  . .  
    </ej:Grid> 
</asp:Content> 
 
 
 
To bind the events for the buttons/perform any actions on the Grid through ID externally, we suggest to mention ClientIDMode (“Static”) for the Grid control or else use the Grid ID Selector as “#MainContent_Grid2”. Refer to the following methods and we suggest to use anyone of them. 
 
Method 1: Use the ClientIDMode as “Static” 
 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
 
    <ej:Grid ID="Grid2" ClientIDMode="Static" runat='server' AllowFiltering="True" AllowPaging="True" AllowSorting="True" > 
                  . .  
    </ej:Grid> 
</asp:Content> 
 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid2").on("click", ".Details", function (e) { 
                triggerEvent(e); 
            }); 
        }); 
 
        function triggerEvent(e) { 
            var obj = $("#Grid2").data("ejGrid"); 
                . ..  
        } 
 
        function RecordClick(e) { 
                . . 
        } 
    </script> 
 
 
Method 2: Change the ID selectors for the Grid as follows 
 
 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent"> 
 
    <ej:Grid ID="Grid2" runat='server' OnServerRecordClick="onClick" AllowFiltering="True" AllowPaging="True" AllowSorting="True" > 
                  . .  
    </ej:Grid> 
</asp:Content> 
 
    <script type="text/javascript"> 
        $(function () { 
            $("#MainContent_Grid2").on("click", ".Details", function (e) { 
                triggerEvent(e); 
            }); 
        }); 
 
        function triggerEvent(e) { 
            var obj = $("#MainContent_Grid2").data("ejGrid"); 
                   . . 
        } 
 
        function RecordClick(e) { 
                . .  
        } 
    </script> 
 
Note: You have to use anyone of the method. 
 
We have also modified the sample that can be downloaded from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On December 5, 2016 04:29 AM

Excuse me, but also in your project and example not firing server onclick! I need , in debug, to see how retrive value! i The onclick function not firing on server, and i cannot reach to retrive nothing value.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 6, 2016 01:53 AM

Hi Maria, 
 
We are unable to reproduce the problem at our end. The modified application attach in our previous update working fine and triggers the server-side OnServerRecordClick event of the Grid while clicking the button. We have prepared a video demo on that. Please refer it from the following link. 
 
 
If you are still facing any problem, please provide the video demo and replication procedure for the sample.  
 
Regards, 
Seeni Sakthi Kumar S. 
 
 


Maria
Replied On December 6, 2016 05:39 AM

ok! the project run also to me!
i have another problem , i cannot reach to acces at date, i need for example "IDPOLIZZA" field, i tried to cast e.Arguments["selectedRecord"] with Array list or object, but i received all cast exception. How i can do it?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 8, 2016 05:48 AM

Hi Maria, 
 
We could see you are unable to cast the selected records in the server end. This can be achieved by casting the selectedRecord as a Dictionary object and get the corresponding value from them using key/value pair approach. Instead of assigning the selectedRecord as an array, assign them a currently selected record alone. Refer to the following code example and screenshot. 
 
   <ej:Grid ID="Grid2" runat='server'  OnServerRecordClick="onClick" > 
        
      <ClientSideEvents DetailsDataBound="detailGridData" RecordClick="RecordClick"/>  
            . . . 
               .. .         
    </ej:Grid> 
 
    <script type="text/javascript"> 
     
 
        $(function () { 
              . . . 
               . ..  
        }); 
 
        function triggerEvent(e) { 
            var obj = $("#MainContent_Grid2").data("ejGrid"); 
            var args = { 
                currentTarget: e.currentTarget.name, 
                selectedRecord: obj.getSelectedRecords()[0], 
                selectedIndex: obj.model.selectedRowIndex 
            }; 
            obj._trigger("recordClick", args); 
        } 
 
        function RecordClick(e) { 
               . .  
        } 
    </script> 
 
    protected void onClick(object sender, GridEventArgs e) 
    { 
        object record = e.Arguments["selectedRecord"]; 
        Dictionary<string, object> KeyVal = record as Dictionary<string, object>; 
         
        foreach (KeyValuePair<string, object> keyval in KeyVal) 
        { 
 
            if (keyval.Key == "IDPOLIZZA") 
            { 
                  .  . 
            } 
        } 
    } 
 
 
 
 
 
We have modified the sample that can be downloaded from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 


Maria
Replied On December 13, 2016 10:26 AM

hi! the other things i have resolve, thank you. But i need to resolve also the serialize error, withou insert jsSerializer.MaxJsonLength = int.MaxValue; this in code behind.
So i have seen, with almost 5000 rows, the error rise at public string DataTableToJSONWithJavaScriptSerializer(DataTable table) function, in detailed when call this:   return jsSerializer.Serialize(parentRow);.
The parentRow is correctly filled, but at this line, give me error serialize javascript string.


This fuction run before of DAtasource functionwith paging for detail date, and then the error rise same. This serialize call at pageLoad, then? how resolve this error using pagination LoadOnDemand ? The error occours same, also your method. 
i have attached project with most quantity of date

Attachment: ULN_Intermediari__Copia_61868028.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 14, 2016 07:36 AM

HI Maria, 
 
We are able to reproduce the problem at our end. We have serialized the Data greater than the MaxJsonLength which is the cause of the problem. So we have changed he solution as follows. In the DataTableToJSONWithJavaScriptSerializer method, we have added two more parameters (instance and IEnumerable dataSource) along with DataTable Parameter. Now, this method returns the DataSource required for the Child Grid and serialized/deserialized the DataTable by saving the every 1000 records which will avoid the serialization problem. 
 
    public static IEnumerable<object> SqlDataSource1; 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        //Getting data from the SQLDataSource 
        DataView dv = (DataView)this.childData.Select(DataSourceSelectArguments.Empty); 
        //Converting to Data Table 
        DataTable dt = dv.ToTable(); 
 
        //Converting Dictionary data 
        List<Dictionary<string, object>> dictData = ToDictionary(dt); 
        //Creating Table Type 
        Type tableType = GetTableType(dictData); 
 
        //Creating instance 
        var inst = Array.CreateInstance(tableType, 1); 
        //Getting the Child DataSource 
        SqlDataSource1 = DataTableToJSONWithJavaScriptSerializer(dt, inst, SqlDataSource1); 
    } 
    public IEnumerable<object> DataTableToJSONWithJavaScriptSerializer(DataTable table, Array inst, IEnumerable<object> dataSource) 
    { 
        JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); 
        List<Dictionary<string, object>> parentRow = new List<Dictionary<string, object>>(); 
        Dictionary<string, object> childRow; 
        foreach (DataRow row in table.Rows) 
        { 
            childRow = new Dictionary<string, object>(); 
                   . . .  
            parentRow.Add(childRow); 
            if (parentRow.Count > 1000) 
            { 
                IEnumerable<object> data = null; 
                string str = jsSerializer.Serialize(parentRow); 
                data = JsonConvert.DeserializeObject(str, inst.GetType(), 
                   new JsonSerializerSettings 
                   { 
                       NullValueHandling = NullValueHandling.Ignore 
 
                   }) as object[]; 
                parentRow = new List<Dictionary<string, object>>(); 
                //Concatenating the dataSource 
                if (dataSource != null) 
                    dataSource.Concat(data).ToList(); 
                else 
                    dataSource = data; 
            } 
        } 
        return dataSource; 
    } 
 
Note: Ensure the first row of the TABLE TITOLO_APPENDICE must not hold NULL values for any column. Since we are generating the Business Class Instance type based on the First row, this is important. 
 
Please download the cs file of your application from the following location. 
 
 
Regards, 
Seeni Sakthi Kumar S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;