Grid with Detail Template

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 21, 2016 12:41 PM UTC

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">

. . . .

</ej:Grid>

<asp:SqlDataSource

id="childData"

runat="server"

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

SelectCommand="SELECT * FROM Orders">

</asp:SqlDataSource>

. .

</script>

//SqlDataSource a variable defined at the code behind

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

function detailGridData(e) {

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

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

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

dataSource: data,

allowSelection: false,

allowPaging: true,

. . . .

});

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

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

. . . . .

});

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

}

</script>

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

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

Regards,

Seeni Sakthi Kumar S.

MA Maria September 24, 2016 08:56 PM UTC

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?

MA Maria September 26, 2016 08:04 AM UTC

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?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 26, 2016 12:35 PM UTC

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">

. . .

</ej:Grid>

<asp:SqlDataSource

id="childData"

runat="server"

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

SelectCommand="SELECT * FROM Orders">

</asp:SqlDataSource>

. . . .

. . .

<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>

</div>

</div>

</script>

//SqlDataSource a variable defined at the code behind

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

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

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

function detailGridData(e) {

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

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

. . . .

. .

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

dataSource: data1,

allowSelection: false,

allowPaging: true,

. . . .

});

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

dataSource: data2,

});

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

dataSource: data3,

});

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

}

</script>

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

public IEnumerable SqlDataSource1;

public IEnumerable SqlDataSource2;

public IEnumerable SqlDataSource3;

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

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

protected void Page_Load(object sender, EventArgs e)

{

. . .

.. . . .

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

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

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

DataTable dt = dv.ToTable();

DataTable dt1 = dv1.ToTable();

DataTable dt2 = dv2.ToTable();

this.SqlDataSource1 = ToDynamicList(dt);

this.SqlDataSource2 = ToDynamicList(dt1);

this.SqlDataSource3 = ToDynamicList(dt2);

}

public List<dynamic> ToDynamicList(DataTable dt)

{

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

var dictData = ToDictionary(dt);

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

}

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

{

dynamic temp = new List<dynamic>();

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

{

object Obj = Activator.CreateInstance(TypeObj);

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

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

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

{

foreach (PropertyInfo property in properties)

{

if (property.Name == keyValuePair.Key)

{

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

property.SetValue(Obj, convertedValue, null);

break;

}

temp.Add(Obj);

}

return temp;

}

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

{

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

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

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

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

return Temp.ToList();

}

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

{ .. .

. . . .

bool flag = true;

if (flag)

{

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

{

flag = false;

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

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

{

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

colType.Add(type);

}

foreach (string step in list)

{

int inx = list.IndexOf(step);

var type = colType[inx];

string propertyName = step;

. . . .

}

Type obj = typeBuilder.CreateType();

return obj;

}

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

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

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

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

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

. ..

. .

</ej:Grid>

<ul>

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

</li>

</ul>

</div>

</script>

//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.

MA Maria September 26, 2016 01:34 PM UTC

thanks for response. i try it!

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 27, 2016 04:12 AM UTC

Hi Maria,

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

Regards,

Seeni Sakthi Kumar S.

MA Maria September 27, 2016 11:38 AM UTC

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?

MA Maria September 27, 2016 02:32 PM UTC

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?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 28, 2016 02:03 PM UTC

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.

<system.web.extensions>

</webServices>

</scripting>

</system.web.extensions>

</configuration>

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

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

[WebMethod]

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

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

{

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

DataOperations dp = new DataOperations();

if (value.Where != null)

{

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

}

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

if (value.Skip != null)

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

if (value.Take != null)

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

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

}

function detailGridData(e) {

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

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

text: "ClickMe"

});

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

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

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

allowPaging: true,

load: function (args) {

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

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

},

});

. . .

. ..

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

}

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

Regards,

Seeni Sakthi Kumar S.

MA Maria September 28, 2016 02:15 PM UTC

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!

MA Maria September 29, 2016 09:55 AM UTC

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

}

MA Maria September 29, 2016 10:17 AM UTC

<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" >

<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>

<ul>

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

</li>

</ul>

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

</div>

</script>

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>

MA Maria September 29, 2016 01:27 PM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 29, 2016 01:29 PM UTC

Hi Maria,

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

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

Please ensure the following things in your application.

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

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

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

//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.

