How to resolve JSON serialization error in Telerik MVC grid to populate large dataset

For the past year, I have been working with Telerik MVC extensions. When I initially started, it seemed a good idea to use these controls event though I was aware that Telerik no longer supported these controls. Down the line,  I came across several instances where I wished I had used some other controls to begin with. Anyway, that is not to say that these controls are not handy. They are very useful if you want to get an application ready with few controls here and there, without having to go into the details.

But sometimes it is just a pure headache. I encountered an issue where I got a “JSON serialization error” when trying to load a large data-set into the telerik mvc grid using Ajax binding. The Data Access layer and the back-end scripts seemed to be populating the right data-set into the model. But when the exception occurred when the model had to be rendered into the telerik mvc grid.

JsonException

I tried increasing the maxLength in the web.config (as suggested in StackOverFlow posts) but that did not resolve the issue. The first assumption was that the since the JsonResult class caused the serialized JSON string to exceed the default maximum string of the JavaScriptSerializer class, this should have fixed the issue. Well, it did not fix the issue as the value of the MaxJsonLength only applies to the internal JavaScriptSerializer used by asynchronous communication layer to invoke Web services methods.

webconfig

So, we need to manually instantiate the JavaScriptSerializer within a custom JsonResult (of our own) and then set the MaxLength property to our desired value. By default, Telerik MVC grid uses 2,097,152 as the default value for the maximum JSON string length. So, we can increase this to a much larger value ( say, Int32.MaxValue = 2,147,483,647).

So, let’s create a custom JsonResult class and call it ‘CustomJsonResult’.

CustomJsonResult

Then, we need a factory class that will instantiate and return our CustomJsonResult object.

CustomJsonSerializer

Now, we need to register this factory class with the Telerik DI Framework in the Application_Start() in the gloabl.asax.

global_asax

Till here, we have set up a custom JsonResult and a custom JsonSerializer with the max length of json string set to Int32.MaxValue. Now, we will try to load a telerik mv grid with test data using ajax binding and the above JsonSerializer to ensure that we resolved the issue.

We have set up an Event model for test purpose as shown below.

Event_model

We have a TestController which will populate the model with test data and return a custom JsonResult which will bind to the telerik mvc grid.

TestController

In the Index view, we have a telerik mvc grid which binds to the list of events using Ajax binding.

Index

Once we run the project, we observe that we get the grid with the test data and no Json Serialization error!!!

Grid

References:

Advertisements

2 thoughts on “How to resolve JSON serialization error in Telerik MVC grid to populate large dataset

Leave a Reply to Ravindar Kumar Gupta Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s