Bug with RadGrid popup editing and validators

[anand]

When using pop-up formedit mode I can wrap my custom javascript in a radscriptblock, however, when I use validators (e.g. RequiredFieldValidator) the client side validation does not fire even though EnableClientScript = true.  This is the issue again using RadAjaxManager. 
Can you let me know how to solve this?
Thanks 

[Yavor]

Hello anand,

Can you please provide a little bit more information on your setup?
How and when is the validation triggered? how is the control ajaxified? Whet is the intended behavior?

Greetings,
Yavor
the Telerik team

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

[Aaron Hanusa]

Sounds like a bug to me, unless there is a setting that I'm missing.  Basically, I cannot get client side validation to work at all on the popup.  It posts back first, then displays the validation message(s).

What's really annoying is that when doing an insert on a popup, it posts back, then the popup displays the validation message(s), and thinks it's now in edit mode.

What's the deal?  Interesting that there are no validators included in this sample:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx

Sorry for the bitterness, I'm just getting frustrated that things you would think are "no-brainer" type of behaviors don't work at all or require hoops to be jumped through.

Anyone?

Thanks!

[Sebastian]

Hello Aaron,

I tried to recreate the issue in a sample project locally (using this online demo as a starting point and choosing built-in popup edit form type) but my attempts were not successful. Can you please outline the differences between your scenario and the one described above? They can help us track down the source of the abnormality to address it accordingly.

Kind regards,
Sebastian
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.

[MrMatt]

As posted above, I have also noticed that the demo for the pop-edit forms on the radgrid does not have any validation in it.
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/popupeditform/defaultcs.aspx



Can you point me to the place that does have validators (like required field) for pop-up radgrid forms?

[Sebastian]

Hello MrMatt,

The example linked in my previous post contains validators inside the RadGrid's edit form. You can test the same configuration by switching the auto-generated edit form with built-in popup edit form.

Best regards,
Sebastian
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bastien]

Hi,

 

I got the same problem as MrMatt :

-My RadGrid has the EditMode set as 'PopUp' and I use UserControls to allow editing.

-Inside my Usercontrol, I have a 'RequiredFieldValidator' for a RadTextBox and a Button with the PerformInsert||Update Commands

-I use ValidationGroup inside the Usercontrol

-I tryed adding the validationSettings inside the RadGrid without success

 

Current Behavior :

When clicking the ValidateButton inside the UserControl, an Async PostBack is fired and then the RadTextBox has focus on. The error message doesn't appear ( In the html it is still set as visibility:hidden ). The asyncPostback is not wanted too ofc as it make the insertion//update of the invalid item.

 Here the User Control Code

<table id="popup_answer">
    <!-- Title -->
    <tr>
        <td>Question</td>
        <td>
            <telerik:RadTextBox ID="Tb_QuestionTitle" runat="server" MaxLength="150" EmptyMessage="Entrez votre question ici.."
                Text='<%# (DataItem is GridInsertionObject) ? "":DataBinder.Eval(Container, "DataItem.Text") %>' />
            <asp:RequiredFieldValidator ID="Rfv_QuestionTitle" runat="server"
                        CssClass="messageerror" ControlToValidate="Tb_QuestionTitle"
                        ErrorMessage="Veuillez saisir un titre" SetFocusOnError="false" ValidationGroup="Question" />
        </td>
    </tr>
    <!-- Is Prerequisite-->
    <tr>
        <td>Est en Prérecquis</td>
        <td>
            <telerik:RadButton ID="Cb_IsPrerequisite" runat="server" ToggleType="CheckBox" ButtonType="SkinnedButton" AutoPostBack="false"
                 Checked='<%#  DataItem is GridInsertionObject || DataBinder.Eval(Container, "DataItem.IsPrerequisite") == DBNull.Value ? false : DataBinder.Eval(Container, "DataItem.IsPrerequisite") %>'>
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Prérecquis" PrimaryIconCssClass="rbToggleCheckboxChecked" />
                    <telerik:RadButtonToggleState Text="Non Prérecquis" PrimaryIconCssClass="rbToggleCheckbox" />
                </ToggleStates>
            </telerik:RadButton>
        </td>
    </tr>
    <!-- Add Question Button -->
    <tr>
        <td>
            <asp:Button ID="Btn_ValidateQuestion" runat="server"
                CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                Text='<%# (Container is GridEditFormInsertItem) ? "Ajouter la question" : "Editer la question" %>'
                ValidationGroup="Question" CausesValidation="true" />
        </td>
        <td>
            <asp:Button ID="Btn_CancelQuestion" runat="server" Text="Annuler les modifications" CommandName="Cancel" CausesValidation="false" />
        </td>
    </tr>
