Add value to ComboBox datasource not working?

[Sean]

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"))
))

[Dimiter Madjarov]

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

[Sean]

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.

[Dimiter Madjarov]

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

[Sean]

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.

[Dimiter Madjarov]

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

[Sean]

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.

[Dimiter Madjarov]

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