Add value to ComboBox datasource not working?

8 posts, 0 answers
  1. Sean
    Sean avatar
    10 posts
    Member since:
    May 2013

    Posted 17 May 2013 Link to this post

    Hello,

    This may be because I am doing an Ajax post but I have the following and the kendo grid read method works fine.   I am trying to add a value to my kendo combox.  I also tried just a read call on the combobox to reload it and that also doesn't get into the controller action for the read.

    <script type="text/javascript">
    $(document).on('click', '.add-user', function(){
    kendo.ui.progress($("#UserGrid"), true);

    $("a.add-user").addClass("k-state-disabled");
    $('a.add-user').on('click.disabled', false);

    var koUserName = $("#UserName").data("kendoComboBox");
    var koValue = $.trim(koUserName.value());

    if (koValue.length) {
    $.ajax({
    url: '/User/CreateUser',
    type: "POST",
    data: { username: koValue },
    success: function (data) {
    $('#UserGrid').data("kendoGrid").dataSource.read();
    $("a.add-user").removeClass("k-state-disabled");
    kendo.ui.progress($("#UserGrid"), false);
    $('a.add-user').off('click.disabled');

    var ds = $('#UserName').data().kendoComboBox.dataSource;
    ds.add({ text: "Test again!", value: "5" });  //doesn't work

    //$('#UserName').data("kendoComboBox").dataSource.read();  also does not work and get into the read method
     },
    error: function() {
    alert("error");
    }
    });
    }
    });
    </script>

    This is my combobox:
    @(Html.Kendo().ComboBox()
    .Name("UserName")
    .Filter(FilterType.Contains)
    .DataTextField("FirstLastName")
    .DataValueField("UserName")
    .HtmlAttributes(new {@style = "width:300px;"})
    .Placeholder("Search Active Directory")
    .DataSource(dataSource => dataSource
    .Read(read => read.Action("ADList_Read", "User"))
    ))
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 May 2013 Link to this post

    Hello Sean,


    The syntax for adding an item to the ComboBox dataSource via the add() method seems correct. If the read() method is called afterwards it will completely override the current dataSource data. Unfortunately I was unable to find the reason for the strange behavior from the provided code sample. Could you please send me a small sample project, where the issue is reproducing, so I could test it locally and assist you further?

    I am looking forward to hearing from you.

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    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. Sean
    Sean avatar
    10 posts
    Member since:
    May 2013

    Posted 21 May 2013 Link to this post

    Here is what I have.  Attached is the cshtml view and controller.

    You can look at the:

    $(document).on('click', '.add-user', function () {

    area that is where on success I get into.  I hit the alert I have just fine as well.

    The new text is not found when I filter at all.

    attached sample zip.
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 May 2013 Link to this post

    Hello Sean,


    The reason for the issue in the current implementation is that the user object, to which the ComboBox is bound to does not have text and value fields i.e. those are not the correct DataTextField and DataValueField. The new object is added correctly to the dataSource, but the ComboBox renders it as undefined. This is why it is not found when filtering. Here is the modified example.
    E.g.
    var ds = $('#UserName').data().kendoComboBox.dataSource;
    ds.add({ FirstLastName: "Test again!", UserName: "5" });

    Please let me know if this information was helpful for you. 

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Sean
    Sean avatar
    10 posts
    Member since:
    May 2013

    Posted 21 May 2013 Link to this post

    Wow not sure how I missed that thanks.  Last follow-up then I will close this.  How do I remove an item based on the username I have then clear the combobox so it shows the place holder again after the save?   I want to remove the added username from the box versus add actually.

    Thanks again for your input.
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 23 May 2013 Link to this post

    Hi Sean,


    To achieve this, you could use the remove() method of the dataSource to remove the item from it and then use the value() method of the ComboBox to clear it's value and display the placeholder again.

    E.g.
    var combo = $("#combo").data("kendoComboBox");
    var currentIndex = combo.current().index();
    var currentModel = combo.dataSource.view()[currentIndex];
    combo.dataSource.remove(currentModel);
    combo.value([]);

     
    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Sean
    Sean avatar
    10 posts
    Member since:
    May 2013

    Posted 03 Jun 2013 Link to this post

    Hello,

    Sorry I need one more follow-up to this.   So what is posted for removing the current index from the combobox works perfect.  However, what if I want to remove an item by the value not by the selected current index?   Right now I am having to set the value of the combobox in a loop I have then call the remove passing for example:

    in a for loop:

    koContactName.value(griddata[i].ContactID);
    var currentIndex = koContactName.current().index();
    var currentModel = koContactName.datasource.view()[currentIndex];
    koContactName.datasource.remove(currentModel);

    Now this works but I would rather not have to set the current index then remove.  I have the value I am looking for in the value of the combobox.

    Then last I am finding something odd where if I iterate and remove 'all' the items one by one in the loop from the combobox the box now shows all of them again.

    Thanks for any help.

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 05 Jun 2013 Link to this post

    Hello Sean,


    Currently this is the most suitable approach to access the element to be removed. You could also use the dataItem method, which similarly accepts the index as a parameter.

    Regarding your second question, if a server filtering is used in the current implementation, by default the ComboBox will read data from the server when the dropdown list is opened, if the dataSource is empty.

    I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    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