Insert row in RadGrid with Edit Form - how to put the edit form at the bottom of the grid?

[naru]

Hello everyone!

I've been trying out inserting and editing with the RadGrid's edit form ("in" the Grid), and I'm very pleased with the results so far. Here's a sample of what I've achieved:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <div style="width: 500px;">
        <telerik:RadGrid ID="RadGrid1" runat="server" OnInsertCommand="RadGrid1_InsertCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
            OnItemCommand="RadGrid1_ItemCommand">
            <MasterTableView AutoGenerateColumns="false" CommandItemDisplay="Bottom">
                <Columns>
                    <telerik:GridBoundColumn UniqueName="Number" DataField="Number" HeaderText="Number">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Title" DataField="Title" HeaderText="Title">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Description" DataField="Description" HeaderText="Description">
                    </telerik:GridBoundColumn>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
                    </telerik:GridEditCommandColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <table>
                            <tr>
                                <td class="textb">
                                    Number
                                </td>
                                <td>
                                    <telerik:RadNumericTextBox ID="RadNumericTextBoxNumber" runat="server" Text='<%# Bind("Number") %>'
                                        NumberFormat-DecimalDigits="0" DataType="System.Int32">
                                    </telerik:RadNumericTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td class="textb">
                                    Title
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="RadTextBoxTitle" runat="server" MaxLength="1024" Text='<%# Bind("Title") %>'>
                                    </telerik:RadTextBox>
                                </td>
                            </tr>
                            <tr>
                                <td class="textb">
                                    Description
                                </td>
                                <td>
                                    <telerik:RadTextBox ID="RadTextBoxDescription" runat="server" MaxLength="1024" TextMode="MultiLine"
                                        Text='<%# Bind("Description") %>'>
                                    </telerik:RadTextBox>
                                </td>
                            </tr>
                        </table>
                        <br />
                        <br />
                        <asp:Button CommandName="Cancel" ID="Button1" runat="server" Text="Cancel"></asp:Button>
                        <asp:Button ID="Button2" Text="OK" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
    </div>

And the code-behind:

protected RegistrationLine DefaultRegistrationLine()
    {
        RegistrationLine dr  = new RegistrationLine();

        dr = new RegistrationLine();
        dr.Number = 0;
        dr.Title = "";
        dr.Description = "";
        return dr;
    }

    protected class RegistrationLine
    {
        public int Number { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            tempListRegistrationLines = RadGridBindStartUpData();
        }
    }

    protected static List<RegistrationLine> tempListRegistrationLines;

    private List<RegistrationLine> RadGridBindStartUpData()
    {
        List<RegistrationLine> list = new List<RegistrationLine>();

        RegistrationLine rl;

        rl = new RegistrationLine();
        rl.Number = 1;
        rl.Title = "A";
        rl.Description = "aaa";
        list.Add(rl);

        rl = new RegistrationLine();
        rl.Number = 2;
        rl.Title = "B";
        rl.Description = "bbb";
        list.Add(rl);

        rl = new RegistrationLine();
        rl.Number = 3;
        rl.Title = "C";
        rl.Description = "ccc";
        list.Add(rl);

        return list;
    }


    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = tempListRegistrationLines;
    }

    protected void RadGrid1_InsertCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
    {
        GridEditableItem editedItem = e.Item as GridEditableItem;

        List<RegistrationLine> table = tempListRegistrationLines;

        RegistrationLine newRow = new RegistrationLine();

        RadTextBox rtb;
        rtb = (RadTextBox)editedItem.FindControl("RadTextBoxTitle");
        newRow.Title = rtb.Text;
        rtb = (RadTextBox)editedItem.FindControl("RadTextBoxDescription");
        newRow.Description = rtb.Text;

        RadNumericTextBox number = (RadNumericTextBox)editedItem.FindControl("RadNumericTextBoxNumber");
        newRow.Number = number.Value.HasValue ? Convert.ToInt32(number.Value.Value) : 0;

        table.Add(newRow);
    }

    protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
    {
        GridEditableItem editedItem = e.Item as GridEditableItem;
        int idx = e.Item.ItemIndex;

        List<RegistrationLine> table = tempListRegistrationLines;

        table.RemoveAt(idx);

        RegistrationLine newRow = new RegistrationLine();

        RadTextBox rtb;
        rtb = (RadTextBox)editedItem.FindControl("RadTextBoxTitle");
        newRow.Title = rtb.Text;
        rtb = (RadTextBox)editedItem.FindControl("RadTextBoxDescription");
        newRow.Description = rtb.Text;

        RadNumericTextBox number = (RadNumericTextBox)editedItem.FindControl("RadNumericTextBoxNumber");
        newRow.Number = number.Value.HasValue ? Convert.ToInt32(number.Value.Value) : 0;

        table.Insert(idx,newRow);
    }

    protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        string strCommand =  e.CommandName;

        if (strCommand == RadGrid.InitInsertCommandName)
        {
            // prepare for insert: default data
            e.Canceled = true;
            RegistrationLine rl = DefaultRegistrationLine();
            e.Item.OwnerTableView.InsertItem(rl);
        }

        if (strCommand == "Edit")
        {
            GridEditFormItem editItem = e.Item as GridEditFormItem;

            // nothing
        }
    }

However, I would like to have the insert form at the bottom of the Grid, instead of at the top. So my question is: is there any easy way to do this?

Thanks in advance for your suggestions.

[Pavlina]

Hi,

You can examine the second grid from this online example which demonstrates how you can achieve the desired functionality.

Regards,
Pavlina
the Telerik team

[naru]

Hello Pavlina,

Thankyou very much for your quick response! And that is exactly what I wanted :)

I've been through the Telerik demos and examples for the RadGrid, but somehow missed that... Anyway, got it working as desired with:

<MasterTableView AutoGenerateColumns="false" CommandItemDisplay="Bottom" InsertItemDisplay="Bottom">

Thanks!