Как заполнить Kendo ButtonGroup динамически в JavaScript - PullRequest
Новая
       19

Как заполнить Kendo ButtonGroup динамически в JavaScript

0 голосов
/ 05 декабря 2018

Я хочу заполнить Kendo ButtonGroup динамически в JavaScript.Как это сделать?

У меня есть одна группа кнопок ButtonGroup, на основе которой создаются кнопки для некоторого списка , который доступен в MyViewModel .Затем, основываясь на первом выборе ButtonGroup (означает, какой элемент из Список был выбран), я хотел бы заполнить вторую ButtonGroup, основываясь на Список , который доступен в Модель MyFirstLevel .

Средства: 

public class MyViewModel
{
   public List<MyFirstLevel> MyFirstLevelCollection {get; set;}
]

public class MyFirstLevel
{
   public List<MySecondLevel> MySecondLevelCollection {get; set;}
]

Мой cshtml Интерфейс выглядит следующим образом: 

@model MyViewModel

<script type="text/javascript">
    $(function () {
        $("#MyFirstLevelCollection").kendoMobileButtonGroup({
            index: 0,
            select: onMyFirstLevelCollectionChange
        });
        $("#MyFirstLevelCollection").removeClass("k-widget");
    });

    function onMyFirstLevelCollectionChange(e) {
        var myFirstLevelCollectionItemId = $("#MyFirstLevelCollection .km-state-active").attr("data-option-value");

        // What to do, to fill in the *MySecondLevelCollection*?
    }
 </script>
<table class="form">
    <tr>
        <td>
            <div>
                    @(Html.Kendo().MobileButtonGroup()
                                .Name("MyFirstLevelCollection")
                                .Items(items =>
                                {
                                    foreach (var myFirstChildCollectionItem in Model.MyFirstLevelCollection)
                                    {
                                        items.Add().Text(myFirstChildCollectionItem.Name).HtmlAttributes(new { data_option_key = "MyFirstLevelCollection", data_option_value = myFirstChildCollectionItem.Id });
                                    }
                                }))
            </div>
            <div>
                    @(Html.Kendo().MobileButtonGroup()
                                .Name("MySecondLevelCollection")
                                .Items(@* Here I cannot put items. I want to put them, on *MyFirstLevelCollection* change *@))
            </div>
            <div>
                // Rest of UI
        </td>
    </tr>
</table>
...