@model Models.Tasking.TaskModel

<div class="modal-content">

    @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>
    }

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

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kendo UI Snippet</title>

    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css">
    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="example">
        <div id="grid"></div>
    </div>
    <br>
    <br>
    <br>
  <div id="container">
    <input id="dropdownlist" style="width:300px" />
  </div>


  <script id="templateDDL" type="text/x-kendo-template">
    <span>
      <table>
        <tr class="combo-tr">
            <td class="combo-td">${id}</td>
            <td class="combo-td">${name}</td>
            <td class="combo-td">${description}</td>
        </tr>
    </table>
    </span>
  </script>


<script>
    const maxRecords = 10000;
    let data = [];
    
    class MyData{}  

    function generateData(){
        
        for (let i = 1; i <= maxRecords; i++) {
            let myData = new MyData();

            myData.id = i;
            myData.name = "name" + i;
            myData.description = "description" + i;
            
            data.push(myData);
        }   
    }
    
    generateData();

    $(document).ready(function(){
        $("#grid").kendoGrid({
            dataSource: {
                data: data,
                schema: {
                    model: {
                        fields: {
                            id: {type: "integer"},
                            name: { type: "string" },
                            description: { type: "string" }
                        }
                    }
                },
                pageSize: 25,
                serverPaging: false,
            },
            height: 600,
            sortable: true,
            filterable: true,
            selectable: true,
            pageable: {
                previousNext:   true,    
                numeric:        true,
                buttonCount: 3,
            },
            columns: [
                { field: "id", title: "ID", width: "130px" },    
                { field: "name", title: "Name", width: "130px" },
                { field: "description", title: "Description", width: "130px" }
            ],
            filterable: false,
            scrollable: {
                virtual: false
            },
            change: function(e) {
                        changeDdl();
            },
            dataBound: function(e) {
                this.select("tr:eq(0)");
                this.content.scrollTop(0);
            }
        });

        $("#dropdownlist").kendoDropDownList({
            optionLabel: "-- Please select something --",
            width:300,
            size:"small",
            dataSource: data,
            dataTextField: "name",
            dataValueField: "name",
            template: kendo.template($("#templateDDL").html()), 
            serverPaging: true,
            virtual: {
                itemHeight: 50,
                valueMapper: function(options) {
                    $.ajax({
                        dataSource: data,
                        type: "GET",
                        dataType: "json",
                        data: convertValues(options.value),
                        success: function (data) {
                            options.success(data);
                        }
                    })
                },
            },
            open: function(e){
                const ddl_element = $("#dropdownlist").data("kendoDropDownList");
                // read the current value of ddl (startValue), comes from SetDdlValue
                const startValue = ddl_element.text();
                    
                ddl_element.setDataSource(data);

                // looking for startValue in ddl-dataSource
                const itemEqualToStartValue = ddl_element.dataSource.data().find(x=>x.name === startValue);

                // set value of ddl_element, that is equal to the startValue
                ddl_element.value(itemEqualToStartValue.name);
                ddl_element.trigger("change");
            },
            change: function(e){
            }
        });

        
        // set the DDL value for the first time 
        const grid = $("#grid").data("kendoGrid");
        const selectedItem = grid.dataItem(grid.select());
        
        const ddl_element = $("#dropdownlist").data("kendoDropDownList"); 
        SetDdlValue(ddl_element, selectedItem);
        
        function convertValues(value) {
            let data = {};
            value = $.isArray(value) ? value : [value];
            
            for (let idx = 0; idx < value.length; idx++) {
                data["values[" + idx + "]"] = value[idx];
            }
            return data;
        }
          
        // gets called when change in grid is called
        function changeDdl(){
            const grid = $("#grid").data("kendoGrid");
            const selectedItem = grid.dataItem(grid.select());
            
            const ddl_element = $("#dropdownlist").data("kendoDropDownList"); 
            SetDdlValue(ddl_element, selectedItem);
        }        

        function SetDdlValue(ddl_element, ddl_value) {      
            let TempDDS = [];
            let TempJson = { "id": ddl_value.id, "name": ddl_value.name, "description": ""};
            TempDDS.push(TempJson);
            ddl_element.setDataSource(TempDDS);
            ddl_element.value(ddl_value.name);
            ddl_element.trigger("change");
        }
    });
</script>
</body>
</html>