AutoSelect Width and Validation

6 posts, 2 answers
  1. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 11 May 2014 Link to this post

    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
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 15 May 2014 in reply to Petur Subev Link to this post

    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






  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 19 May 2014 Link to this post

    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!
     
  6. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 19 May 2014 in reply to Petur Subev Link to this post

    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
  7. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready