[Solved] Rad Grid Column Width In Edit Mode

[Adipa Gunasekara]

Hi,

I am using following code to define telerik grid, since only one text column in the grid I want it to be 85% width and buttons to be one near each other. This works fine for edit and view operations.

<Columns>
            <telerik:GridBoundColumn Display="False" HeaderText="ID" UniqueName="idcolumn" DataField="RoleId">
            </telerik:GridBoundColumn>
            <telerik:GridEditCommandColumn  ButtonType="ImageButton" UniqueName="EditCommandColumn" CancelImageUrl="~/App_Themes/Gray/Images/grid_cancel.jpg"
                     EditImageUrl="~/App_Themes/Gray/Images/grid_edit.jpg"
                     UpdateImageUrl="~/App_Themes/Gray/Images/grid_update.jpg"
                     InsertImageUrl="~/App_Themes/Gray/Images/grid_update.jpg">
            </telerik:GridEditCommandColumn>
            <telerik:GridButtonColumn  ConfirmText="Are you sure you want to delete this Role?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn" ImageUrl="~/App_Themes/Gray/Images/grid_delete.jpg">
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn UniqueName="column" CommandName="Select"
                Text="Select" ImageUrl="~/App_Themes/Gray/Images/select.jpg"
                ButtonType="ImageButton" DataTextField="RoleId" >
            </telerik:GridButtonColumn>
            <telerik:GridBoundColumn HeaderText="Role Name" UniqueName="rolenamecolumn" DataField="RoleName">
                <HeaderStyle Width="85%" />
            </telerik:GridBoundColumn>
        </Columns>

I use external button to insert a row to the grid. with following code,

protected void rtbTopBar_ButtonClick(object sender, RadToolBarEventArgs e)
        {
            RadToolBarButton btn = (RadToolBarButton)e.Item;
            if (btn.CommandName == "New")
            {
                grdRoles.MasterTableView.IsItemInserted = true;
                grdRoles.Rebind();
            }
        }

however issue is when insert mode 2 buttons are shown they shown in vertical direction due to lack of width (update button on top of cancel button). I want to find out a way to change the width of a column only in edit or insert modes.

Many Thanks,
Adipa

[Shinu]

Hello Adipa,

You can check for edit mode/insert mode inside ItemDataBound event and set the width property to 85 percentage.

C#:

protected void RadGrid3_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
  {
  if ((e.Item.OwnerTableView.IsItemInserted && e.Item is GridEditFormInsertItem))
  {
    ((TextBox)((GridEditFormInsertItem)e.Item)["rolenamecolumn"].Controls[0]).Width = Unit.Percentage(85);
  }
  else if (e.Item is GridEditFormItem && (e.Item.IsInEditMode))
  {
    ((TextBox)((GridEditFormItem)e.Item)["rolenamecolumn"].Controls[0]).Width = Unit.Percentage(85);
  }
  }

Regards
Shinu

[Adipa Gunasekara]

hi Shinu,

Thanks for the answer however it does not works, since e.Item is  a CommandItem always and not the Items you have checked in the code. So it is not possible to get the column hence the width cannot be set at the edit mode.

[Shinu]

Hi,

In which event you are trying the code? Could you paste the code that you tried?

Regards
Shinu

[Adipa Gunasekara]

Hi Shinu,

I managed to solve the problem with some changes to your code,
I put it here for reference for anyone interested.

protected void grdRoles_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if ((e.Item.OwnerTableView.IsItemInserted && e.Item is GridDataInsertItem))
            {
                ((GridDataInsertItem)e.Item)["EditCommandColumn"].Width = Unit.Percentage(20);
            }
            else if (e.Item is GridDataItem && (e.Item.IsInEditMode))
            {
                ((GridDataItem)e.Item)["EditCommandColumn"].Width = Unit.Percentage(20);
            }
        }

Thank you very much for the help.

Many Thanks,
Adipa