MA Maria September 29, 2016 01:39 PM UTC

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?

MA Maria September 29, 2016 01:43 PM UTC

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!

MA Maria September 29, 2016 02:11 PM UTC

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

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>

MA Maria September 29, 2016 02:12 PM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 30, 2016 06:50 AM UTC

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.

. . .

</connectionStrings>

<system.web.extensions>

</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.

//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.

MA Maria September 30, 2016 12:41 PM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 3, 2016 10:22 AM UTC

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.

MA Maria October 17, 2016 11:36 AM UTC

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?

MA Maria replied to Maria October 17, 2016 11:37 AM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 18, 2016 12:31 PM UTC

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.

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

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">

. ..

.. .

</ej:Grid>

<asp:SqlDataSource

id="childData"

runat="server"

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

SelectCommand="SELECT * FROM Orders">

</asp:SqlDataSource>

. . . .

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.

Sample: http://www.syncfusion.com/downloads/support/forum/126047/ze/F1260471266045114.zip

Regards,

Seeni Sakthi Kumar S.

MA Maria October 18, 2016 02:17 PM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 19, 2016 12:59 PM UTC

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.

MA Maria October 24, 2016 10:18 AM UTC

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.

MA Maria replied to Maria October 24, 2016 10:20 AM UTC

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.

MA Maria replied to Maria October 24, 2016 02:00 PM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 25, 2016 10:07 AM UTC

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.

MA Maria October 25, 2016 11:37 AM UTC

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

MA Maria October 25, 2016 02:09 PM UTC

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

Attachment: ULN_Intermediari__Copia_f82c5a7a.rar

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 26, 2016 01:00 PM UTC

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.

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

}

https://stackoverflow.com/questions/20032240/authentication-failed-during-call-webmethod-from-jquery-ajx-with-aspnet-friendly

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

Sample: https://www.syncfusion.com/downloads/support/forum/126047/ze/ULN_Intermediari_-_Copia1138265437.zip

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.

MA Maria November 1, 2016 07:24 PM UTC

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

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team November 2, 2016 11:37 AM UTC

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

MA Maria November 2, 2016 04:02 PM UTC

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

MA Maria replied to Maria November 2, 2016 04:30 PM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 3, 2016 01:33 PM UTC

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}" },

]

});

https://help.syncfusion.com/api/js/ejgrid#members:columns-format

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.

MA Maria November 6, 2016 01:35 PM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 7, 2016 12:12 PM UTC

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.

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.

Sample: http://www.syncfusion.com/downloads/support/forum/126047/ze/ULN_Intermediari_-_Copia-1988947468.zip

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.

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.

MA Maria November 9, 2016 11:43 AM UTC

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?

MS Mani Sankar Durai Syncfusion Team November 10, 2016 01:20 PM UTC

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.

MA Maria November 17, 2016 04:12 PM UTC

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?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 18, 2016 12:41 PM UTC

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.

https://www.syncfusion.com/kb/3369/how-to-change-the-default-comparison-operator-of-the-filter-bar

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.

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filtertype

https://help.syncfusion.com/js/grid/filter#menu-filter

http://asp.syncfusion.com/demos/web/grid/filteringmenu.aspx

Regards,

Seeni Sakthi Kumar S.

MA Maria November 18, 2016 12:59 PM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 21, 2016 12:45 PM UTC

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>

</ej:Grid>

https://help.syncfusion.com/api/js/ejgrid#members:allowresizetofit

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" >

. . .

</ej:Grid>

https://help.syncfusion.com/api/js/ejgrid#members:minwidth

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>

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.

https://help.syncfusion.com/api/js/ejgrid#members:columns-priority

Regards,

Seeni Sakthi Kumar S.

MA Maria November 24, 2016 04:22 PM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 25, 2016 11:25 AM UTC

Hi Maria,

We have already discussed about the “Triggering Server events from the Record Button click” in the following KB. Please refer to it.

https://www.syncfusion.com/kb/4886/how-to-add-a-custom-command-with-server-side-event-handling

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

Sample: https://www.syncfusion.com/downloads/support/forum/126047/ze/WebApplication211186518185.zip

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.

<button class="Details" name="Details" title="Vis faktura">Details</button>

</script>

<ej:Grid ID="FlatGrid" runat="server" OnServerRecordClick="onClick" AllowSorting="true">

