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

AutoSelect Width and Validation

5 Answers 87 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Chatra
Top achievements
Rank 1
Chatra asked on 11 May 2014, 11:58 PM
Hi ,

1)
When I set the Width of AutoSelect  in below demo for State filed;  it does also changing auto search filter  on column. Can you guys please suggest a solution.
And Autoselect for State field width not looking same in all browsers. In IE9 Autoselect width looks similar to  all other fields in the form. But when we take it on Chrome "State" field looks much bigger.

2) And also can you help in validating Autoselect  for State field.I   am trying to clear the Autoselect field when non existing datavalue is typed in the State field but that is not working. Can you please help.
//create AutoComplete UI component
                      $("#State").kendoAutoComplete({
                          dataTextField: "text",
                          dataValueField: "value",
                          open: function (e) {
                              valid = false;
                          },
                          select: function (e) {
                              valid = true;
                          },
                          close: function (e) {
                              // if no valid selection - clear input
                              if (!valid) this.value('');
                          },
                          dataSource: autoCompleteStates,
                          placeholder: "Select States..."
                      });
Note: Demo doesn't have Scripts (Kendo/Js) included.

Thanks,
Chatrapathi Chennam

5 Answers, 1 is accepted

Sort by
0
Accepted
Petur Subev
Telerik team
answered on 14 May 2014, 08:13 AM
Hello Chatra,

1) You initialize the AutoComplete widget multiple times,
       - once with the data-role=autocomplete (it will be initialized automatically because it is the editor template of theGrid)
       - once with javaScript inside your edit event
2) This is not supported out-of-the-box. You use the change event and loop through the items of the DataSource is if there is no item matching the current value you can clear the value.

Here is an example:

http://trykendoui.telerik.com/@pesho/ukEF

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chatra
Top achievements
Rank 1
answered on 15 May 2014, 08:51 PM
Hi Petur,

Thanks for the reply.

For some reason the change event not working as expected in my demo. I could see it works in your demo.

This statement always returning true and it is clearing even if it is valid selection in my demo.

 this.dataSource.data().indexOf(this.value()) == -1

Thanks,
Chatrapathi Chennam






0
Petur Subev
Telerik team
answered on 19 May 2014, 11:43 AM
Hello Chatra,

Could you demonstrate your case? Please notice that if you are using separator, so the user can enter multiple values, indeed it won't work because there is not such item in the dataSource.

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chatra
Top achievements
Rank 1
answered on 19 May 2014, 02:01 PM
Hi Petur,

In my case I have data array as below. And I has separator (,) and that could be the reason statement always return true.

data: [{ dataTextField: "", dataValueField: "" },
       { dataTextField: "Alabama, AL", dataValueField: "AL" },
                 { dataTextField: "Alaska, AK", dataValueField: "AK" },
                { dataTextField: "Arizona, AZ", dataValueField: "AZ" },]
 And if i have dataTextField with only State name and without StateCode it does work fine in my demo.But In your Demo even if you have Separator after the State name with the code it does work for you like below.

  var data = [
                            "Norway, NO",
                            "United Kingdom, UK",]

Thanks,
Chatrapathi chennam
0
Accepted
Petur Subev
Telerik team
answered on 21 May 2014, 08:25 AM
Hello Chatra,

This is because in your case you are using objects and in my scenario I am just using array of strings. In order to use the IndexOf method you must first map that array of objects.

Here is a small demo:

http://trykendoui.telerik.com/@pesho/ukEF/4

I hope this helps.

Kind Regards,
Petur Subev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
AutoComplete
Asked by
Chatra
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Chatra
Top achievements
Rank 1
Share this question
or