Extracting values from edited items in a RadGrid EditForm

[Charlie Crawford]

Hi,

I am trying to insert and edit items in a RadGrid bound to an object datasource that is contained in a Web User Control.

I have an RadAjaxManagerProxy in the Web User Control to handle the AjaxRequests and we populate the data with objects in a collection class. The RadAjaxManagerProxy is configured so the ID of the RadGrid is set as the AjaxControlID and the ID of the RadGrid is also the AjaxUpdatedControl ControlID.

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGridContactDetails">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGridContactDetails" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

One of the columns in the RadGrid control is a GridDropDownColumn which is bound to an XmlDataSource.

I have a CommandItemTemplate which has one button in it that is used to add a new record to the underlying data object and the RadGrid.

<telerik:RadGrid AllowAutomaticInserts="true" AllowAutomaticDeletes="true" AllowAutomaticUpdates="true" ID="RadGridContactDetails"  runat="server" skinId="kcResourceOpener" width="100%" height="245" Visible="true" DataSourceID="dsContactDetails">
    <MasterTableView ShowHeadersWhenNoRecords="true" EditMode="EditForms" EnableNoRecordsTemplate="true" PageSize="10" CommandItemDisplay="Top" DataKeyNames="Priority">
        <CommandItemTemplate>
            <table border="0" cellpadding="1" cellspacing="0" width="100%">
                <tr>
                    <td align="right">
                        <asp:LinkButton id="btnAddRecord" runat="server" ForeColor="#00247d" CssClass="Btn" CommandName="InitInsert" Text="Add"></asp:LinkButton>
                    </td>
                </tr>
            </table>
        </CommandItemTemplate>
        <NoRecordsTemplate>
            No data available.
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="" AllowFiltering="false" ItemStyle-Wrap="false" HeaderStyle-Width="75pt">
                <ItemTemplate>
                    <asp:LinkButton ID="btnEdit" runat="server" Text="Select" ForeColor="#00247d" Font-Underline="false" CssClass="Btn" CommandName="Edit" Enabled="<%# not me.IsReadOnly %>" />
                </ItemTemplate>
                <ItemStyle Wrap="False" />
            </telerik:GridTemplateColumn>
            <telerik:GridButtonColumn ButtonType="PushButton" UniqueName="btnUp" ButtonCssClass="Btn" CommandName="MoveUp" Text="Up" HeaderText="" HeaderStyle-Width="15%">
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn ButtonType="PushButton" UniqueName="btnDown" ButtonCssClass="Btn" CommandName="MoveDown" Text="Down" HeaderText="" HeaderStyle-Width="15%">
            </telerik:GridButtonColumn>
            <telerik:GridDropDownColumn UniqueName="Type" DataField="Type" ListTextField="Type" ListValueField="Type" DataSourceID="dsContactDetailTypes" HeaderText="Type" HeaderStyle-Width="20%">
            </telerik:GridDropDownColumn>
            <telerik:GridBoundColumn DataField="Detail" UniqueName="Detail" AllowFiltering="false" AllowSorting="false" HeaderText="Detail" HeaderStyle-Width="20%">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn ButtonType="PushButton" ButtonCssClass="Btn" CommandName="Delete" Text="Delete" HeaderText="" HeaderStyle-Width="15%">
            </telerik:GridButtonColumn>
        </Columns>
        <EditFormSettings EditFormType="Template" CaptionFormatString="Enter/Edit the type and value for this detail record:">
            <PopUpSettings Width="450px" />
            <FormTemplate>

                <table width="100%" border="0" cellpadding="2" cellspacing="0">
                    <tr>
                        <th align="left">Contact Details</th>
                        <th colspan="2" align="right">
                            <asp:LinkButton ID="btnSaveDetail" CssClass="Btn" ForeColor="#00247d" Font-Underline="false" runat="server" CommandName='<%# IIf(TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>' Text="Save" />
                            <asp:LinkButton ID="btnCancelDetail" CssClass="Btn" ForeColor="#00247d" Font-Underline="false" runat="server" CommandName="Cancel" Text="Cancel" />
                        </th>
                    </tr>
                    <tr>
                        <td class="Form_Label" align="right">Type:&nbsp;</td>
                        <td style="width:300px;" colspan="2">
                            <asp:DropDownList ID="dropDownDetailTypes" runat="server" DataSourceID="dsContactDetailTypes" DataTextField="Type" DataValueField="Type" Enabled='<%# not me.IsReadOnly %>'>
                            </asp:DropDownList>
                        </td>

                    </tr>
                    <tr>
                        <td class="Form_Label">Detail:&nbsp;</td>
                        <td>
                            <asp:TextBox ID="txtDetailText" runat="server" Text='<%# Bind("Detail") %>' Enabled='<%# not me.IsReadOnly %>' Width="300px"></asp:TextBox>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr><td colspan="3">&nbsp;</td></tr>
                </table>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