. . .

<ej:Column HeaderText="Employee Details" Template="#buttonTemplate" />

</Columns>

</ej:Grid>

$(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.

https://help.syncfusion.com/aspnet/grid/server-side-events#onserverrecordclick

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.

MA Maria December 1, 2016 11:01 AM UTC

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

<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" >

<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>

<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>

<tr>

<b>Polizza</b> </td>

</tr>

<tr>

<td >

Cliente :

</td>

<td >

</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>

</td>

</tr>

<tr>

<td>

Frazionamento : </td>

<td >

<b>

<asp:Label ID="FRAZIONAMENTOLabel" runat="server" Text="{{: FRAZIONAMENTO}}" />

</b>

</td>

<td>

Proposta : </td>

<b>

<asp:Label ID="PROPOSTALabel" runat="server" Text="{{: PROPOSTA}}" />

</b>

</td>

<td>

</td>

</tr>

</table>

</div>

<tr>

<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>

<asp:Label ID="Ndg_ProdottoLabel" runat="server" Text="{{: Ndg_Prodotto}}" />

 /

<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}}" />

 /

<asp:Label ID="SocietàLabel" runat="server" Text="{{: Società}}" />

 /

<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>

<asp:Label ID="RamoLabel0" runat="server" Text="{{: GENERENUOVO}}" />

</b></td>

<td>Categoria :</td>

<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}}" />

 (Anni) </b></td>

<td>

-

</td>

<td>

-

</td>

</tr>

</table>

</div>

<tr>

<b>Cliente / Assicurato / Beneficiari</b> </td>

</tr>

<tr>

<td >Contraente :</td>

<td>Secondo :</td>

<asp:Label ID="Label2" runat="server" Text="{{: NomeSecondoContraente}}" />

</b></td>

</tr>

<tr>

<td>Assicurato :</td>

<td>Secondo Assicurato :</td>

</tr>

<tr>

<b> Beneficiari</b> </td>

</tr>

</table>

</div>

</div>

<tr>

<b>CTV / Valorizzazione</b> </td>

</tr>

<tr>

<td>Imponibile : </td>

<td >Totale : </td>

<td>Ultima Valorizzazione :</td>

<asp:Label ID="DATA_CTV_LABEL" runat="server" Text="{{:DATA_CTV.toLocaleDateString()}}" /> </b>

</td>

</tr>

</table>

</div>

</script>

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>

$(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.

MA Maria December 1, 2016 12:05 PM UTC

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

MA Maria December 1, 2016 01:06 PM UTC

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

Attachment: ULN_Intermediari__Copia_d0766631.rar

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 2, 2016 11:00 AM UTC

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>

$(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>

$(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.

Sample: https://www.syncfusion.com/downloads/support/forum/126047/ze/ULN_Intermediari_-_Copia-1371938056.zip

Regards,

Seeni Sakthi Kumar S.

MA Maria December 5, 2016 09:29 AM UTC

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.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 6, 2016 06:53 AM UTC

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.

Demo Video: https://www.syncfusion.com/downloads/support/forum/126047/ze/ejGridDemo414604556.zip

If you are still facing any problem, please provide the video demo and replication procedure for the sample.

Regards,

Seeni Sakthi Kumar S.

MA Maria December 6, 2016 10:39 AM UTC

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?

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 8, 2016 10:48 AM UTC

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" >

. . .

.. .

</ej:Grid>

$(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.

Sample: https://www.syncfusion.com/downloads/support/forum/126047/ze/ULN_Intermediari_-_Copia-1635704890.zip

Regards,

Seeni Sakthi Kumar S.

MA Maria December 13, 2016 03:26 PM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 14, 2016 12:36 PM UTC

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.

Sample: https://www.syncfusion.com/downloads/support/directtrac/168025/ze/F126047-1216517449

Regards,

Seeni Sakthi Kumar S.

CS chia shyan September 17, 2019 07:27 PM UTC

Hi, can provide sample in vb.net ? thanks.

MP Manivannan Padmanaban Syncfusion Team September 18, 2019 03:54 PM UTC

Hi chia,

As per your request, we have created the sample. Kindly refer the below link,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/vbexport-1970067929.zip

Regards,

Manivannan Padmanaban.

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

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

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

Grid with Detail Template

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