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

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>