How can i display FormTemplate at bottom of grid?

[Muzaffar]

Hi
I have a grid that displays some records and user can add new records after clicking add new record from grid header and a new fortemplate defined is displayed to the user as of the following
   <EditFormSettings EditFormType="Template">
                <FormTemplate>
                    <table>
                        <tr>
                            <td>
                                <strong>Description</strong></td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <asp:TextBox ID="txtShortDescription" runat="server" Text='<%# Bind( "ShortDescription" ) %>'
                                    Width="750px" Height="70px" TextMode="MultiLine" BackColor="LightYellow"></asp:TextBox>
                                    <br />
                                <asp:RequiredFieldValidator ID="rvGoalAlready" runat="server" ErrorMessage="* Goal already exists" ControlToValidate="txtShortDescription" EnableClientScript="False" ValidationGroup="Desc" style="white-space :nowrap"></asp:RequiredFieldValidator><br />
                                    <asp:RequiredFieldValidator
                                        ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtShortDescription" style="white-space :nowrap"
                                        ErrorMessage="* Goal Description is required" ValidationGroup="Desc"></asp:RequiredFieldValidator></td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td colspan="2">
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>
                                <asp:Button ID="btnUpdate" Text='Save & Add Another'
                                    runat="server" CommandName='Insert'
                                    ValidationGroup="Desc" Visible ="false"></asp:Button>
                                <asp:Button ID="btnSaveClose" Text='Save & Close'
                                    runat="server" CommandName="Update"
                                    ValidationGroup="Desc"></asp:Button>
                                <asp:Button ID="btnInsertSaveAndClose" runat="server" CommandArgument="2" CommandName="Insert"
                                    Text="Save & Close" ValidationGroup="Desc" />
                                or
                                <asp:LinkButton ID="LinkButton1" Text="Cancel" runat="server" CausesValidation="False"
                                    CommandName="Cancel" ForeColor="Maroon"></asp:LinkButton>
                            </td>
                        </tr>
                    </table>
                </FormTemplate>

And it displays successfully but my problem is that i want to display records on top and at bottom new form template how can i do this? And what about if records are high and if new template is displayed at bottom the user will not be able to see it so we will need to take the scroll down after new template is shown? Please help me how this can be done?

Regards
Muzaffar Ali

[Veli]

Hi Muzaffar,

The GridTableView object has the InsertItemDisplay property that specifies where the insert item should be displayed. So you can set:

<MasterTableView InsertItemDisplay="Bottom">

and now your insert item will display on the bottom of all items. To scroll it into view, here is the approach you can take. I see that you define a <table> in your FormTemplate. Simply set an ID for the table (runat="server" is important here too):

<table id="formTable" runat="server">

Now, you need to attach a client-side event handler to RadGrid's GridCreated event:

<ClientSettings>
    <ClientEvents OnGridCreated="gridCreated" />
</ClientSettings>

Finally, in  the gridCreated() method, we check if an item is inserted, find the edit form table and scroll to it:

function gridCreated(sender, args)
{
    if (sender.get_masterTableView().get_isItemInserted())
    {
        setTimeout(function()
        {
            $telerik.findElement(sender.get_element(), "formTable").scrollIntoView();
        }, 0);
    }
}

This is all. Now your insert item shows at the bottom and the parent scrollable container scrolls to it if it is not visible.

Greetings,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.