RadGrid Changing Edit Item Break ColumnEditor

[Felix]

My web page uses the following RadGrid.  The only codebehind is the RadGrid_NeedSource function which simply assigns a datatable to the RadGrid's dataSource.  I haven't wired up any of the Update/Insert/Delete functionality, but I'm not worried about that yet.

<telerik:RadGrid ID="RadGrid" runat="server" OnNeedDataSource="RadGrid_NeedSource" AllowSorting="true"
    AllowPaging="true" PageSize="5" AutoGenerateColumns="false"
    AllowMultiRowEdit="false" AllowMultiRowSelection="false" >
    <MasterTableView TableLayout="Auto" EditMode="InPlace" CommandItemDisplay="Top" InsertItemDisplay="Top"
        InsertItemPageIndexAction="ShowItemOnCurrentPage">
        <Columns>
                <telerik:GridEditCommandColumn CancelImageUrl="../App_Themes/Default/buttons/grid_cancel.png" UniqueName="TestCommandCol"
                    UpdateImageUrl="../App_Themes/Default/buttons/grid_update.png" ButtonType="ImageButton"
                    EditImageUrl="../App_Themes/Default/buttons/grid_edit.png" InsertImageUrl="../App_Themes/Default/buttons/grid_add.png" />

                <telerik:GridBoundColumn DataField="Note" HeaderText="Note" ColumnEditorID="NoteEdit" UniqueName="NoteCol" />
                <telerik:GridNumericColumn DataField="Ordinal" HeaderText="Sort Order" UniqueName="SortCol" ColumnEditorID="SortEdit"
                    DefaultInsertValue="99" />
                <telerik:GridCheckBoxColumn DataField="ShowOnWebsite" HeaderText="Show On Website" UniqueName="ShowOnWebsiteCol"
                    DefaultInsertValue="true" />
                <telerik:GridClientDeleteColumn ButtonType="ImageButton" UniqueName="DeleteCol"
                    ImageUrl="../App_Themes/Default/buttons/grid_delete.png" />
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:GridTextBoxColumnEditor ID="TestNoteEdit" runat="server" TextBoxMode="MultiLine" />
<telerik:GridNumericColumnEditor ID="TestSortEdit" runat="server" NumericTextBox-IncrementSettings-InterceptMouseWheel="true"
    NumericTextBox-IncrementSettings-InterceptArrowKeys="true" NumericTextBox-IncrementSettings-Step="1" NumericTextBox-MaxValue="99"
    NumericTextBox-MinValue="0" NumericTextBox-NumberFormat-DecimalDigits="0" NumericTextBox-Width="50px"
    NumericTextBox-ShowSpinButtons="true" />

The grid loads up nice and pretty and looks great for almost everything.  When I click to edit an item, the numeric "SortCol" shows a slim numeric box with up and down controls next to it, and it only allows numbers between 0 and 99.  When, without explicitly updating or canceling the current Edit Item, I click to edit another item (MultiRowEdit is false), it cancels the current edit item and sets the item I clicked on to be the new Edit Item.  So far so good, except that the new Edit Item's "SortCol" shows as a clunky oversized textbox that doesn't have the bells and whistles of the first Edit Item.  A similar display issue occurs on the "NoteCol".  This only happens when clicking from one Edit Item to another Edit Item (including the Insert Item); if you manually cancel out of an Edit Item, then everything works fine.

Tangentially: When I click to "Add New Record" while I already have another row open as an Edit Item, it creates the insert row but does not close/cancel the current Edit Item as one would expect.  Similarly, if I click "Add New Record" and then try to edit a row with the Insert Row still visible, both rows appear as ediatble.  I have tried a few sloppy hacks to fix this, but I was wondering if there was a preferred method for truly allowing only one Edit Item at a time (including Insert).

Thanks,
--Felix

[Veli]

Hi Felix,

Declarative column editors are used to style the editor controls only. Changing properties of inner controls inside the editor would not work, as inner controls and properties are not copied between column editors.

If you need to configure the column editors, the suggested approach is to use RadGrid's ItemCreated/ItemDataBound event to find the column editors when their editor controls are initialized:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editItem = (GridEditableItem)e.Item;
        GridTextBoxColumnEditor nameEditor = (GridTextBoxColumnEditor)editItem.EditManager.GetColumnEditor("NoteCol");
        nameEditor.TextBoxMode = TextBoxMode.MultiLine;

        GridNumericColumnEditor valueEditor = (GridNumericColumnEditor)editItem.EditManager.GetColumnEditor("SortCol");
        valueEditor.NumericTextBox.ShowSpinButtons = true;
        valueEditor.NumericTextBox.IncrementSettings.InterceptMouseWheel = true;
        valueEditor.NumericTextBox.IncrementSettings.InterceptArrowKeys = true;
        valueEditor.NumericTextBox.IncrementSettings.Step = 1;
        valueEditor.NumericTextBox.MinValue = 0;
        valueEditor.NumericTextBox.MaxLength = 99;
        valueEditor.NumericTextBox.NumberFormat.DecimalDigits = 0;
        valueEditor.NumericTextBox.Width = Unit.Pixel(50);
    }
}

This will ensure the editor controls are modified right on place after they are initialized.

As for the edit and insert form question, by default, RadGrid treats the edit forms and the insert form separately. Therefore, a single edit item does not prevent the insert item from showing. If you want a single edit OR insert form ever, you can use RadGrid's ItemCommand event to close the previous opened form:

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.InitInsertCommandName)
    {
        e.Item.OwnerTableView.ClearEditItems();
    }

    if (e.CommandName == RadGrid.EditCommandName && e.Item.OwnerTableView.IsItemInserted)
    {
        e.Item.OwnerTableView.IsItemInserted = false;
    }
}

Both of these suggestions are demonstrated in the attached test page.

Regards,
Veli
the Telerik team

[Felix]

That worked perfectly.
You are fantastic.
Thank you.

[Shubh]

Hi,
How can I fix the maxLength(i.e. maximum number of characters the user can type) of GridTextBoxColumnEditor ?

[Maria Ilieva]

Hello Shubh,

You could set the MaxLength property in code behind like this:

GridTextBoxColumnEditor1.TextBoxControl.MaxLength = 6;

All the best,
Maria Ilieva
the Telerik team