Using RadNotification as RequiredFieldValidator

[Jan]

Hello all,

I was wondering if it is possible to achieve a notification about required fields. I was adapting the example at https://demos.telerik.com/aspnet-ajax/notification/examples/waiariasupport/defaultcs.aspx (the primary feature here is checking if there are errors, not the ARIA-support).

At least, I got stuck with the client having to call "showNotification()". In the example it is done by a simple button underneath the form, but in my example I'm using a relatively complex RadGrid with EditMode set to PopUp.

All in all, I want the following features:

- adding or editing a dataset should open a modal popup with edit fields in it, including buttons "update" and "cancel" (done by RadGrid EditMode="popup")
- show a RadNotification if the first two fields (shortname and definition) are empty, DO NOT close the form
- if at least the two fields are given, insert / update the dataset

I hope you can help me and I am really looking forward to a nice solution,

regards

Jan

[Angel Petrov]

Hi Jan,

Following the scenario I have assembled a sample which illustrates a possible realization. If you run the attached website you will notice that the first two fields are being validated as per the requirement. Please examine the solution provided and let us know if you have any questions regarding the implementation.

Regards,
Angel Petrov
Telerik

 

 

[Jan]

Hello Angel,

thanks very much for assembling a solution! It helped me partly, as I now know how to trigger the notification by clicking on "update"/"insert". But it still doesn't work. Is it because I use a custom edit form? I adapted your example as best as possible, and attached the custom form to this post. Maybe you can have a look at it again?
In the main form no new code is needed in my opinion, as the validation should take part in the edit form (popup).

Thanks in advance,

regards

Jan

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Fabrik_Kennzahlen_EditForm.ascx.cs"
    Inherits="Web.controls.Fabrik_Kennzahlen_EditForm" %>
<style type="text/css">
    .contentDiv
    {
        width: 300px;
        padding: 10px 30px 30px 0;
        font-family: Calibri, Arial;
        color: #4f4236;
        font-size: 13px;
    }

    .contentDiv .inputWrap
    {
        clear: both;
        margin: auto;
    }

    .contentDiv label
    {
        width: 90px;
        margin: 0 20px 0 10px;
        display: block;
        float: left;
        white-space: nowrap;
    }
    .contentDiv input
    {
        width: 100px;
        margin-bottom: 5px;
    }

    .contentDiv .submitBtn
    {
        width: 108px;
        float: right;
        margin-right: 8px;
    }

    .contentDiv .inputWrap span
    {
        color: #f00;
    }
</style>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function showNotification() {
            var notification = $find("<%=RadNotification1.ClientID %>");
            setTimeout(function () {
                notification.show();
            }, 0);
        }
        function CheckIfShow(sender, args) {
            var summaryElem = $telerik.findElement(document, "ValidationSummary1");
            var noErrors = summaryElem.style.display == "none";
            args.set_cancel(noErrors);
        }
    </script>
</telerik:RadCodeBlock>
<div class="contentDiv">
    <div class="inputWrap" style="margin-top: 5px">
        <label>
            Kürzel:</label>
        <telerik:RadTextBox ID="tb_edit_kuerzel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Kuerzel")%>'
            Width="160px" />
        <asp:RequiredFieldValidator ID="rfvKuerzel" runat="server" ControlToValidate="tb_edit_kuerzel"
            Text="*" ErrorMessage="Please, fill in a Kürzel!">
        </asp:RequiredFieldValidator>
    </div>
    <div class="inputWrap">
        <label>
            Titel:</label>
        <telerik:RadTextBox ID="tb_edit_title" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Title")%>'
            Width="160px" />
        <asp:RequiredFieldValidator ID="rfvTitel" runat="server" ControlToValidate="tb_edit_title"
            Text="*" ErrorMessage="Please, fill in a Beschreibung!">
        </asp:RequiredFieldValidator>
    </div>
    <div class="inputWrap">
        <label>
            Beschreibung:</label>
        <telerik:RadTextBox ID="tb_edit_beschreibung" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Beschreibung")%>'
            Width="160px" />
    </div>
    <div class="inputWrap">
        <label>
            Formel:</label>
        <telerik:RadTextBox ID="tb_edit_formel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Formel")%>'
            Width="160px" />
    </div>
    <div class="inputWrap">
        <label>
            Einheit:</label>
        <telerik:RadTextBox ID="tb_edit_einheit" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Einheit")%>'
            Width="160px" />
    </div>
    <br />
    <div style="float: left">
        <telerik:RadButton ID="btnUpdate" Text="Aktualisieren" runat="server" CommandName="Update"
            Visible='<%# !(DataItem is Telerik.Web.UI.GridInsertionObject) %>' Style="margin-left: 10px"
            OnClientClick="showNotification();" />
        <telerik:RadButton ID="btnInsert" Text="Erstellen" runat="server" CommandName="PerformInsert"
            Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' Style="margin-left: 10px"
            OnClientClick="showNotification();" />
    </div>
    <div style="float: right">
        <telerik:RadButton ID="btnCancel" Text="Abbrechen" runat="server" CausesValidation="False"
            CommandName="Cancel" Style="margin-right: 17px" />
    </div>
</div>
<telerik:RadNotification ID="RadNotification1" runat="server" Width="300" Animation="Fade"
    OnClientShowing="CheckIfShow" EnableRoundedCorners="true" EnableShadow="true"
    LoadContentOn="PageLoad" Title="Validation errors" OffsetX="-20" OffsetY="-20"
    TitleIcon="warning" EnableAriaSupport="true" ShowSound="warning" AutoCloseDelay="7000">
    <ContentTemplate>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server"></asp:ValidationSummary>
    </ContentTemplate>
