External Edit form without CommandItemTemplate

[Dave]

Hi,

Preamble:
I've managed to successfully wire up a radgrid with an external edit form by working from the demo here:
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/dynamicajaxsettings/defaultcs.aspx?product=grid 

Concerns:
However, to create the "Add New Record" and "Refresh" buttons, similar to other Edit Modes, I've had to use the CommandItemTemplate. 
I used a number of other RadGrids in my application, but most of them either use inline or popup edit modes... and these buttons are generated automatically. 

I have the following complaints with the CommandItemTemplate approach:
1. The text labels generated by the demo do not align with the automatically generated labels for other grids. This makes all of my Grids with CommandItemTemplate controls to "look funny". I can tweak them with CSS, but this is time consuming and difficult to maintain.

2. I have to use my own copies of the RadGrid images for the buttons to make them visually consistent with all of the other RadGrids with automatically generated Command buttons.

3. Due to the complications of the above two complaints, it becomes extremely difficult to apply new skins without also involving a significant amount of editing, tweaking, and rework to maintain consistent visual style across all RadGrids in my application.

Question:
Is there any way to wire up an external edit form without using the CommandItemTemplate to create insert and refresh buttons?

All I really need is to wire the OnClick event of the generated "Add New Record" to my custom RadGrid_OnInsertCommand() event without it trying to create an in-grid edit form or a popup edit form. All of the rest of the wireup already works (i.e. the submit button on the external edit form).

[Tsvetoslav]

Hi Dave,

You do not have to use the CommandItemTemplate, just leave the buttons as they are and wire up an event handler to the ItemCommand event of the grid; intercept the InitInsert command and open up your exteranl form.

Hope it helps.

Regards,
Tsvetoslav
the Telerik team

[Dave]

Hi Tsvetoslav!

Thanks for the help! It worked perfectly.
There were some additional little details I had to figure out to get the behavior exactly right, but now it works!



Notes for others:
1: Create your RadGrid, listing your items.
1.1: Bind the OnItemCommand to a method in codebehind [OnItemCommand="RadGrid_ItemCommand"]
1.2: In the MasterTableView, ensure you set the CommandItemDisplay to something [CommandItemDisplay="Top"]

<telerik:RadGrid runat="server" ID="ContactsGrid" OnItemCommand="RadGrid_ItemCommand" >
    <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="False" DataKeyNames="ID" >
         // Set up RadGrid view here...
    </MasterTableView>
</telerik:RadGrid>

2: Create your custom edit form somewhere on the page 
2.1: Include a RadButton for submitting the form, bound to your custom Submit method

<asp:Panel ID="Panel1" runat="server">
   // Custom external edit form...
   <telerik:RadButton runat="server" ID="SubmitDetails" Text="Submit" OnClick="RadGrid_SubmitDetails"/>
</asp:Panel>

3: Ensure you link the submit button to the RadGrid in the AJAX manager, otherwise the grid won't update after submitting

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RestoreOriginalRenderDelegate="false">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="SubmitDetails">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid" UpdatePanelHeight="100%"/>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

4. Write the OnItemCommand method in the code behind, and intercept the InitInsert command, replacing it with your own

protected void RadGrid_ItemCommand(object sender, GridCommandEventArgs e)

{

    // Intercept InitInsert Command and cancel the built in version since we're using an external edit form

    if (e.CommandName == RadGrid.InitInsertCommandName)

    {

        e.Canceled = true;

 

        // Perform our own version of creating a new contact

        // ...

      }
}

If you plan on using the refresh buttons also, don't forget to repeat step 4, except intercept RadGrid.RebindGridCommandName and replace it with your own way of refreshing the external form (probably just clearing it, or hiding it)