Kendo DropDownList issue using select() after setDataSource() - Jquery

AnnaKegley
February 9, 2023
167 views
0 votes
2 Answers

I am using a kendo dropdownlist widget in an ajax form. When the form loads, I need to initialize the dropdown, set its datasource, and programmatically set the selected dropdown item based on two values (compound key). However, the return statement in my ddAssignee.select(function()) does not execute, so nothing gets selected. I checked the contents of ddAssignee.dataSource.view() immediately after calling setDataSource() and it was empty, so I’m assuming this is why nothing gets selected. However, I have a separate button that is used to select the dropdown item after the form loads ("Take It" button), which works fine. I’m just trying to figure out what is missing after setting the datasource that is causing the dataSource.view() to still be empty.

Kendo dropdownlist has this in the select() documentation:
"If the widget is not bound (e.g. autoBind is set to false), the select method will not pre-fetch the data before continuing with the selection and value setting (unlike the value method), and no item will be selected."

However, setting autoBind to true still does not solve the problem.

I have attached:

Screenshot of the edit form
Edit form html with ajax form
InitAssigneeDropdown() basic dropdown initialization
GetAllAssigneesDataSource() returns the remote data for the dropdown via kendo.data.DataSource
onEditTask function (executes when button is clicked to open the edit form – where issue happens)
"Take It" button event (where select(function()) works successfully)

Any help is greatly appreciated. Thanks!

@model Models.Tasking.TaskModel

@using (Ajax.BeginForm("SaveEditTask", "Tasking", null, new AjaxOptions()
{
    UpdateTargetId = "frmEditTask",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "taskingSaveSuccess"
}, new { id = "frmEditTask", autocomplete = "off" }))
{
    <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Edit Task</h5>
    </div>
    <div class="modal-body" style="max-height:70vh; overflow-y:auto">
        @Html.AntiForgeryToken()

        @Html.ValidationSummary(false, "", new { @class = "text-danger" })

        @Html.HiddenFor(m => m.ID)
        @Html.HiddenFor(m => m.PtOID)
        @Html.HiddenFor(m => m.PtMRN)
        @Html.HiddenFor(m => m.CreatedByUserFK)
        @Html.HiddenFor(m => m.CreatedDTTM)

        <div class="form-group">
            @Html.LabelFor(m => m.PtFullName, new { @class = "text-dark font-weight-bold" })
            @Html.TextBoxFor(m => m.PtFullName, new { @class = "form-control mb-2", @readonly = "readonly" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.TypeFK, new { @class = "text-dark font-weight-bold" })
            @Html.DropDownListFor(m => m.TypeFK, (IList<SelectListItem>)ViewBag.TaskTypeOptions, new { @class = "form-control p-1 w-auto mb-2", @disabled = "disabled", @readonly = "readonly" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.StatusFK, new { @class = "text-dark font-weight-bold" })
            <br />
            @Html.DropDownListFor(m => m.StatusFK, (IList<SelectListItem>)ViewBag.TaskStatusOptions, new { @id = "ddTaskStatusType", @class = "form-control p-1 w-auto mb-2" })
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.PriorityFK, new { @class = "text-dark font-weight-bold" })
            <br />
            @Html.DropDownListFor(m => m.PriorityFK, (IList<SelectListItem>)ViewBag.TaskPriorityOptions, new { @id = "ddTaskPriorityType", @class = "form-control p-1 w-auto mb-2", data_default_due_date_url = Url.Action("GetDefaultDueDate", "Tasking", new { area = "" }) })
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.DueDTTM, new { @class = "text-dark font-weight-bold" })
            @if (Model.CreatedByUserFK == User.Identity.GetUserId())
            {
                @(Html.Kendo().DateTimePickerFor(m => m.DueDTTM).HtmlAttributes(new { @id="dtpTaskDueDate", data_toggle = "tooltip", data_placement = "bottom", data_trigger = "focus", required = "required" }))
            }
            else
            {
                @Html.TextBoxFor(m => m.DueDTTM, new { @class = "form-control mb-2", @readonly = "readonly" })
            }
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.AssigneeFK, new { @class = "text-dark font-weight-bold" })
            <br />
            <div class="row">
                <div class="col-9 pr-0">
                    <select id="ddTaskAssignee" name="AssigneeFK" data-all-assignees-url="@Url.Action("GetAllTaskAssigneeOptions", "Tasking", new { area = "" })" />
                </div>
                <div class="col-3 pl-2">
                    <button id="btnSelfAssignTask" type="button" class="btn btn-secondary" data-user-id-url="@Url.Action("GetUserId", "Tasking", new { area = "" })">Take It</button>
                </div>
            </div>
            @Html.HiddenFor(m => m.AssigneeTypeFK, new { @id = "hiddenAssigneeTypeFK" })
        </div>

        <div class="form-group">
            @Html.LabelFor(m => m.Description, new { @class = "text-dark font-weight-bold" })
            @if (Model.CreatedByUserFK == User.Identity.GetUserId())
            {
                @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
            }
            else
            {
                @Html.TextAreaFor(m => m.Description, new { @class = "form-control", @readonly = "readonly" })
            }
        </div>

    </div>

    <div class="modal-footer">
        @if (Model.CreatedByUserFK == User.Identity.GetUserId())
        {
            <button id="btnDeleteTask" type="button" class="btn btn-danger" data-target-url="@Url.Action("DeleteTask", "Tasking", new { area = "" })">Delete Task</button>
        }
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
}

