Is this a known issue?

[Amar]

Hi,

I am getting this weird behaviour when i refresh the radgrid during an ajax call. Basically the first cell which is the row selection column, automatically gets a colspan of 2 which breaks the table structure.

problem

I have written a hack for this, but would prefere to not have to write javascript to fix the single cell. Has anyone come across this behaviour? If so, What was the problem?

function GridCreated(sender, eventArgs) {

    var gridID = sender.get_id();
    if (gridID != null) {
        var grid = $('#' + gridID);
        var td = $("td[colSpan=2]", grid);
        $(td).attr("colSpan",1);
    }
}

Thanks

Amar

[Sebastian]

Hello Amar,

Unfortunately I cannot say for certain what might be the exact reason for the problem you are currently facing as we have not been contacted with regards to a similar problem before.

Can you please provide a live url where the discrepancy can be observed and verify that you are using the latest version 2008.3.1314 of RadControls for ASP.NET AJAX in your project? We will do our best to advice you further after that.

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Amar]

Hi,

I think i am a step closer to understanding this issue. I could raise a support ticket but it wouldnt do anything as i would not be able to supply the source code or even a sample project, i tried recreating it outside the app i am experiencing the problem in and have not been able to.

The issue as far as i can understand is to do with the "NoRecordsTemplate".

Lets assume that i have 2 columns in the datagrid as shown in the image http://www.asingh.com/radgrid.png

Then, when the grid is initially rendered, the no records template is added to the masterview table and the first TD gets a colspan of 2.

When i do fill my datasource with records and rebind the grid, it then somehow remembers the first TD and its Colspan and uses that as the first row.Not only does the span of the td matches the NoRecordsDefaultTempate class but also the style of the td also matches.

This i know for sure is causing the issue because, the colspan value is always equal to the number of columns my grid has.

[Nikolay Rusev]

Hello Amar,

Unfortunately I was unable to replicate this issue. I've prepared sample application and it seems to be working properly. You can find it attached to this post.

Can you try replicating the issue on that application?

Thanks.

Sincerely yours,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Tonino]

Hi Amar

I'm having exactly the same problem! I'm using RadGrid Version 5.1.5 of ASP.NET.

Have you found a solution for the problem by now?

When I first render the grid with one record the markup for the first column, first row is <td>. Then I delete the record. The grid correctly displayes 'No records'. I then add a record and the first column in the first row is rendered as <td colspan="4" style="text-align:left;"> !

I also changed "td[colSpan=2]" to "td[colSpan=4]" in your workaround but it did not work.

Any ideas?

Best regards,
Tonino.

[Amar]

phew, atleast i am not going insane.  Here is how i did the workaround but i am using the very latest ajax version of radgrid.

You need to consume the GridCreated event of the RadGrid and assign that GridCreated function to it. I am using jquery.

Basically, using jquery i get a reference to the datagrid element. Then i query for the first td which has a colSpan attribute. I then set the colSpan to 1. This way it doesnt matter what the colSpan attribute is, it will be reset to 1.
Ofcourse if the colSpan attribute is supposed to be used for something e.g. special cell layout then you are in trouble but if its a normal grid with cell spanning just one column then the code below should work fine.

function GridCreated(sender, eventArgs) {

    var gridID = sender.get_id();
    if (gridID != null) {
        var grid = $('#' + gridID);
        var td = $("td:first[colSpan]", grid);
        $(td).attr("colSpan", 1);
    }
}

[Tonino]

Hi Amar

Thank you for the explanation. As I'm not using jquery your workaround is not suitable for me. Is there another way to reset the colspan?

Regards,
Tonino.

[Amar]

function loopThroughTable() {
   rows=document.getElementById('table1').getElementsByTagName("TR");
   for (var j=0; j<rows.length; j++)  {
    if (j==2) {
    cells=rows[j].getElementsByTagName("TD");
    for (var i=0; i<cells.length; i++)  {
      cells[i].style.backgroundColor='#f00';
      alert(cells[i].innerHTML);
    }
   }
  }
}

found the above from google. You could get a reference to the table rendered by the radgrid. Then use the example above to loop through the rows (you dont even need to loop through rows just find the first row and first cell)  and see if the colspan attribute is there. After that you can reset it.

[Tonino]

Hi Amar

Thanks for your help.

In the rendered HTML I don't see an ID for the table representing the grid, so I don't know how to use the function you posted.

Anyway, I just opened a support ticket and provided a example to reproduce the problem.
I will post the solution here.

Regards,
Tonino.

[Tonino]

Here the workaround provided by telerik that works with the old controls (tested with RadGrid Version 5.1.5 of ASP.NET):

      function GridCreated(sender)
      {
         var gridID = this.ClientID;
         if (gridID != null) {
            var grid = document.getElementById(gridID);
            var tds = grid.getElementsByTagName("td");
            if (tds.length > 1 && tds[0].colSpan && tds[0].colSpan > 1 &&
               (tds[0].parentNode.className.indexOf("GridRow_") != -1 || tds[0].parentNode.className.indexOf("GridAltRow_") != -1))
            {
               tds[0].colSpan = "1";
            }
         }
      }

Tonino.

[Tonino]

Here the workaround provided by Telerik for the old controls (tested with RadGrid Version 5.1.5 of ASP.NET):

      function GridCreated(sender)
      {
         var gridID = this.ClientID;
         if (gridID != null) {
            var grid = document.getElementById(gridID);
            var tds = grid.getElementsByTagName("td");
            if (tds.length > 1 && tds[0].colSpan && tds[0].colSpan > 1 &&
               (tds[0].parentNode.className.indexOf("GridRow_") != -1 || tds[0].parentNode.className.indexOf("GridAltRow_") != -1))
            {
               tds[0].colSpan = "1";
            }
         }
      }

Regards,
Tonino.

[Tonino]

Hi Amar

I finally got rid of the classic RadGrids and had to look up this workaround.

Did Telerik not fix this bug? I'm using Version 2014.3.1209.40 of the controls

Tonino.

[Viktor Tachev]

Hi Tonino,

There have been numerous improvements over the classic RadControls. If there was an issue it is most likely no longer observed.

With that said, in order to be sure I would recommend to download the latest version of the controls and test how it works in your scenario. The current version is 2016.1.113. Give it a try and see how it works for you.

In case you have additional queries regarding the controls please open a separate thread or support ticket.

Regards,
Viktor Tachev
Telerik

[Tonino]

Hi Viktor

In version 2014.3.1209.40 the bug is still present. At the moment I've no time to test with the newest version. Workaround suggestet by Amar is working.

Regards,

Tonino.

[Viktor Tachev]

Hello Tonino,

In case you find the time please test the behavior with the latest available release of the controls.

If you have any issues please a sample runnable project where they can be reproduced so we can debug the code.

Regards,
Viktor Tachev
Telerik