</table>
<asp:HiddenField ID="Hf_EditQuestionId" runat="server" Value='<%# (DataItem is GridInsertionObject) ? "":DataBinder.Eval(Container, "DataItem.Id") %>' />

Here the RadGrid Code :

<!-- Quizz Questions Infos -->
        <fieldset id="questionsContainer" class="width500">
            <legend>Liste des Questions</legend>
            <telerik:RadAjaxPanel ID="Ap_Questions" runat="server">
                <telerik:RadGrid ID="Grid_Questions" runat="server"
                    EnableAjaxSkinRendering="true"
                    DataKeyNames="Id"
                    AutoGenerateColumns="false"
                    OnItemCommand="Grid_Questions_OnCommand"
                    OnRowDrop="Grid_Questions_OnRowDrop"
                    OnNeedDataSource="Grid_Questions_OnNeedDataSource">
                    <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="PopUp" AutoGenerateColumns="false">
                        <CommandItemSettings AddNewRecordText="Ajout d'une Question" />
                        <Columns>
                            <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id" Display="false" />
                            <telerik:GridBoundColumn DataField="Text" HeaderText="Question" UniqueName="Text" />
                            <telerik:GridBoundColumn DataField="Order" HeaderText="Ordre" UniqueName="Order" Display="false" />
                            <telerik:GridCheckBoxColumn DataField="IsPrerequisite" HeaderText="Prérecquis" UniqueName="IsPrerequisite" />
                            <telerik:GridButtonColumn CommandName="ShowAnswers" ButtonType="ImageButton" UniqueName="ShowAnswers" Text="Voir les réponses" />
                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" />
                            <telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" UniqueName="DeleteColumn" Text="Supprimer" ConfirmDialogType="RadWindow" ConfirmTitle="Supprimer" />
                        </Columns>
                        <EditFormSettings UserControlName="UserControls/InsertQuestion.ascx" EditFormType="WebUserControl">
                            <PopUpSettings Modal="true" ZIndex="100010" Width="610px" />
                            <EditColumn UniqueName="EditCommandColumn1">
                            </EditColumn>
                        </EditFormSettings>
                    </MasterTableView>
                    <ValidationSettings CommandsToValidate="PerformInsert" ValidationGroup="Question" EnableValidation="true" />
                    <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                        <ClientEvents OnPopUpShowing="centerPopup" />
                    </ClientSettings>
                </telerik:RadGrid>
                <asp:HiddenField ID="Hf_QuestionId" runat="server" Value="0" />
            </telerik:RadAjaxPanel>
        </fieldset>

 

 Here is my AjaxSettings

 

<telerik:AjaxSetting AjaxControlID="Grid_Questions">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Ap_Questions" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Grid_Answers" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Grid_Comments" LoadingPanelID="Loading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Grid_Answers">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid_Answers" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Hf_QuestionId" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Hf_AnswerId" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Grid_Questions" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Grid_Comments" LoadingPanelID="Loading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Btn_ValidateQuestion">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Ap_Answers" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Ap_Questions" LoadingPanelID="Loading" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Btn_CancelQuestion">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Ap_Answers" LoadingPanelID="Loading" />
                    <telerik:AjaxUpdatedControl ControlID="Ap_Questions" LoadingPanelID="Loading" />
                </UpdatedControls>
            </telerik:AjaxSetting>

 

In Atttach is the result of cliking on the "Add Button".

Thank you in advance for your help and your work.

Best Regards,

Bastien Besson

