This is a migrated thread and some comments may be shown as answers.

Disable button base on validation

5 Answers 176 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mickael
Top achievements
Rank 1
Mickael asked on 23 Oct 2014, 12:54 PM
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.

5 Answers, 1 is accepted

Sort by
0
Mickael
Top achievements
Rank 1
answered on 27 Oct 2014, 05:47 PM
I could use some help on this please.
I could not find anything related to it.
0
Danail Vasilev
Telerik team
answered on 28 Oct 2014, 07:42 AM
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.

 
0
Mickael
Top achievements
Rank 1
answered on 30 Oct 2014, 02:31 PM
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
0
Danail Vasilev
Telerik team
answered on 03 Nov 2014, 03:39 PM
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.

 
0
Mickael
Top achievements
Rank 1
answered on 03 Nov 2014, 06:10 PM
It might work I will try it.
Thanks
Tags
Button
Asked by
Mickael
Top achievements
Rank 1
Answers by
Mickael
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or