<asp:ObjectDataSource ID="dsContactDetails" runat="server"
    SelectMethod="Find"
    TypeName="SSI.KnowledgeCenter.ICKC.Resources.ContactDetailCollection"
    DataObjectTypeName="SSI.KnowledgeCenter.ICKC.Resources.ContactDetailCollection">
</asp:ObjectDataSource>

<asp:XmlDataSource ID="dsContactDetailTypes" runat="server" DataFile="../App_Data/ContactDetailTypes.xml">
</asp:XmlDataSource>

I've followed all of the examples I can find related to inserting/updating/deleting items from the RadGrid control. I get the Edit Form to appear with the correct data if I use the Automatic Form, but if I use a FormTemplate to design my own form, I cannot set the SelectedValue property for the DropDownList. I receive an error saying that this property cannot be set declaratively. The example in the set of demos shows this property being set to the bound value in the column.

Using the Form Template that I designed, I process insert and update operations in the ItemCommand event handler. Here, I first test for the CommandName property. If it is equal to RadGrid.PerformInsertCommandName, I process it as an Insert. If it is a RadGrid.UpdateCommandName, then I process it as an Update:

Private Sub RadGridContactDetails_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridContactDetails.ItemCommand
        Select Case e.CommandName
            Case RadGrid.InitInsertCommandName
                ' Add button has been clicked:

            Case RadGrid.UpdateCommandName
                'e.Canceled = True
                'Dim newVals As System.Collections.Specialized.ListDictionary = New System.Collections.Specialized.ListDictionary()
                'newVals("Type") = Me.ContactDetails(e.Item.ItemIndex).Type
                'newVals("Detail") = Me.ContactDetails(e.Item.ItemIndex).Detail
                'e.Item.OwnerTableView.InsertItem(newVals)
                Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)
                Dim d As IContactDetail = Me.ContactDetails(e.Item.ItemIndex)
                Dim dropDownDetailTypes As DropDownList = CType(editedItem.FindControl("dropDownDetailTypes"), DropDownList)
                If dropDownDetailTypes IsNot Nothing Then d.Type = dropDownDetailTypes.SelectedItem.Text
                Dim txtDetailText As TextBox = CType(editedItem.FindControl("txtDetailText"), TextBox)
                If txtDetailText IsNot Nothing Then d.Detail = txtDetailText.Text

            Case RadGrid.PerformInsertCommandName
                Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)
                Dim d As New ContactDetail(_ConfigName, ICKCUser.ProviderUserKey)
                d.Priority = RadGridContactDetails.Items.Count + 1
                Dim dropDownDetailTypes As DropDownList = CType(editedItem.FindControl("dropDownDetailTypes"), DropDownList)
                If dropDownDetailTypes IsNot Nothing Then d.Type = dropDownDetailTypes.SelectedItem.Text
                Dim txtDetailText As TextBox = CType(editedItem.FindControl("txtDetailText"), TextBox)
                If txtDetailText IsNot Nothing Then d.Detail = txtDetailText.Text

                Me.ContactDetails.Add(d)

 

When I click the Save button on an Inserted Item, the DropDownList always shows the SelectedIndex = 0 instead of whatever selection is made. The TextBox control shows the Text property to be empty.

 

