asp. net основной вид с несколькими выпадающими списками кендо в сетке - PullRequest
Новая
       63

asp. net основной вид с несколькими выпадающими списками кендо в сетке

0 голосов
/ 26 мая 2020

У меня есть представление со столом. Каждая строка таблицы содержит два раскрывающихся списка. Первый раскрывающийся список зависит от идентификатора элемента строки, второй - от идентификатора элемента строки и выбранного значения первого раскрывающегося списка. Первый раскрывающийся список устанавливает element [i] .ElementTypeID, второй устанавливает element [i] .ElementSubTypeID. Эта настройка работает нормально. Однако я хотел бы реализовать эту функциональность в раскрывающемся дереве кендо, так как это сэкономит много места. Однако я не знаю, как преобразовать его в раскрывающееся дерево. Я видел и пытался изменить:

https://demos.telerik.com/aspnet-core/dropdowntree/remote-data-binding https://rameshrajappan.wordpress.com/kendo-treeview-with-asp-net-mvc/ https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/nodes/node-async-expand

У меня есть проблема, как передать несколько параметров в контроллер (на основе текущей строки) и обновить правильное значение ElementTypeID и / или ElementSubTypeID в раскрывающемся дереве Kendo. Рабочий код (раскрывающиеся списки).

Часть html таблицы 

<tbody>
  @for (int i = 0; i < Model.ElementsList.Count; i++)
    {
     <tr>
       <td>
        <div class="elementTypeDiv my-auto" style="text-align:left;">
          <input id="elementType_@Model.ElementsList[i].ElementID" value="@Model.ElementsList[i].ElementSourceTypeID" reference="@Model.ElementsList[i].ElementID" class="elementType my-auto" />
        </div>
      </td>
      <td>
        <div class="elementSubTypeDiv my-auto" style="text-align:left;">
          <input id="elementSubType_@Model.ElementsList[i].ElementID"  value="@Model.ElementsList[i].ElementSourceSubTypeID" reference="@Model.ElementsList[i].ElementID"  class="elementSubType my-auto" />
        </div>
      </td>
...
</tbody>

Часть скрипта 

$(document).ready( 
...
CreateElementTypeKDD(); //creates for all table rows first dropdown
CreateElementSubTypeKDD(); //creates for all table rows second dropdown
 $(".elementType").on('change', onElementTypeChanged); //updates second dropdown on first change
...
);

    function CreateElementTypeKDD() {
        jQuery('.elementType').each(function () {
            var currentElement = $(this);
            var value = currentElement.attr("reference");
            RequestElementTypeKDDData(value);
        });
    };

function CreateElementSubTypeKDD() {
        jQuery('.elementSubType').each(function () {
            var currentElement = $(this);
            var value = currentElement.attr("reference");
            var typeValueData = $('input.elementType[reference=' + eeId + ']').data('kendoDropDownList');
            var typeID = typeValueData.value();
            RequestElementSubTypeKDDData(value, typeID);
        });
    };

function RequestElementTypeKDDData(eeID) {
        var tokenX = $('input[name="__RequestVerificationToken"]', $('#formEdit')).val();
        var myDataX = { ElementID: eeID};
        var dataWithAntiforgeryTokenX = $.extend(myDataX, { '__RequestVerificationToken': tokenX });
        $.ajax({
            url: '@Url.Action("GetElementTypeListById", "SomeController")',
            type: "POST",
            data: dataWithAntiforgeryTokenX,
            success: loadElementTypeKDDData
        });
    };

    function loadElementTypeKDDData(elementTypeData) {
        var eList = elementTypeData.eeList;
        var eeId = elementTypeData.eeId;
        var indexOfSelected = eList.findIndex(eed => eed.ItemIsSelected == true);
        if (indexOfSelected < 1) {
            indexOfSelected = 0;
        }
        $('input.elementType[reference=' + eeId + ']').kendoDropDownList({
            dataTextField: "ItemDesc",
            dataValueField: "ID",
            dataSource: eList,
            index: indexOfSelected,
            change: updateElementSelectedType
        });
    };

function RequestElementSubTypeKDDData(eeID, typeID) {
        var tokenX = $('input[name="__RequestVerificationToken"]', $('#formEdit')).val();
        var myDataX = { ElementID: eeID, ElementTypeID: typeID};
        var dataWithAntiforgeryTokenX = $.extend(myDataX, { '__RequestVerificationToken': tokenX });
        $.ajax({
            url: '@Url.Action("GetElementSubTypeListById", "SomeController")',
            type: "POST",
            data: dataWithAntiforgeryTokenX,
            success: loadElementSubTypeKDDData
        });
    };

    function loadElementTypeSubKDDData(elementSubTypeData) {
        var eList = elementSubTypeData.eeList;
        var eeId = elementSubTypeData.eeId;
        var indexOfSelected = eList.findIndex(eed => eed.ItemIsSelected == true);
        if (indexOfSelected < 1) {
            indexOfSelected = 0;
        }
        $('input.elementSubType[reference=' + eeId + ']').kendoDropDownList({
            dataTextField: "ItemDesc",
            dataValueField: "ID",
            dataSource: eList,
            index: indexOfSelected,
            change: updateElementSelectedSubType
        });
    };

Заранее благодарим за помощь.

...