</telerik:RadNotification>

[Jan]

Sorry, here the correct formatted code...

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Fabrik_Kennzahlen_EditForm.ascx.cs"
    Inherits="Web.controls.Fabrik_Kennzahlen_EditForm" %>
<style type="text/css">
    .contentDiv
    {
        width: 300px;
        padding: 10px 30px 30px 0;
        font-family: Calibri, Arial;
        color: #4f4236;
        font-size: 13px;
    }

    .contentDiv .inputWrap
    {
        clear: both;
        margin: auto;
    }

    .contentDiv label
    {
        width: 90px;
        margin: 0 20px 0 10px;
        display: block;
        float: left;
        white-space: nowrap;
    }
    .contentDiv input
    {
        width: 100px;
        margin-bottom: 5px;
    }

    .contentDiv .submitBtn
    {
        width: 108px;
        float: right;
        margin-right: 8px;
    }

    .contentDiv .inputWrap span
    {
        color: #f00;
    }
</style>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function showNotification() {
            var notification = $find("<%=RadNotification1.ClientID %>");
            setTimeout(function () {
                notification.show();
            }, 0);
        }
        function CheckIfShow(sender, args) {
            var summaryElem = $telerik.findElement(document, "ValidationSummary1");
            var noErrors = summaryElem.style.display == "none";
            args.set_cancel(noErrors);
        }
    </script>
</telerik:RadCodeBlock>
<div class="contentDiv">
    <div class="inputWrap" style="margin-top: 5px">
        <label>
            Kürzel:</label>
        <telerik:RadTextBox ID="tb_edit_kuerzel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Kuerzel")%>'
            Width="160px" />
        <asp:RequiredFieldValidator ID="rfvKuerzel" runat="server" ControlToValidate="tb_edit_kuerzel"
            Text="*" ErrorMessage="Please, fill in a Kürzel!">
        </asp:RequiredFieldValidator>
    </div>
    <div class="inputWrap">
        <label>
            Titel:</label>
        <telerik:RadTextBox ID="tb_edit_title" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Title")%>'
            Width="160px" />
        <asp:RequiredFieldValidator ID="rfvTitel" runat="server" ControlToValidate="tb_edit_title"
            Text="*" ErrorMessage="Please, fill in a Beschreibung!">
        </asp:RequiredFieldValidator>
    </div>
    <div class="inputWrap">
        <label>
            Beschreibung:</label>
        <telerik:RadTextBox ID="tb_edit_beschreibung" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Beschreibung")%>'
            Width="160px" />
    </div>
    <div class="inputWrap">
        <label>
            Formel:</label>
        <telerik:RadTextBox ID="tb_edit_formel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Formel")%>'
            Width="160px" />
    </div>
    <div class="inputWrap">
        <label>
            Einheit:</label>
        <telerik:RadTextBox ID="tb_edit_einheit" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Einheit")%>'
            Width="160px" />
    </div>
    <br />
    <div style="float: left">
        <telerik:RadButton ID="btnUpdate" Text="Aktualisieren" runat="server" CommandName="Update"
            Visible='<%# !(DataItem is Telerik.Web.UI.GridInsertionObject) %>' Style="margin-left: 10px"
            OnClientClick="showNotification();" />
        <telerik:RadButton ID="btnInsert" Text="Erstellen" runat="server" CommandName="PerformInsert"
            Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' Style="margin-left: 10px"
            OnClientClick="showNotification();" />
    </div>
    <div style="float: right">
        <telerik:RadButton ID="btnCancel" Text="Abbrechen" runat="server" CausesValidation="False"
            CommandName="Cancel" Style="margin-right: 17px" />
    </div>
</div>
<telerik:RadNotification ID="RadNotification1" runat="server" Width="300" Animation="Fade"
    OnClientShowing="CheckIfShow" EnableRoundedCorners="true" EnableShadow="true"
    LoadContentOn="PageLoad" Title="Validation errors" OffsetX="-20" OffsetY="-20"
    TitleIcon="warning" EnableAriaSupport="true" ShowSound="warning" AutoCloseDelay="7000">
    <ContentTemplate>
        <asp:ValidationSummary ID="ValidationSummary1" runat="server"></asp:ValidationSummary>
    </ContentTemplate>
</telerik:RadNotification>

[Angel Petrov]

Hello Jan,

Actually after revising the code I noticed that RadButtons are used for firing the PerformInsert and Update commands. Now the RadButton does not have a OnClientClick event which means that the showNotification method will not be called.

In order to resolve the problem you can use the OnClientClicked event instead like demonstrated below.

ASPX:

<telerik:RadButton ID="RadButton1" Text="Aktualisieren" runat="server" CommandName="Update"
            Visible='<%# !(DataItem is Telerik.Web.UI.GridInsertionObject) %>' Style="margin-left: 10px"
            OnClientClicked="showNotification" />
        <telerik:RadButton ID="RadButton2" Text="Erstellen" runat="server" CommandName="PerformInsert"
            Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' Style="margin-left: 10px"
            OnClientClicked="showNotification" />

Regards,
Angel Petrov
Telerik

 

 

[Jan]

Hello Angel,

thanks very much for this answer! It works as expected.

For all readers, it might be helpful to know the call of "showNotification" has to be made without " () " as it would produce strange or no function at all.