AutoSelect Width and Validation

[Chatra]

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

[Petur Subev]

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

 

 

[Chatra]

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

[Petur Subev]

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

 

 

[Chatra]

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

[Petur Subev]

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