Grid InPlace & EditForms Editing Together?

[Benjamin]

In my current development, I have completed several pages using the RadGrid control. Recently I got a request to add 20 more fields into one of the pages to allow more detailed description of each grid entry. In-Line editing, which I have been using all this while, is now out of the question with the issue of space constraints.

With the goal of keeping the interface design standard through all the pages, I like to inquire if its possible to have both "InPlace" editing with "EditForms" mods in that particular RadGrid (at least the grid having two seperate edit modes accessed through seperate buttons)?

Thanks for your help.

[Princy]

Hello Benjamin,

Try out the following code wherein you can use two seperate buttons to switch the EditMode.
aspx:

<telerik:GridTemplateColumn UniqueName="TemplateColumn1">
       <ItemTemplate>
           <asp:Button ID="Button2" runat="server" Text="InPlaceEdit" CommandName="InPlaceEdit" />
       </ItemTemplate>
       </telerik:GridTemplateColumn>

       <telerik:GridTemplateColumn UniqueName="TemplateColumn2">
       <ItemTemplate>
           <asp:Button ID="Button3" runat="server" Text="FormEdit" CommandName="FormEdit" />
       </ItemTemplate>
       </telerik:GridTemplateColumn>

cs:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "InPlaceEdit")
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            editItem.Edit = true;
            RadGrid1.MasterTableView.EditMode = GridEditMode.InPlace;
        }

        if (e.CommandName == "FormEdit")
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            editItem.Edit = true;
            RadGrid1.MasterTableView.EditMode = GridEditMode.EditForms;
        }
        RadGrid1.Rebind();
    }

Princy.

[Benjamin]

Okay, thanks for the code.
I would like to ask as well: Is there any way to interact directly with these edit form controls?
I would like to add some Javascripts to them as well as have the ability to control their interface (enable/disable, etc.)

[Yavor]

Hello Benjamin,

If you get the clientId of any element in the editForm(a standard textbox for example), you can use it to retrieve it on the client, and manipulate its attributes.

All the best,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Benjamin]

I've tried using the ItemCreated event (which I normally use to catch other grid controls and objects) to trap the controls, but however they don't seem to be passing through it.
Do I have to depend on individual onLoad events on each of the controls in the edit form and Javascript to capture the ClientIDs?
Thanks for your help.

[Yavor]

Hello Benjamin,

Attached to this message, is a small application, which handles a functionality close to the one that we discussed this far.
I hope it helps.

All the best,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Benjamin]

Thank you for all the help provided so far. I've been able to get my grid's interface to behave the way I want it. However at the last yard, I encountered a snag:

The module that I have been using all this while to extract the updated values from the grid, after the user has executed the record update, is unable to get any values if the editing was done in the EditForm mode. The ExtractValuesFromItem function isn't able to detect any changes from the Telerik.WebControls.GridCommandEventArgs (grdEditableItem) passed to it
 and would result in an empty hashtable.

If the data changing was done using the normal InPlace editing instead, the function would work without issue.

The following is the event code for the UpdateCommand

Private Sub rgdGrid_UpdateCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs) Handles rgdGrid.UpdateCommand
   If Not EditRecord(pnlHeader.Controls, rgdGrid, e.Item, strGrdModTranCode) Then
      rgdGrid.ResponseScripts.Add(strErrMessage)
      e.Canceled = True

The following is the code used to contact and update the database.

Protected Function EditRecord(ByVal colHdrControls As ControlCollection, ByVal rgdGrid As RadGrid, ByVal gedGridDataEntry As GridEditableItem, ByVal strGrdModTranCode As String) As Boolean
   If CommunicateHost(strGrdModTranCode, chrModActCode, 1, , , GetGridValues(rgdGrid, gedGridDataEntry)) = String.Empty Then
      Return False

The following is the function used to extract updated values from the grid.

Protected Function GetGridValues(ByVal rgdGrid As RadGrid,  ByVal grdEditableItem As GridEditableItem,  Optional ByVal blnValidateData As Boolean = True) As String
   Dim hshRowData As New Hashtable

     rgdGrid.MasterTableView.ExtractValuesFromItem(hshRowData, grdEditableItem)

The following is the ASP coding of the RadGrid

