maxJson lengthexception in grid

7 Replies
3 Participants

Created by
MA Manolo

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Grid

Created On
Jan 11, 2017 12:34 PM UTC

Last Activity On
Jan 16, 2017 12:59 PM UTC

Want to subscribe?
SIGN IN

Hi,

I've a filter section and a grid. I bind the grid with ajax. Without filters, I've get an exceeding maxJson exception, with filters it works fine. Some similar at this:

My form filter

@using (Html.BeginForm("Filtrar", "NuevasPoblaciones", FormMethod.Post, new { id = "frmFiltros" }))
{

Comunidad
@*@Html.EJ().DropDownList("ddlComunidad").Datasource(ds => ds.URL("/NuevasPoblaciones/GetComunidades").Adaptor(AdaptorType.UrlAdaptor)).DropDownListFields(f => f.Text("Nombre").Value("IdComunidad")).CascadeTo("ddlProvincia").HeaderTemplate("

").ClientSideEvents( ev => ev.Create("onDropDownCreate"))*@
@Html.EJ().DropDownList("ddlComunidad").Datasource((IEnumerable)ViewBag.dsComunidades).DropDownListFields(f => f.Text("Nombre").Value("IdComunidad")).CascadeTo("ddlProvincia").HeaderTemplate("

").ClientSideEvents(ev => ev.Create("onDropDownCreate")).ShowCheckbox(true)

....

My grid

@(Html.EJ().Grid("gridNNPP")
.Locale("es-ES")
.Datasource((IEnumerable)ViewBag.dsNNPP) // This is empty
//.Datasource(ds => ds.URL("/NuevasPoblaciones/Filtrar").Adaptor(AdaptorType.JsonAdaptor))
.AllowSorting()
.AllowPaging()

my script section

$(document).ready(function () {

//$('input').on("ejDropDownListpopupHide", loadGridNNPP);
//$('button').on("click", loadGridIncidencias);

$("#frmFiltros").submit(function () {
var form = $(this);
$("#gridNNPP").ejWaitingPopup("show");
$.ajax({
dataType: 'JSON',
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function (result) {
var grid = $("#gridNNPP").ejGrid("instance")
grid.dataSource(result);
$("#gridNNPP").ejWaitingPopup("hide");
},
error: function (jqXHR, textStatus, errorThrown) {
alert("ko");
console.log("Error en submit: " + jqXHR + ' ' + textStatus + ' ' + errorThrown);
$("#gridNNPP").ejWaitingPopup("hide");
}
});
return false;
})

})

My controller action

public JsonResult Filtrar(FormCollection form)
{
string idComunidades = form["ddlComunidad"].Replace(';', ',');
//TODO: Poner bien cuando saquen el parche
string prov = form["ddlProvincia"].Replace(';', ',');
string idProvincias = string.Join(",", prov.Split(',').ToList().Where(x => Utils.IsNumeric(x)).ToList());
//string idProvincias = form["ddlProvincia"].Replace(';', ',');
string idSituacionMunicipio = form["ddlSituacionMunicipio"].Replace(';', ',');
string idTipoSuministro = form["ddlTipoSuministro"].Replace(';', ',');
string idEstadoCompetencia = form["ddlEstadoCompetencia"].Replace(';', ',');
string idPlanOcupacion = form["ddlPlanOcupacion"].Replace(';', ',');
string idSituacionAutorizacion = form["ddlSituacionAutorizacion"].Replace(';', ',');
string idDistribuidoraEfectiva = form["ddlDistribuidoraEfectiva"].Replace(';', ',');
string idAñoPlanEstrategico = form["ddlAñoPlanEstrategico"].Replace(';', ',');
string idGLP = form["ddlGLP"].Replace(';', ',');
string txtMunicipio = form["txtMunicipio"];

var datos = GetNNPP(idComunidades, idProvincias, txtMunicipio, idSituacionMunicipio, idEstadoCompetencia, idTipoSuministro, idPlanOcupacion,
idSituacionAutorizacion, idDistribuidoraEfectiva, idAñoPlanEstrategico, idGLP).ToList();

return Json(datos);
}

I've read this article

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

But I am not able to apply Load on demand in this scenario.

7 Replies

MS Mani Sankar Durai Syncfusion Team January 12, 2017 12:43 PM UTC

Hi Manolo,

Thanks for contacting Syncfusion support.

We have analyzed your query and the cause of this issue is due to binding huge amount of data without using any adaptor in grid. Since it didn’t serialize those data and throws the error.

Please refer the below Kb link to avoid this issue.

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

We suggest you to use the URL Adaptor to bind the huge amount of data.

For you convenience we have modified your sample that can be downloaded from the below link.

Link: http://www.syncfusion.com/downloads/support/forum/128262/ze/Sample_without_clear1570235996

In this sample we have achieved your requirement by changing the dropdown value and the selected value will be passed to the server side and perform filtering for the grid. Based on that the data will be bind to grid. These are all performed by using UrlAdaptor.

Please refer the below code example.

Select a car

</div>

@Html.EJ().DropDownList("selectCar").TargetID("carsList").Width("150px").ClientSideEvents(e => e.Change("change"))

...

</div>

@(Html.EJ().Grid<object>("Grid")

.AllowPaging()

.Columns(col =>

{

...

})

)

function change(args) {

if (args.itemId == 1) {

var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" });

$("#Grid").ejGrid({

dataSource: data,

query: new ej.Query().addParams("employeeID", 4)

});

}

if (args.itemId == 0) {

var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" });

$("#Grid").ejGrid({

dataSource: data,

query: new ej.Query().addParams("employeeID", 2)

});

}

</script>

[Controller.cs]

public ActionResult Event(DataManager dm, int? employeeID)

{

var DataSource = OrderRepository.GetAllRecords();

DataSource = OrderRepository.GetAllRecords().Where(e => e.EmployeeID == employeeID).ToList();

DataResult result = new DataResult();

result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

result.count = DataSource.Count();

return Json(result, JsonRequestBehavior.AllowGet);

}

Also please refer the documentation link about dataSource method.

Link: https://help.syncfusion.com/api/js/ejgrid#methods:datasource

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor

Please let us if you need further assistance.

Regards,

Manisankar Durai.

MA Manolo January 12, 2017 04:59 PM UTC

Hi,

I need pass all form as parameter. I try dhis code:

    $(document).ready(function () {
        $("#frmFiltros").submit(function () {
            $("#gridNNPP").ejWaitingPopup("show");
            var form = $(this);
            var dataManager = ej.DataManager({ url: "/NuevasPoblaciones/Filtrar2", adaptor: "UrlAdaptor" });
            var query = new ej.Query();
            query.addParams("form", form);
            // query.addParams("form", form.serialize()); not work also

            $("#gridNNPP").ejGrid({
                dataSource: dataManager,
                query: query
            });
            $("#gridNNPP").ejWaitingPopup("hide");

            return false;
}
But in controller I don't received the form parameters.

Y try also use ajax. I do this:

$("#frmFiltros").submit(function () {
            $("#gridNNPP").ejWaitingPopup("show");
            $.ajax({
                dataType: 'JSON',
                type: 'POST',
                url: form.attr('action'),
                data: { dm: grid.dataSource, form: form.serialize()} ,
                success: function (result) {
                    var grid = $("#gridNNPP").ejGrid("instance")
                    grid.dataSource(result);
                    $("#gridNNPP").ejWaitingPopup("hide");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("ko");
                    console.log("Error en submit: " + jqXHR + ' ' + textStatus + ' ' + errorThrown);
                    $("#gridNNPP").ejWaitingPopup("hide");
                }
            });
            return false;
        })

But i don't know how pass the grid's datamanager

MF Mohammed Farook J Syncfusion Team January 13, 2017 12:29 PM UTC

Hi Manolo,

We have validated your reported issue and we were unable to reproduced at our end. Please find the code example.

[View]

First name:<br>

<br>

Last name:<br>

</form>

@(Html.EJ().Grid<object>("FlatGrid")

.AllowPaging() /*Paging Enabled*/

.Columns(col =>

{

col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

col.Field("FirstName").HeaderText("First Name").Width(100).Add();

col.Field("Title").Width(120).Add();

col.Field("City").Width(100).Add();

col.Field("Country").Width(100).Add();

}))

</div>

$("#myform").submit(function (e) {

var dataManager = ej.DataManager({ url: "Grid/Data", adaptor: new ej.UrlAdaptor() });

var form = $(this).serialize();

$("#FlatGrid").ejGrid({

dataSource: dataManager,

query: new ej.Query().addParams("a", form)

});

})

</script>

[controller]

public ActionResult Data(DataManager dm, string a)

{

// do your action here

return View();

}

Please find the screen shot for your reference.

Regards,

J.Mohammed Farook

MF Mohammed Farook J Syncfusion Team January 13, 2017 12:30 PM UTC

Hi Manolo,

We have validated your reported issue and we were unable to reproduced at our end. Please find the code example.

[View]

First name:<br>

<br>

Last name:<br>

</form>

@(Html.EJ().Grid<object>("FlatGrid")

.AllowPaging() /*Paging Enabled*/

.Columns(col =>

{

col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

col.Field("FirstName").HeaderText("First Name").Width(100).Add();

col.Field("Title").Width(120).Add();

col.Field("City").Width(100).Add();

col.Field("Country").Width(100).Add();

}))

</div>

$("#myform").submit(function (e) {

var dataManager = ej.DataManager({ url: "Grid/Data", adaptor: new ej.UrlAdaptor() });

var form = $(this).serialize();

$("#FlatGrid").ejGrid({

dataSource: dataManager,

query: new ej.Query().addParams("a", form)

});

})

</script>

[controller]

public ActionResult Data(DataManager dm, string a)

{

// do your action here

return View();

}

Please find the screen shot for your reference.

Regards,

J.Mohammed Farook

MA Manolo January 15, 2017 05:28 PM UTC

Ok, I've found my problem

in the view, I've defined this form

"@using (Html.BeginForm("Filtrar", "NuevasPoblaciones", FormMethod.Post, new { id = "frmFiltros" }))"

And the javascript

$("#frmFiltros").submit(function (e) {
        $("#gridNNPP").ejWaitingPopup("show");
        var dataManager = ej.DataManager({ url: "/NuevasPoblaciones/Filtrar2", adaptor: new ej.UrlAdaptor() });
        var frm = $(this).serialize();

        $("#gridNNPP").ejGrid({
            dataSource: dataManager,
            query: new ej.Query().addParams("form", frm)
        });
        return false;
    })

So, in my controller I don't received the DataManager values. The FormCollection yes.

I've defined the form:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "frmFiltros" }))

and now, I recived the datamanager and a string with all form values. My form has drop down values with check box option. The string that I received is similar at this

hiddenEle=1%3B2%3B3&ddlComunidad=1&ddlComunidad=2&ddlComunidad=3&ddlProvincia=&txtMunicipio=&ddlSituacionMunicipio=&ddlEstadoCompetencia=&ddlTipoSuministro=&ddlPlanOcupacion=&ddlSituacionAutorizacion=&ddlDistribuidoraEfectiva=&ddlA%C3%B1oPlanEstrategico=&ddlGLP=

Can I received a formCollection instead a string?

Thanks

MA Manolo January 15, 2017 05:33 PM UTC

and why this post looks bad?

MS Mani Sankar Durai Syncfusion Team January 16, 2017 12:59 PM UTC

Hi Manolo,

Query 1: Can I received a formCollection instead a string?

We have analyzed your query and we have also prepared a sample based on your requirement that can be available from the below link.

Link: http://www.syncfusion.com/downloads/support/forum/128262/ze/Sample_without_clear-1615819107

In this sample we have passed the form value as a string to server side and thereby we can Deserialize the string into FormCollections.

Please refer the below code example.

public ActionResult Event(DataManager dm, string a)

{

string responseString = a;

var dict = HttpUtility.ParseQueryString(responseString);

string json = JsonConvert.SerializeObject(dict.Cast<string>().ToDictionary(k => k, v => dict[v]));

var respObj = JsonConvert.DeserializeObject<object>(json);

}

After converting the string to object we can handle it in serverside.

Refer the screenshot below.

Also please refer the Kb link of about how we have handle the FormCollection in server side.

Link: https://www.syncfusion.com/kb/5427/how-to-get-the-form-control-values-in-postback

Query 2: why this post looks bad?

Sorry for the inconvenience.

We have resolved the issue and the page is showing fine now.

Please let us know if you need further assistance.

Regards,

Manisankar Durai.

Need More Help?

Get personalized assistance from our support team.

Contact Support

7 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
MA Manolo
Platform
ASP.NET MVC
Control
Grid
Created On
Jan 11, 2017 12:34 PM UTC
Last Activity On
Jan 16, 2017 12:59 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support