function initAssigneeDropDown() {
$("#ddTaskAssignee").kendoDropDownList({
    optionLabel: 'Select Assignee ...',
    filter: "contains",
    dataTextField: 'AssigneeName',
    dataValueField: 'AssigneeFK',
    template: function (dataItem) {
        //TODO - improve logic
        if (dataItem.AssigneeTypeFK == 1)
            return '<span><i class="fas fa-user pr-2"></i>' + dataItem.AssigneeName + '</span>';
        else if (dataItem.AssigneeTypeFK == 2)
            return '<span><i class="fas fa-users pr-2"></i>' + dataItem.AssigneeName + '</span>';
    }
});

}

function getAllAssigneesDataSource() {
var url = $('#ddTaskAssignee').data('all-assignees-url');

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "POST",
            url: url
        }
    }
});

return dataSource;

}

function onEditTask(e) {
//Fetch the ID, assigneeTypeFK, and assigneeFK from the grid item that's getting edited
var grid = $('#taskGrid').data('kendoGrid');
var taskDataItem = grid.dataItem($(e).closest("tr"));
var taskId = taskDataItem.ID;
var assigneeTypeFK = taskDataItem.AssigneeTypeFK;
var assigneeFK = taskDataItem.AssigneeFK; 

$('#taskModal').modal('show'); //Show the edit modal

$('#taskModal .modal-content').html(''); //Clear out the modal container

//ajax to return partial view for editing task
$.ajax({
    url: $(e).data("target-url"), 
    type: "POST",
    cache: false,
    data: JSON.stringify({ taskId: taskId }), //Pass the task id to controller
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        $('#taskModal .modal-content').replaceWith(response); //add edit view html to modal

        initAssigneeDropDown();
        var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
        ddAssignee.setDataSource(dataSource);
        var assigneeDataSourceView = ddAssignee.dataSource.view(); //Issue - this is empty so select (below) will not work

        ddAssignee.select(function (dataItem) {
            return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
        });

    },
    error: function (jqXHR, exception) {
        if (jqXHR.statusText !== 'abort') {
            // Our error logic here
            $('#kNotification').data('kendoNotification').error("An error occurred while loading the page.");
        }
    }
});

}

$('#taskModal').on('click', '#btnSelfAssignTask', function (e) {

//Ajax to return the current user's ID from the controller
$.ajax({
    url: $(e.currentTarget).data("user-id-url"),
    type: "POST",
    cache: false,
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        var userId = response;

        //Set the value of the dropdown based on the user's id
        var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
        var assigneeDataSource = ddAssignee.dataSource.view(); //For testing
        //TODO improve logic
        ddAssignee.select(function (dataItem) {
            return dataItem.AssigneeTypeFK == 1 && dataItem.AssigneeFK == userId;
        });
    },
    error: function (jqXHR, exception) {
        if (jqXHR.statusText !== 'abort') {
            $('#kNotification').data('kendoNotification').error("An error occurred while assigning task");
        }
    }
});

});

Answers

Chosen as BEST ANSWER

Telerik provided me with the following solution, which works perfectly. However, I had already tried putting my logic in the dataBound event when initializing the dropdown, which still produces the issue. Not sure what the difference is, but this works!

initAssigneeDropDown();
var assigneeDataSource = getAssigneeDataSource(assigneeTypeFK);
var ddAssignee = $('#ddTaskAssignee').data('kendoDropDownList');
// Bind the databound event to the DropDownList once
ddAssignee.one("dataBound", () => {
      // Log the view to check the data.
      console.log(ddAssignee.dataSource.view())

      // Call the select method.
      ddAssignee.select(function (dataItem) {
          return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
      });
});
ddAssignee.setDataSource(assigneeDataSource);

(Edit)

- NigelK
- February 10, 2023 at 12:58 am
- 0 votes
0
This still applies: "If the widget is not bound (e.g. autoBind is set to false), the select method will not pre-fetch the data before continuing with the selection and value setting (unlike the value method), and no item will be selected."

With autoBind set to true, the datasource will call the server immediately when setDataSource() is called:
```
ddAssignee.setDataSource(dataSource);
```
However it does that asynchronously and your code continues execution in the meantime. The response has not yet come back, the widget is not yet bound and the datasource.view() is therefore not populated either. Which is why the select() does not work. The "Take It" button works because by the time that is used the widget has bound.

You can prove whether I’m right by putting the call to select() in a setTimeout:
```
setTimeout(function () {
    ddAssignee.select(function (dataItem) {
        return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
    });
}, 5000);  // Assuming 5 seconds is long enough
```
That’s a terrible and unreliable way to actually resolve this of course. The best way is to use the dataBound event on the dropdownlist. When that fires you know the widget is bound and you can then programatically select a value.

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/databound

Alternatively consider whether you can use value() instead of select() because that does wait for the data to be fetched and bound before continuing with your code execution.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Kendo DropDownList issue using select() after setDataSource() – Jquery

Answers