<!-- Quizz Questions Infos -->

        <fieldset id="questionsContainer" class="width500">

            <legend>Liste des Questions</legend>

            <telerik:RadAjaxPanel ID="Ap_Questions" runat="server">

                <telerik:RadGrid ID="Grid_Questions" runat="server"

                    EnableAjaxSkinRendering="true"

                    DataKeyNames="Id"

                    AutoGenerateColumns="false"

                    OnItemCommand="Grid_Questions_OnCommand"

                    OnRowDrop="Grid_Questions_OnRowDrop"

                    OnNeedDataSource="Grid_Questions_OnNeedDataSource">

                    <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="PopUp"AutoGenerateColumns="false">

                        <CommandItemSettings AddNewRecordText="Ajout d'une Question" />

                        <Columns>

                            <telerik:GridBoundColumn DataField="Id" HeaderText="Id"UniqueName="Id" Display="false" />

                            <telerik:GridBoundColumn DataField="Text" HeaderText="Question"UniqueName="Text" />

                            <telerik:GridBoundColumn DataField="Order" HeaderText="Ordre"UniqueName="Order" Display="false" />

                            <telerik:GridCheckBoxColumn DataField="IsPrerequisite"HeaderText="Prérecquis" UniqueName="IsPrerequisite" />

                            <telerik:GridButtonColumn CommandName="ShowAnswers"ButtonType="ImageButton" UniqueName="ShowAnswers" Text="Voir les réponses" />

                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"ButtonType="ImageButton" />

                            <telerik:GridButtonColumn CommandName="Delete"ButtonType="ImageButton" UniqueName="DeleteColumn" Text="Supprimer" ConfirmDialogType="RadWindow"ConfirmTitle="Supprimer" />

                        </Columns>

                        <EditFormSettings UserControlName="UserControls/InsertQuestion.ascx"EditFormType="WebUserControl">

                            <PopUpSettings Modal="true" ZIndex="100010" Width="610px" />

                            <EditColumn UniqueName="EditCommandColumn1">

                            </EditColumn>

                        </EditFormSettings>

                    </MasterTableView>

                    <ValidationSettings CommandsToValidate="PerformInsert"ValidationGroup="Question" EnableValidation="true" />

                    <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true"ReorderColumnsOnClient="true">

                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

                        <ClientEvents OnPopUpShowing="centerPopup" />

                    </ClientSettings>

                </telerik:RadGrid>

                <asp:HiddenField ID="Hf_QuestionId" runat="server" Value="0" />

            </telerik:RadAjaxPanel>

        </fieldset>

<!-- Quizz Questions Infos -->

        <fieldset id="questionsContainer" class="width500">

            <legend>Liste des Questions</legend>

            <telerik:RadAjaxPanel ID="Ap_Questions" runat="server">

                <telerik:RadGrid ID="Grid_Questions" runat="server"

                    EnableAjaxSkinRendering="true"

                    DataKeyNames="Id"

                    AutoGenerateColumns="false"

                    OnItemCommand="Grid_Questions_OnCommand"

                    OnRowDrop="Grid_Questions_OnRowDrop"

                    OnNeedDataSource="Grid_Questions_OnNeedDataSource">

                    <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="PopUp"AutoGenerateColumns="false">

                        <CommandItemSettings AddNewRecordText="Ajout d'une Question" />

                        <Columns>

                            <telerik:GridBoundColumn DataField="Id" HeaderText="Id"UniqueName="Id" Display="false" />

                            <telerik:GridBoundColumn DataField="Text" HeaderText="Question"UniqueName="Text" />

                            <telerik:GridBoundColumn DataField="Order" HeaderText="Ordre"UniqueName="Order" Display="false" />

                            <telerik:GridCheckBoxColumn DataField="IsPrerequisite"HeaderText="Prérecquis" UniqueName="IsPrerequisite" />

                            <telerik:GridButtonColumn CommandName="ShowAnswers"ButtonType="ImageButton" UniqueName="ShowAnswers" Text="Voir les réponses" />

                            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn"ButtonType="ImageButton" />

                            <telerik:GridButtonColumn CommandName="Delete"ButtonType="ImageButton" UniqueName="DeleteColumn" Text="Supprimer" ConfirmDialogType="RadWindow"ConfirmTitle="Supprimer" />

                        </Columns>

                        <EditFormSettings UserControlName="UserControls/InsertQuestion.ascx"EditFormType="WebUserControl">

                            <PopUpSettings Modal="true" ZIndex="100010" Width="610px" />

                            <EditColumn UniqueName="EditCommandColumn1">

                            </EditColumn>

                        </EditFormSettings>

                    </MasterTableView>

                    <ValidationSettings CommandsToValidate="PerformInsert"ValidationGroup="Question" EnableValidation="true" />

                    <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true"ReorderColumnsOnClient="true">

                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

                        <ClientEvents OnPopUpShowing="centerPopup" />

                    </ClientSettings>

                </telerik:RadGrid>

                <asp:HiddenField ID="Hf_QuestionId" runat="server" Value="0" />

            </telerik:RadAjaxPanel>

        </fieldset>

[Maria Ilieva]

Hi Bastien,

Note that ajaxifying controls once with RadAjaxPanel and then adding them in RadAjaxManager settings is not a supported scenario and this might break the validation functionality. Please try keeping only the RadAjaxPanel around the RadGrid control, which will handle its ajaxification and remove the RadAjaxManager settings. Give this a try and verify if it helps.

Regards,
Maria Ilieva
Telerik