<radG:RadGrid id="rgdGrid" runat="server" AutoGenerateColumns="False" EnableAJAX="True" EnableAJAXLoadingTemplate="True"
    Skin="Outlook2007" Width="100%" LoadingTemplateTransparency="25">
    <ClientSettings>
        <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True" />
        <Scrolling AllowScroll="True"/>
    </ClientSettings>
    <MasterTableView EditMode="InPlace" CommandItemDisplay="Bottom" DataKeyNames="PODSEQ">
        <Columns>
            <radG:GridBoundColumn UniqueName="colPODIDC" DataField="PODIDC" MaxLength="100" HeaderText="Description" Headerstyle-Width="45%" ItemStyle-HorizontalAlign="Left"/>
            <radG:GridBoundColumn UniqueName="colPODES1" DataField="PODES1" MaxLength="30" Visible="False"/>
            <radG:GridBoundColumn UniqueName="colPODES2" DataField="PODES2" MaxLength="30" Visible="False"/>
            <radG:GridBoundColumn UniqueName="colPODAMT" DataField="PODAMT" DataType="System.Decimal" ReadOnly="True" DataFormatString="{0:#,##0.00}" HeaderText="Amount" HeaderStyle-Width="10%" ItemStyle-HorizontalAlign="Right"/>

            <radG:GridButtonColumn UniqueName="cmdDetails" Text="Details" CommandName="Details" HeaderStyle-Width="25px"/>
            <radG:GridEditCommandColumn UniqueName="cmdEdit" UpdateText="OK" InsertText="OK" HeaderStyle-Width="25px"/>
            <radG:GridButtonColumn UniqueName="cmdDelete" Text="Delete" CommandName="Delete" ConfirmText="Do you wish to delete entry?" HeaderStyle-Width="36px"/>
        </Columns>

        <EditFormSettings EditFormType="Template">
            <FormTemplate>
                <table id="tblGEFPage" runat="server" style="TABLE-LAYOUT:auto;WIDTH:100%;BACKGROUND-COLOR:#efefef">
                    <tr>
                        <td>
                            <asp:Table runat="server" width="100%" >
                                <asp:TableRow>
                                    <asp:TableCell style="padding:0px 1px" Wrap="False"><asp:Label id="lblPODES1" runat="server" Text="Item Details"/></asp:TableCell>
                                    <asp:TableCell style="padding:0px 1px" Wrap="False"><asp:TextBox id="txtPODES1" runat="server" Text='<%#Bind("PODES1")%>' Width="250px" MaxLength="30" TabIndex="1"/></asp:TableCell>
                                    <asp:TableCell Width="10px"/>
                                    <asp:TableCell style="padding:0px 1px" Wrap="False"><asp:TextBox id="txtPODES2" runat="server" Text='<%#Bind("PODES2")%>' Width="250px" MaxLength="30" TabIndex="2"/></asp:TableCell>
                                    <asp:TableCell Width="40%"/>
                                </asp:TableRow>
                            </asp:Table>
                        </td>
                    </tr>
                    <tr align="right">
                        <td align="right" style="height: 22px">
                            <asp:Button ID="btnGrdEFOK" runat="server" CommandName="Update" CssClass="linkBtn" Text="OK"/>
                            <asp:Button ID="btnGrdEFCancel" runat="server" CommandName="GrdEFCancel" CssClass="linkBtn" Text="Cancel"/>
                        </td>
                    </tr>
                </table>
            </FormTemplate>
        <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"/>
        </EditFormSettings>

        <CommandItemTemplate>
        <asp:Button ID="btnAdd" runat="server" CommandName="InitInsert" CssClass="linkBtn" Text="Add"/>
    </CommandItemTemplate>
    </MasterTableView>
</radG:RadGrid>

Is there something amiss here?

[Yavor]

Hello Benjamin,

Although I am not precisely sure what may be causing the issue, you can get a reference to the editForm which is raising the update command, and then use the Findcontrol method to get a reference to the textboxes. This should allow you to get the values. Let me know how it goes.

Best wishes,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Benjamin]

That idea worked brilliantly. Once I was able to capture the GridEditFormItem reference from the ItemCreated event, all the pieces of the puzzle fell into place as I already had functions ready built for sorting through control collections to display/extract data.

Thank you for all the help.