Expanded option on 2nd column in RadGrid

Question

I have created a RADGrid in my project and i want the Expanded option on the 2nd column instead of the default 1st. Is it possible to do that?

Answer 1

That is not possible with RadGrid. The expand button is always going to be placed just before the first column in each row. However, with some templating as described below you can achieve this.

• If you wanted to expand on clicking the second column, then make the second column a GridTemplateColumn.
• The outer RadGrid should have only 2 columns with first columns being displayed like a regular column and second column being displayed as a collapsed RadGrid.
• In the template for this column, place a RadGrid that has hierarchy enabled and which binds to only the values for the row of first column.
• Then, you would end up with your requirement being implemented.

Note that you should bind the RadGrid in template column to same data source as the outer RadGrid in NeedDataSource event of RadGrid. The only difference would be the inner RdGrid would have hierarchy enabled and you would need to use appropriate events for implementing hierarchy for the inner RadGrid.

 protected void RadGrid2_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
 {
    (sender as RadGrid).DataSource = GetDataTable();
 }

Answer 2

I am posting another answer because it's quite different from what I had in my previous reply and putting both into one answer would be very confusing for the reader.

This solution achieves your requirement in a 100% manner as you can see in following screen shot. However, this is a highly customized solution and my previous reply is a good fit if you want to stick to only what's available out-of-the-box for RadGrid.

Main points to keep in mind are as below.

• You need to have jquery included for this to work. You can easily do this by using the embedded jquery that comes with Telerik control library. I have mentioned the markup that will automatically include embedded jquery in your page.
• I have assumed that you are using server-side binding for hierarchical RadGrid.
• You need to simply add JavaScript block shown below to your aspx page for this to work.
• I am moving the expand column to just before the 3rd column, but you can move it to any position by setting the newPosition variable to an appropriate value.
• In your scenario, you would set newPosition to 1, so expand column appears just before the second column.
• Note that when then expand column is shifted, then it's also necessary to shift the header of expand column else the column headers will not be aligned with their columns.

JavaScript for this solution

<script type="text/javascript">

    Sys.Application.add_load(function () {
        $ = $telerik.$;//make sure you can use $ symbol for embedded jquery
        var newPosition = 2;//set this to 1 or 2 or 3 etc.(but never 0) 
                            //depending on your requirement

        //gridClientId is  the server-side RadGrid1.ClientID property i.e. id of radgrid div element in rendered page
        //var gridClientId = "<%=RadGrid1.ClientId%>";
        var grid = $find(gridClientId);

        var dataItems = grid.get_masterTableView().get_dataItems();

        for (var i = 0; i < dataItems.length; i++) {

           //get the expand column for the the row with index i
            var row = $(grid.get_masterTableView().get_dataItems()[i].get_element());
            var expandColumn = row.find("td.rgExpandCol");

            //move the data row expand column
            expandColumn.detach().insertBefore(row.find("td:eq(" + newPosition + ")"));
            expandColumn.width(50);
        }

        //move the column header for expand column
        var headerRow = $(grid.get_masterTableView().HeaderRow);
        var headerExpandColumn = headerRow.find(".rgExpandCol");
        headerExpandColumn.detach().insertBefore(headerRow.find("th:eq(" + newPosition+ ")"));
        headerExpandColumn.width(50);

    });

</script>

Markup for including embedded jquery

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
  <Scripts>
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    <%!-- othert scripts of your page will go here -->
</telerik:RadScriptManager>