When I click the Save button on an Updated item, the DropDownList always shows the SelectedIndex to be whatever corresponds with the previous value of that property of the object. The TextBox control always shows the origjnal value for the associated property of the object.

 

I've also tried the Automatic EditForms and have also had no luck.  In the InsertCommand event handler, I have tried two approaches:

Private Sub RadGridContactDetails_InsertCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridContactDetails.InsertCommand
        Dim newDetailItem As Telerik.Web.UI.GridEditableItem = CType(e.Item, Telerik.Web.UI.GridEditableItem)
        Dim newValues As Hashtable = New Hashtable()

        Dim detail As IContactDetail = New ContactDetail(_ConfigName, ICKCUser.ProviderUserKey)
        detail.Priority = RadGridContactDetails.Items.Count + 1
        e.Item.OwnerTableView.ExtractValuesFromItem(newValues, newDetailItem)

        Try
            For Each entry As DictionaryEntry In newValues
                Dim propertyName As String = entry.Key.ToString()
                Dim propertyValue As String = entry.Value
                Select Case propertyName
                    Case "Type"
                        detail.Type = propertyValue
                    Case "Detail"
                        detail.Detail = propertyValue
                    Case Else
                        Return
                End Select

                Me.ContactDetails.Add(detail)
            Next
        Catch ex As Exception
            _Manager.Alert(ex.Message)
        End Try
    End Sub

and also this approach:

    Private Sub RadGridContactDetails_InsertCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridContactDetails.InsertCommand
        Dim newItem As Telerik.Web.UI.GridEditableItem = CType(e.Item, Telerik.Web.UI.GridEditableItem)
        Dim editMan As Telerik.Web.UI.GridEditManager = newItem.EditManager
        Dim detail As IContactDetail = New ContactDetail(_ConfigName, ICKCUser.ProviderUserKey)
        detail.Priority = RadGridContactDetails.Items.Count + 1

        For Each column As Telerik.Web.UI.GridColumn In e.Item.OwnerTableView.Columns
            If TypeOf column Is IGridEditableColumn Then
                Dim editableCol As IGridEditableColumn = CType(column, IGridEditableColumn)

                If editableCol.IsEditable Then
                    Dim editor As IGridColumnEditor = editMan.GetColumnEditor(editableCol)
                    Dim editorText As String = "unknown"
                    Dim editorValue As Object = Nothing
                    If (TypeOf editor Is GridTextColumnEditor) Then
                        editorText = CType(editor, GridTextBoxColumnEditor).Text
                        editorValue = CType(editor, GridTextColumnEditor).Text
                    End If
                    If (TypeOf editor Is GridBoolColumnEditor) Then
                        editorText = CType(editor, GridBoolColumnEditor).Value.ToString()
                        editorValue = CType(editor, GridBoolColumnEditor).Value
                    End If
                    If (TypeOf editor Is GridDropDownColumnEditor) Then
                        editorText = CType(editor, GridDropDownColumnEditor).SelectedText
                        editorValue = CType(editor, GridDropDownColumnEditor).SelectedValue
                    End If
                    Select Case column.UniqueName
                        Case "Type"
                            detail.Type = editorText
                        Case "Detail"
                            detail.Detail = editorText
                        Case Else
                            Return
                    End Select
                End If
            End If
        Next
        Me.ContactDetails.Add(detail)
    End Sub

Neither approach has produced values from the EditForm for me. In both cases, I can get the name of the field, but not the value (in other words, I can find the column names but not the updated values).

I'm thinking this is an Ajax-related issue, but am unsure as to what is really going on here. I have placed a watch on the e.item object as it comes into the event handlers, but there are no values in the property reflecting the changes made on the EditForm. I see the controls, but not the associated values.

Any ideas would be very helpful at this point.

Thanks,

Charlie

[Veli]

Hello Charlie,

