Delete item from kendo dropdownlist leaves empty item in list

[Jan-Frederik]

Hi, I have a kendo dropdownlist which offers the option to remove items with a link. I used Template/ValueTemplate to achieve this.

@(Html.Kendo().DropDownList()
      .HtmlAttributes(new { @class = "form-control" })
      .Name("dataSelect")
      .DataTextField("Text")
      .DataValueField("Value")
      .Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .DataSource(ds => ds
         .Read(read => read
         .Url("/Data?handler=ReadData").Data("getForgeryToken")
)))
function deleteItem(itemId) {    
            var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
            $.ajax({
                type: "POST",
                url: "/Data?handler=DeleteItem",
                headers:
                {
                    "RequestVerificationToken": data.__RequestVerificationToken
                },
                data: {
                    itemId: itemId,
                },
                success: function (response) {
                    $('#dataSelect').data("kendoDropDownList").dataSource.read();
                },
                failure: function (response) {
                }
            });
        }

This basically works, but the problem is that an empty item (which has neither a text nor a value) remains in the dropdown list, even though I reload the datasource of the control. Is there a way to get rid of this item? Is something wrong with my configuration of the control?

[Mihaela]

Hi Jan-Frederik,

To remove a specified DropDownList item, I would recommend the following:

• Set the updated data collection that is returned to the client ("DeleteItem" handler) to the data() method of the DataSouce.
• Select the first available item in the DropDownList. Otherwise the removed item will remain selected in the editor.

function deleteItem(itemId) {    
            var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
            $.ajax({
                type: "POST",
                url: "/Data?handler=DeleteItem",
                headers:
                {
                    "RequestVerificationToken": data.__RequestVerificationToken
                },
                data: {
                    itemId: itemId,
                },
                success: function (response) {
                    $('#dataSelect').data("kendoDropDownList").dataSource.data(response);
                    $('#dataSelect').data("kendoDropDownList").select(0);
                },
                failure: function (response) {
                }
            });
        }

Also, you can prevent the anchor tags redirect to "/":

 .Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\\#\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
.ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\\#\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")

I hope that helps.

 

 

Regards, Mihaela Progress Telerik