我在ajax表单中使用了一个剑道下拉列表小部件。当表单加载时，我需要初始化下拉列表，设置其数据源，并基于两个值（复合键）编程设置所选下拉列表项。然而，我的www.example.com（function（））中的return语句没有执行，ddAssignee.select我有一个单独的按钮，用于在表单加载后选择下拉项（"Take It"按钮），它工作正常。我只是想弄清楚在设置数据源后缺少了什么，导致dataSource.view（）仍然为空。 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.
select（）文档中的Kendo下拉列表包含以下内容：如果小部件未绑定（例如，autoBind设置为false），select方法将不会在继续选择和值设置之前预提取数据（与value方法不同），并且不会选择任何项目。
但是，将autoBind设置为true仍然不能解决问题。
我已附上：

编辑表单的屏幕截图
使用ajax表单编辑表单html
InitAssigneeDropdown（）基本下拉列表初始化
GetAllAssigneesDataSource（）通过kendo.data.DataSource返回下拉列表的远程数据
onEditTask函数（当点击按钮打开编辑表单时执行-问题发生的位置）
"接受"按钮事件（其中select（function（））成功运行）

任何帮助都是非常感谢的。谢谢!

@model模型.任务分配.任务模型

@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");
        }
    }
});

}）;

1条答案

按热度按时间

rsaldnfx1#

这仍然适用：如果小部件未绑定（例如，autoBind设置为false），select方法将不会在继续选择和值设置之前预提取数据（与value方法不同），并且不会选择任何项目。
当autoBind设置为true时，调用setDataSource（）时，数据源将立即调用服务器：

ddAssignee.setDataSource(dataSource);

然而，它是异步执行的，同时你的代码继续执行。响应还没有返回，小部件还没有绑定，因此datasource.view（）也没有填充。这就是为什么select（）不起作用的原因。"Take It"按钮起作用是因为在使用时小部件已经绑定。
你可以通过将select（）的调用放在setTimeout中来证明我是对的：

setTimeout(function () {
    ddAssignee.select(function (dataItem) {
        return dataItem.AssigneeTypeFK == assigneeTypeFK && dataItem.AssigneeFK == assigneeFK;
    });
}, 5000);  // Assuming 5 seconds is long enough

当然，这是一个糟糕且不可靠的解决方法，最好的方法是使用下拉列表中的dataBound事件，当它触发时，你知道小部件是绑定的，然后你可以通过编程选择一个值。
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/databound
或者，考虑一下是否可以使用value（）而不是select（），因为在继续执行代码之前，它会等待数据被提取和绑定。

赞(0）回复(0）举报 2023-02-12

jquery 在setDataSource()之后使用select()时出现Kendo下拉列表问题

1条答案

相关问题

热门标签

最新问答