Column resizing with self-referencing hierarchy

[Matt Okimura]

I have a RadGrid with a self-referencing dataset, and while it expands and collapses fine, column resizing is not working with multiple levels of data.  If the entire grid is collapsed, resizing works fine, but when they are expanded, the cell contents of the highest level rows get resized but the child levels are totally out of alignment.  Is this a known issue?

[Iana Tsolova]

Hello Richard,

Indeed, the described behavior is rather expected. When you drag the column header to resize it, the column of the particular grid table view is resized but the columns in its nested grid table views. If you want the columns in the nested grid table views to be resized when you resize a column of the MasterTableView, you will need to use custom javascript for that purpose. You can handle the grid OnColumnResized client-side event, and change the width of the desired columns respectively.

Try it out and let me know if need further assistance.

All the best,
Iana
the Telerik team

[Sfayet]

Column resizing with self-referencing hierarchy

I am new in Telerik and facing the similar problem with Self-Referencing grid when expanded the details table, the master table row get resized but details table grid is not align accordingly. Here is the code block ---

 

  var gColName = null;           

  function onColumnResized(sender, args)

    {                      

     var column = args.get_gridColumn();

     var uniqueName = column.get_uniqueName();

     if(gColName == uniqueName)

      {

         return;

      }               

           

    var grid = $find("<%=ctl_GridView.ClientID %>");

    var masterTableView = sender.get_masterTableView();

    var cols = masterTableView.get_columns();

    var tableWidth = sender.get_element().scrollWidth;

    var detailTables = sender.get_detailTables();

    var detailTableCount = detailTables.length;

                

for (detailTableIndex=0; detailTableIndex < detailTableCount; detailTableIndex++)

   {

    var detailTable = detailTables[detailTableIndex];

    if(detailTable.get_dataItems().length > 0)

      {

        var columns = detailTable.get_columns();

         for(var k=0; k < columns.length; k++)

            {

            if(columns[k].get_uniqueName() == uniqueName)

             {

              columns[k].set_resizable(true);

              gColName = columns[k].get_uniqueName();

              var width = cols[k].get_element().clientWidth ;

              detailTable.resizeColumn(k, width);

              gColName = null;

              columns[k].set_resizable(false);

 

              break;

              }

            }

      }             

  }

  sender.get_element().style.width = tableWidth + "px"; 

 }

Please help.
Thanks

Rabiul

[Sfayet]

Hi Lana
the Telerik team

please send me your feedback.
In my above code it is consistently increasing the column of the child either I reduce or increase the size of the parent column

Thanks

Rabiul

[Iana Tsolova]

Hi Sfayet,

Can you debug the code and confirm there the column widths are properly set?

Greetings,
Iana
the Telerik team

[Jose]

This example works if you add a couple of lines:

Add a tag in the aspx file:

<ClientSettings >
    <ClientEvents    OnColumnResized="OnColumnResized"  />
     <Resizing  AllowColumnResize="true" />
</ClientSettings>

Add a js script to the aspx: (It is almost the same script)

var gColName = null;

 

function OnColumnResized(sender, args) {

 

    var column = args.get_gridColumn();

    var uniqueName = column.get_uniqueName();

    if (gColName == uniqueName) {

        return;

    }

    var masterTableView = sender.get_masterTableView();

    var cols = masterTableView.get_columns();

    var tableWidth = sender.get_element().scrollWidth;

    var detailTables = sender.get_detailTables();

    var detailTableCount = detailTables.length;



    for (var detailTableIndex = 0; detailTableIndex < detailTableCount; detailTableIndex++) {

        var detailTable = detailTables[detailTableIndex];

        if (detailTable.get_dataItems().length > 0) {

            var columns = detailTable.get_columns();

            for (var k = 0; k < columns.length; k++) {

                if (columns[k].get_uniqueName() == uniqueName) {

                    columns[k].set_resizable(true);

                    gColName = columns[k].get_uniqueName();

                    var width = cols[k].get_element().clientWidth;

                    detailTable.resizeColumn(k, width);

                    gColName = null;

                    columns[k].set_resizable(false);

 

                    break;

                }

            }

        }

    }

    sender.get_element().style.width = tableWidth + "px";

}