Disable button base on validation

6 posts, 0 answers
  1. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 23 Oct 2014 Link to this post

    Hi,

    I have 2 RadAutoCompleteBox and a button.

    I want the button to be disabled until both RadAutoCompleteBox have 1 entry.
    But I cannot seems to find how to do that.

    Any help would be welcomed.
  2. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 27 Oct 2014 in reply to Mickael Link to this post

    I could use some help on this please.
    I could not find anything related to it.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 28 Oct 2014 Link to this post

    Hello Mickael,

    You can attach to some of the AutoCompleteBox' client-side event (e.g., OnClientTextChanged) where you can do the necessary logic for enabling/disabling the RadButton. For example:
    ASPX:
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            function OnClientTextChanged1(sender, args) {
                ToEnableButton();
            }
            function OnClientTextChanged2(sender, args) {
                ToEnableButton();
            }
            function ToEnableButton() {
                var ACB1 = $find("<%=RadAutoCompleteBox1.ClientID%>"),
                    ACB2 = $find("<%=RadAutoCompleteBox2.ClientID%>"),
                    button = $find("<%=RadButton1.ClientID%>");
                var isACB1Empty = ACB1.get_text() == ACB1.get_emptyMessage() || ACB1.get_text() == "";
                var isACB2Empty = ACB2.get_text() == ACB2.get_emptyMessage() || ACB2.get_text() == "";;
                if (isACB1Empty == false && isACB2Empty == false) {
                    button.set_enabled(true);
                }
                else {
                    button.set_enabled(false);
                }
            }
        </script>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Some text" Enabled="false" />
        <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here" OnClientTextChanged="OnClientTextChanged1"
            DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
        </telerik:RadAutoCompleteBox>
        <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here" OnClientTextChanged="OnClientTextChanged2"
            DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
        </telerik:RadAutoCompleteBox>
        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>
    </form>

    The above code enables the RadButton when both AutoCompleteBoxes have at least one entry at the same time. You can modify this logic as per your own requirement.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 30 Oct 2014 in reply to Danail Vasilev Link to this post

    Thanks Danail for your answer.

    I tried it, and it works well but only if the AutoCompleteBox lose focus.
    Because it is only then that the OnClientTextchanged event is fired.

    I would have liked to has the event fired each time the user type/select something.
    Otherwise the user might not understand why he has to click somewhere for the button to be enabled.

    Is that possible ?

    Otherwise I will simply resort to validation on the button click
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 03 Nov 2014 Link to this post

    Hello Mickael,

    I can suggest that you set InputType="Token" property and handle OnClientEntryAdded and OnClientEntryRemoved events for both autocompleteboxes where you can call the ToEnableButton function. For example:
    ASPX:
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here" OnClientEntryAdded="ToEnableButton" OnClientEntryRemoved="ToEnableButton"
        DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
    </telerik:RadAutoCompleteBox>
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here" OnClientEntryAdded="ToEnableButton" OnClientEntryRemoved="ToEnableButton"
        DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
    </telerik:RadAutoCompleteBox>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Mickael
    Mickael avatar
    57 posts
    Member since:
    Oct 2014

    Posted 03 Nov 2014 in reply to Danail Vasilev Link to this post

    It might work I will try it.
    Thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017