When using custom edit forms from template or user control, the ExtractValuesFromitem() method won't work for you, as it can extract values only from auto-generated grid edit forms. For auto-generated edit forms, both ExtractValuesFromItem() and the column editors should work OK. One thing I can note is that you have set AllowAutomaticUpdate/Insert/Delete = "true" in RadGrid's settings, but you are actually performing these operations manually. Try switching these off.

Other than that, your code seems OK. If you think this is an AJAX-related issue, try removing the AJAX settings and see how it works with full postbacks.

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.

[Charlie Crawford]

Thanks for the suggestion. I actually tried this originally and then added these settings when it wasn't working.

I tried it again and it still didn't work correctly, but I was able to retrieve the values using:

Request.Form(e.Item.FindControl("txtDetailText").UniqueID)

-and-

Request.Form(e.Item.FindControl("dropDownDetailTypes").UniqueID)

Thanks,

Charlie

[Mira]

Hi Charlie,

Please take a look at the Inserting values using UserControl/FormTemplate help topic - there you can see how to extract values from a FormTemplate. In your case, when you do not have autogenerated edit form, you should create a new record in the grid data source and fill it with data manually.

I hope this helps.

Sincerely yours,
Mira
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.

[Charlie Crawford]

In your case, when you do not have autogenerated edit form, you should create a new record in the grid data source and fill it with data manually.

I was doing this anyway as I was using an Object Data Source. The problem is that I cannot extract the values from the controls. I can get the values through the Request.Form items, but not from the controls in the edit form themselves. By the time the InsertCommand event fires, these values have been reset to their original values (empty if creating a new record, or old values if editing existing records).

[Mira]

Hello Charlie,

Unfortunately from the provided information it is hardly possible for me to guess what is the cause of the issue. I recommend that you open a formal support ticket and attach a small working project demonstrating the described behavior. We will debug it locally and get back to you with our findings.

Thank you in advance for the cooperation.

All the best,
Mira
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.

[Bijo]

Thanks Charlie, I had been looking all over for this......LIfe saver !!!

[Dan]

Thanks Charlie for posting that workaround - even now in 2014, on version 2014.1.403.45, inside a RadAjaxPanel, this (inability to get values from the server controls on a postback) is still an issue.

[Konstantin Dikov]

Hello Dan,

Since we are not aware of such issue and we are unable to replicate it locally in a simple scenario, could you please elaborate on your exact scenario, so we could try to replicate the problem on our side and inspect it further.

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

 

 

[David]

Still an issue: 2014.3.1024.45

To recreate:  Create a basic page that has:
  - RadTabStrip
  - RadMultiPage
  -- RadPageView
 ---  RadGrid with auto-generated edit form

On update, e.Item.OwnerTableView.ExtractValuesFromItem(newValue, editedItem); contains the original values
On Insert, contains null values.

Move RadGrid outside of RadMultiPage. ExtractValuesFromItem now contains the newly entered values.

Possibly repeat using RadAjaxPanel or other Ajax containers.

[David]

** Correction **
     This is not still an issue and I am able to successfully extract values from a RadGrid within a RadMultiPage control.

Because I have a control on the master page that can affect which role the user has, I had the below snippet in the OnPageLoad. The master page set the Session variable to True when the control was changed. In another location the session variable was being defaulted to 'True', so the RadGrid's datasource was always being rebound before the ItemCommand triggered.
I removed the default and the RadGrid updates correctly.

if ((bool)Session["bitDirty"] == true)
{
    switch (multiPage.SelectedIndex)
    {
        case 0:
            LoadMOS();
            break;

        case 1:
            grdTblPl_FY.DataSource = null;
            grdTblPl_FY.Rebind();
            break;
        case 2:
            grdEpsZones.DataSource = null;
            grdEpsZones.Rebind();
            break;
        case 3:
            grdGroupRoles.DataSource = null;
            grdGroupRoles.Rebind();
            break;
        case 4:
            grdGroupRoles.DataSource = null;
            grdGroupRoles.Rebind();
            break;
        case 5:
            grdApftPoints.DataSource = null;
            grdApftPoints.Rebind();
            break;
    }
}