Add new item & select it

[Jimmy]

i have inserted a new item at server side. I need to refresh the dropdownlist and select the latest item.

i tried read, refresh & sync but it failed. Please help.

@(Html.Kendo().DropDownList()
.Name("Job.ITransfereeId")
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("Name")
.DataValueField("Id")
.OptionLabel(" ")
.FooterTemplateId("AddDataTemplate")
.Template("<span class=\"k-state-default\">#: Name #<p>#: Company # <br/>#: Email #<br/>#: UMobileDialingCode # #: UMobile #</p></span>")
.Filter(FilterType.Contains)
.DataSource(dataSource => dataSource
.Ajax()
.Read(r => r.Url("/DSContactDropDown/GetTransferee").Data("forgeryToken"))
.Events(e => e.Error("onError").RequestEnd("onRequestEnd"))
)
.Events(e => e.Change("TransfereeOnChange"))
.Value(Model.Job == null ? "0" : Model.Job.ITransfereeId == null ? "0" : Model.Job.ITransfereeId.ToString())
)

$.ajax({
            type: 'POST',
            url: '/User/SaveUser',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            datatype: "html",
            data: $('#AddUserForm').serialize(),
            success: function (result) {
                var target = $('.storedDropdownID').val();
                var dropdownlist = $("#" + target).data("kendoDropDownList");
                //var dropdownlist = $("#" + target).getKendoDropDownList();

                //Rebind the Contact
                dropdownlist.dataSource.read();
                dropdownlist.refresh();
                dropdownlist.dataSource.sync();

                //select the new contact
                var value = result.userid;
                dropdownlist.value(value);

                //console.log("value " + value);


                //Close Modal
                $('#AddNewUserModal').modal('hide');

            },
            error: function (result) {
                console.log("error");
            }
        });

[Aleksandar]

Hello Jimmy,

The DataSource read() method returns a promise that will be resolved when the data has been loaded or rejected if an HTTP error occurs. Based on the provided code snippet it looks like that the value of the DropDown list is being assigned before the dropdownlist.dataSource.read() call has returned the data. You could update the success configuration to assign the DropDownList value after data has been loaded:

$.ajax({
            ...
            success: function (result) {
                var target = $('.storedDropdownID').val();
                var dropdownlist = $("#" + target).data("kendoDropDownList");
                //var dropdownlist = $("#" + target).getKendoDropDownList();
             
              //select the new contact
                var value = result.userid;
               
                //Rebind the Contact
                dropdownlist.dataSource.read().then(function(){
                   dropdownlist.value(value);
                  });
 
                //Close Modal
                $('#AddNewUserModal').modal('hide');
 
            },
            error: function (result) {
                console.log("error");
            }
        });

If this suggestion does not resolve the issue observed could you please elaborate if there any errors logged. Ideally providing a runnable sample solution would help investigate the issue further.

Regards,
Aleksandar
Progress Telerik