radGrid Popup Form Template Validation Issues

[Jeanne]

I'm running into a number of issues trying to do validation of controls in a popup form template of a radGrid:

1) None of my client-side validation funtions are firing
2) I cannot get the NEW value of the radEditor in my server-side custom validation function
3) When the insert form is redisplayed with errors, the content of the radEditor displays the original value, not the new value (changes are lost)

I'm using IE 9.0, and radControls Q3 2012.

This is the code for two of my editor controls that are having an issue (and the update button):

<telerik:RadTextBox ID="rtbTItle" runat="server" Width="400" TextMode="SingleLine" Text='<%# DataBinder.Eval(Container, "DataItem.Title") %>' Skin="WebBlue">
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvTitle" runat="server" ControlToValidate="rtbTitle"
    ErrorMessage="You must enter a Title" ValidationGroup="vgEditor" ForeColor="Red" Font-Bold="true">*</asp:RequiredFieldValidator>
<asp:CustomValidator ID="cvTitle" runat="server" ControlToValidate="rtbTitle"
    ClientValidationFunction="cvTitle_Validator" OnServerValidate="cvTitle_ServerValidate" EnableClientScript="true"
    ErrorMessage="Title cannot contain 'x'" ValidationGroup="vgEditor" ForeColor="Red" Font-Bold="true">x</asp:CustomValidator>


<telerik:RadEditor ID="reItemText" runat="server" BorderStyle="None"
    OnClientLoad="reItemText_OnClientLoad" OnClientModeChange="reItemText_OnClientModeChange"
    Width="800" Height="300" AutoResizeHeight="false" EnableResize="false" ToolsWidth="800"
    ContentAreaMode="Div" Skin="WebBlue" Content='<%# DataBinder.Eval(Container, "DataItem.ItemText") %>'>
</telerik:RadEditor>
<asp:CustomValidator ID="cvItemText" runat="server" ControlToValidate="reItemText"
    ClientValidationFunction="cvItemText_Validator" OnServerValidate="cvItemText_ServerValidate" EnableClientScript="true"
    ErrorMessage="Item Text is required" ValidateEmptyText="true" ValidationGroup="vgEditor" ForeColor="Red" Font-Bold="true">*</asp:CustomValidator>


<asp:Button ID="btnUpdate" runat="server" ValidationGroup="vgEditor" CausesValidation="true" Text='<%# IIf(TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>' CommandName='<%# IIf(TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>' />

These are my client-side validation functions (neither of which gets fired):

function cvItemText_Validator( sender, args ) {
  console.log( "cvItemText_Validator" );
}

function cvTitle_ServerValidate( sender, args ) {
  console.log( "cvTitle_ServerValidate" );
}

And these are my server-side validation functions:

Protected Sub cvItemText_ServerValidate(source As Object, args As System.Web.UI.WebControls.ServerValidateEventArgs)
    System.Diagnostics.Debug.WriteLine("Admin_ManageNews:cvItemText_ServerValidate")
    System.Diagnostics.Debug.WriteLine(String.Format("  ItemText: {0}", args.Value))
    Dim oItem As GridEditableItem = DirectCast(DirectCast(source, CustomValidator).NamingContainer, GridEditableItem)
    Dim oEditor As RadEditor = DirectCast(oItem.FindControl("reItemText"), RadEditor)
    System.Diagnostics.Debug.WriteLine(String.Format("  ItemText: {0}", oEditor.Content))

End Sub

Protected Sub cvTitle_ServerValidate(source As Object, args As System.Web.UI.WebControls.ServerValidateEventArgs)
    System.Diagnostics.Debug.WriteLine("Admin_ManageNews:cvTitle_ServerValidate")
    System.Diagnostics.Debug.WriteLine(String.Format("  Title: {0}", args.Value))
    Dim oItem As GridEditableItem = DirectCast(DirectCast(source, CustomValidator).NamingContainer, GridEditableItem)
    Dim oRTB As RadTextBox = DirectCast(oItem.FindControl("rtbTitle"), RadTextBox)
    System.Diagnostics.Debug.WriteLine(String.Format("  Title: {0}", oRTB.Text))
End Sub

Both of the debug statements for the cvTitle validator display the correct value for the Title field, but neither debug statement for the cvItemText validator displays the new values, they display the old value.

[Jeanne]

The saga gets even stranger! I added a hidden field to the form template, and added an OnClientSubmit handler to the radEditor which sets the value of the hidden field to the html value of the radEditor. I've verified via console.log statements that both the radEditor and the hidden field have the changed values. But after posting back both controls have the old value, both in the custom validator handler and in the ItemInsert event handler.

To make sure it wasn't just something about that value, I added another hidden field with an initial value of "onsinsert" and in the same OnClientSubmit handler of the radEditor I reset it's value to "onsubmit". Again, I verified via console.log that the value was correctly set. After postback it's value is back to "oninsert"!

There appears to be a problem with the TIMING of the radEditor. I added on OnClientClick event hander to the update button on the form template, and it executes BEFORE the OnClientSubmit event of the radEditor. In the  OnClientClick event hander to the update button I set the value of the hidden field to "onclick", and in the OnClientSubmit event handler of the radEditor I set it to "onsubmit". Upon postback the value of the hidden field is "onclick"! It appears that the radEditor's OnClientSubmit event is happening too late to affect the form's values! To verify this further, I modified the title radTextBox's value in the radEditor's OnClientSubmit event handler (remember, it is posting back correctly), and the modified value is lost.

Finally, within the update button's OnClientClick event handler I added code to get the contents of the radEditor (using get_html()) and place it into the hidden field. The correct value DOES post back! I then tried oEditor.set_html(oEditor.get_html()) to see if that does anything. According to console.log the value is there, but the radEditor's content is still empty on postback.

At least I have a way of getting the value I need from the radEditor, so I can go ahead and finish this program (which I've wasted entirely too much time on). But I would still like to have my issues addressed. Especially "Why doesn't the radEditor work properly in a radGrid popup form template?".

[Tsvetoslav]

Hi Jeanne,

I tried to replicate the issue but to no avail as the attached sample proves. I guest there is some other piece of code that's causing the issue. That's why I'd recommend that you open up a formal support ticket and attach a runnable sample project that reproduces the problem - that will speed up the resolution of the set-back to a great extent.

All the best, Tsvetoslav
the Telerik team

[Jeanne]

If I can find the time I'll prepare a sample project and open a support ticket. Won't be in the next few days though. I've got too many other things to do and I found a work-around. Thanks for trying though.

I did find that data-binding the form template controls was causing other issues (radComboBox would not return the new value) so it may be related to that. I removed all data-binding for the form template and set the values in the ItemDataBound event. That solved most of the problems, but the radEditor still won't give the the changed value after postback. I worked around the problem (I seem to be working around problems with telerik controls a lot) by copying the value from the radEditor to a hidden field in the OnClientClick event handler of the submit button. That gets me the value I need in postback. Also if there's a validation error I reset the content of the radEditor using the hidden field value so it doesn't lose any changes. The OnClientSubmit event of the radEditor is pretty much useless, as it appears to be called way too late to do anything useful in it.

[Tsvetoslav]

Hello Jeanne,

Just to mention that RadComboBox not returning the new value inspite of a set data-binding expression is due to the fact that you need to set the data-binding expression of the combo box's SelectedValue property. I know it's not in IntelliSense since it is non-browsable but still you can safely assign a data-binding expression to it.


Greetings,
Tsvetoslav
the Telerik team