IQODE Limited

Recently I was working on a project that extensively used Telerik RadControls for ASP.Net AJAX and we were experiencing some Internet Explorer CSS rendering weirdness across versions 6,7 and 8 whenever an AJAX call was made. My immediate thought was the usual IE float clearing bug, a double margin bug or, let's be honest, one of any number of irritating IE CSS bugs . The strange thing was each IE version exhibited slightly different rendering issues which, after some thought, made me think it was something else.

After some rummaging around with the wonderful Firebug I noticed that all of the style sheets within the IE conditional comments were being attached after each AJAX callback. So the style sheet for IE6 was being attached when viewed in IE7 and IE8 and so on. Hmmm.

It seems that the RadAjaxManager doesn't handle IE conditional comments. After an Ajax request the RadAjaxManager attaches all style sheets referenced within IE conditional comments mark-up and the CSS is applied.

Luckily there are some workarounds which we were able to use. In my case I was able to set the EnablePageHeadUpdate property to false so the head content was not updated for each Ajax callback.

Here's a little gotcha that had be scratching my head for a moment. I was testing the Grid component of the excellent Ext JS framework when I ran into a problem loading the JSON result into the grid.

It seemed simple enough - populate the grid from JSON data returned by a controller action method. When I ran the code the grid wasn't populated: the Ext JSONReader was throwing an error "root is undefined". I checked and double checked everything but could not see what the problem was.

Here's the JavaScript to create the JsonStore for the grid:

      var ds = new Ext.data.JsonStore({
      url: '/Home/GetData',
      totalProperty: 'totalRecords',
      root: 'requests',
      id: "ReqNo",
      fields: ['Division', 'Department'],
      listeners: {
      loadexception: function(proxy, store, response, e) {
      alert(e.message);
      }
      }
      }); 

Here's the controller method that returns the JSON:

      public JsonResult GetData(int? start, int? limit)
      {
      limit = limit ?? 25;
      start = start ?? 0;


      string dataPath = HttpContext.Server.MapPath("~/Data/TestData.xml");
      XDocument xDoc = XDocument.Load(dataPath);
      var results = from requests in xDoc.Descendants("requests")
      select new
      {
      totalRecords = requests.Elements("request").Count(),
      requests = (from request in requests.Elements("request")
      select new NBWeb.Models.Request
      {
      Division = request.Element("Division").Value,
      Department = request.Element("Department").Value
      }).Skip((int)start).Take((int)limit)
      };
      return this.Json(results);
      }

And here's an example of the JSON it emits:

      [{
      "totalRecords":200,
      "requests":[
      {"Division":"Division 1","Department":"Department 5",},
      {"Division":"Division 2","Department":"Department 4",},
      {"Division":"Division 3","Department":"Department 5",},
      {"Division":"Division 4","Department":"Department 6",},
      ]
      }]

      

Eventually, upon examining the JSON for the tenth time, it dawned on me - the entire JSON data was nested in a redundant outer array. So the JsonStore root property was not being found - it was looking for:

obj["requests"]

but would need to look for:

obj[0]["requests"]

So it was the controller returning slightly malformed JSON. It's a bug in my code - I need to return the inner result of the Linq select rather than the entire result. So I need to take the FirstOrDefault record from the results, like so:

      public JsonResult GetData(int? start, int? limit)
      {
      limit = limit ?? 25;
      start = start ?? 0;

      string dataPath = HttpContext.Server.MapPath("~/Data/TestRequests2500.xml");
      XDocument xDoc = XDocument.Load(dataPath);
      var results = (from requests in xDoc.Descendants("requests")
      select new
      {
      totalRecords = requests.Elements("request").Count(),
      requests = (from request in requests.Elements("request")
      select new NBWeb.Models.Request
      {
      Division = request.Element("Division").Value,
      Department = request.Element("Department").Value,
      }).Skip((int)start).Take((int)limit)
      }).FirstOrDefault();

      return this.Json(results);
      }

And here's the corrected JSON it emits (note the absence of the outer square brackets):

      {
      "totalRecords":200,
      "requests":[
      {"Division":"Division 1","Department":"Department 5",},
      {"Division":"Division 2","Department":"Department 4",},
      {"Division":"Division 3","Department":"Department 5",},
      {"Division":"Division 4","Department":"Department 6",},
      ]
      }

Seems like a dumb mistake to make but it took a bit of debugging to find it - hopefully this post will save someone out there some time.