Not able to close Edit Form in Telerik RadGrid

Question

I am trying to insert new item in RadGrid using ItemCommand event. But unable to close the Edit Form after this.

Here is code in my aspx-

<telerik:RadGrid ID="rgItems" Skin="Metro" runat="server" AutoGenerateColumns="false" Width="100%"
    AllowAutomaticInserts="true"
    MasterTableView-CommandItemSettings-ShowRefreshButton="false"
    OnNeedDataSource="rgItems_NeedDataSource" OnItemCommand="rgItems_ItemCommand">

    <MasterTableView CommandItemDisplay="Top" AllowAutomaticInserts="true" CommandItemSettings-ShowAddNewRecordButton="true">
        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <asp:Panel ID="pnlNewItem" runat="server" DefaultButton="btnInsert">
                    <div class="form-group">
                            <asp:TextBox ID="txtClass" runat="server" CssClass="form-control" placeholder="Enter Class" Text='<%# Eval("Class") %>'></asp:TextBox>
                    </div>
                    <div class="form-group">
                            <asp:TextBox ID="txtWeight" runat="server" CssClass="form-control" placeholder="Enter Weight" Text='<%# Eval("Weight") %>'></asp:TextBox>
                    </div>

                    <div class="box-footer">
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" class="btn btn-default" CommandName="Cancel" />
                        <asp:Button ID="btnInsert" runat="server" class="btn btn-info pull-right"
                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                            Text='<%# (Container is GridEditFormInsertItem) ? "Add Item" : "Update" %>' />
                    </div>
                </asp:Panel>
            </FormTemplate>
        </EditFormSettings>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Class">
                <ItemTemplate>
                    <asp:Label ID="lblClass" runat="server" placeholder="Enter Class" Text='<%# Eval("Class") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="Weight">
                <ItemTemplate>
                    <asp:Label ID="lblWeight" runat="server" placeholder="Enter Weight" Text='<%# Eval("Weight") %>'></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Here is code in ItemCommand event-

protected void rgItems_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{

        DataTable dtItems_Global = new DataTable();
        dtItems_Global.Columns.Add(new DataColumn("Class", typeof(string)));
        dtItems_Global.Columns.Add(new DataColumn("Weight", typeof(string)));

        if (rgItems.Items.Count > 0)
        {
            foreach (GridDataItem gdi in rgItems.Items)
            {
                DataRow drItem = dtItems_Global.NewRow();
                drItem["Class"] = (gdi.FindControl("lblClass") as Label).Text;
                drItem["Weight"] = (gdi.FindControl("lblWeight") as Label).Text;

                dtItems_Global.Rows.Add(drItem);
            }
        }
    switch (e.CommandName)
    {
        case "PerformInsert":
            TextBox txtItemClass = (e.Item.FindControl("txtClass") as TextBox);
            TextBox txtItemWeight = (e.Item.FindControl("txtWeight") as TextBox);

            DataRow drItem = dtItems_Global.NewRow();
            drItem["Class"] = txtItemClass.Text;
            drItem["Weight"] = txtItemWeight.Text;
            dtItems_Global.Rows.Add(drItem);

            rgItems.Rebind();
            break;
    }
}

Answer 1

I would like to recommend using OnInsertCommand, OnUpdateCommand and OnDeleteCommand separately.

It is much more cleaner than using switch statement for each command.

<telerik:RadGrid ID="rgItems" 
   ... 
   OnItemCommand="REMOVE THIS EVENT"
   OnInsertCommand="rgItems_InsertCommand"
   OnUpdateCommand="rgItems_UpdateCommand"           
   OnDeleteCommand="rgItems_DeleteCommand">
   <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id"> 
     Make sure Id is the unique Id in your database - normally primary key.
</telerik:RadGrid>

protected void rgItems_InsertCommand(object source, GridCommandEventArgs e)
{
   var item = e.Item as GridEditFormItem;
   var txtClass= item.FindControl("txtClass") as TextBox;
   // Insert to database - Do not need to call rgItems.Rebind(); here.
}

protected void rgItems_UpdateCommand(object source, GridCommandEventArgs e)
{
   var item = e.Item as GridEditFormItem;    
   int id = Convert.ToInt32(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["Id"]);   
   var txtClass= item.FindControl("txtClass") as TextBox;    
   // Update - Do not need to call rgItems.Rebind(); here.
}

protected void rgItems_DeleteCommand(object source, GridCommandEventArgs e)
{
   int id = Convert.ToInt32(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["Id"]);     
   // Delete - Do not need to call rgItems.Rebind(); here.
}

Answer 2

Can you include an empty edit column as show below in the columns markup of RadGrid? That is missing.

<telerik:GridEditCommandColumn>
</telerik:GridEditCommandColumn>

Also, after adding above markup, your code-behind for ItemCommand should also include following code.

protected void rgItems_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.InitInsertCommandName) //"Add Item" button clicked
        {
            GridEditCommandColumn editColumn = (GridEditCommandColumn)rgItems.MasterTableView.GetColumn("EditCommandColumn");
            editColumn.Visible = false;
        }
        else if (e.CommandName == RadGrid.RebindGridCommandName && e.Item.OwnerTableView.IsItemInserted)
        {
            e.Canceled = true;
        }
        else
        {
            GridEditCommandColumn editColumn = (GridEditCommandColumn)rgItems.MasterTableView.GetColumn("EditCommandColumn");
            if (!editColumn.Visible)
                editColumn.Visible = true;
        }
    }

If above does not resolve it, then use the simple approach of code below in ItemInserted event.

e.KeepInInsertMode = false; 
rgItems.EditIndexes.Clear(); 
rgItems.Rebind();