Placeholder Text and value field

5 posts, 0 answers
  1. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 25 May 2014 Link to this post

    Hi I have States  Kendo Combox set up like below on a template ;which opens up on Grid Edit popup template.

    1) For some reason even if placeholder is setup ; Combobox shows first item as Object.

    2)Trying to achieve to clear the box when invalid text is entered other than in the data source.

    Getstates() returns a list of states as Name and Code fields.

    Template:
    <tr>
         <td>
              <label for="State" class="required">State:</label>
         </td>
         <td>
              <input id="State" class="k-input k-textbox" name="State" data-bind="value:State" placeholder="State" required="required" validationMessage="State.." style="width:172px;" /> 
        
         </td>
     </tr>

    Model & Field:
    schema: {
          model: { State: "State",
          fields: {State: { defaultValue: { Value: "", Text: "" }, validation: { required: true} }
               }
         }
      
    ComboBox:

    var crudServiceBaseUrl = window.applicationBaseUrl + 'api/WebApi';
            $("#State").kendoComboBox({
                    placeholder: "Select...",
                    dataTextField: "Name",
                    dataValueField: "Code",
                    dataSource: {
                        //severFiltering: true,
                        transport: {
                            read: {
                                url: crudServiceBaseUrl + "/GetStates"
                            }
                        }
                    },
                    open: function (e) {
                                          valid = false;
                                      },
                    select: function (e) {
                                          valid = true;
                                      },
                    change: function (e) {
                                          var arrayOfStrings = $.map(this.dataSource.data(), function (val) { return val.dataTextField });
                                          if (arrayOfStrings.indexOf(this.value()) == -1) {
                                              this.value('');
                                          }
                                      },
                    filter: "startswith",
                    suggest: true,
                    index: 0
                });

    Data Array:
    data: [{ Name: "Alabama, AL", Code: "AL" },{ Name: "Alaska, AK", Code: "AK" },]


  2. Chatra
    Chatra avatar
    61 posts
    Member since:
    Apr 2014

    Posted 25 May 2014 in reply to Chatra Link to this post

    1) For some reason even if placeholder is setup ; Combobox shows first item as Object.

    Please see the image attached below. missed to attach in first post
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3742 posts

    Posted 28 May 2014 Link to this post

    Hello Chatra,

    I prepared a simple demo in my attempt to replicate the issue, but to no avail. Could you please check it and let me know if I am missing something? It will be of a great help if you can modify the demo in order to reproduce the erroneous behavior.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. William
    William avatar
    1 posts
    Member since:
    Nov 2017

    Posted 24 Nov 2017 in reply to Georgi Krustev Link to this post

    The place holder in this demo is not showing up. It defaults to the 1st item in the datasource "Alabama, AL".

    Any idea why?

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1437 posts

    Posted 28 Nov 2017 Link to this post

    Hello William,

    Alabama is selected because the ComboBox' index option is set in the example Georgi has linked. In order for the placeholder text to be displayed an item should not be pre-selected: dojo example (index option not configured).

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top