Как открыть модал с помощью сетки Kendo UI, в которой есть список - PullRequest
Новая
       20

Как открыть модал с помощью сетки Kendo UI, в которой есть список

1 голос
/ 22 мая 2019

Я использую Kendo UI в моем проекте asp.net mvc.

У меня проблема с отображением модального режима. В моей сетке я хочу добавить дополнительный столбец, в котором есть кнопка.

Когда пользователь нажимает эту кнопку, мне нужно показать список из другой таблицы с идентификатором текущей таблицы и показать его в модальном режиме.

Я был бы очень признателен, если бы вы могли мне помочь. 

@(Html.Kendo().Grid<ClinicManagement.Models.Reagent>().Name("PersonGrid")
                            .Name("PersonGrid")
                            .Columns(columns =>
                            {
                                columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Bound(p => p.Family).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Bound(p => p.CardNumber).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains))).Width(90);
                                columns.Command(command => command.Custom("ViewDetails").Click("showDetails")).Width(150);
                            })
                           .DataSource(dataSource => dataSource
                               .Ajax()
                               .PageSize(20)
                               .Events(events => events.Error("error_handler"))
                               .Sort(sort => sort.Add(p => p.Name).Ascending())
                               .Model(model => model.Id(p => p.Id))
                               .Create(update => update.Action("Create", "Reagents"))
                               .Read(read => read.Action("ReadReagent", "Reagents"))
                               .Update(update => update.Action("Edit", "Reagents"))
                               .Destroy(destroy => destroy.Action("Delete", "Reagents"))
                  ))

1 Ответ

1 голос
/ 22 мая 2019

ОК, ваш код выглядит как демо здесь .Вам просто нужно закончить:

Сначала создайте модал на странице: 

@(Html.Kendo().Window().Name("Details")
    .Title("Customer Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)       
)

В примере используется шаблон кендо для отображения деталей, поэтому вы можете добавить список кендотам (вам нужно будет использовать .ToHtmlString(), так как это вложенный элемент управления ).Я предпочитаю другой подход, в котором я могу использовать частичное представление с моделью представления:

Создание модели представления с отображаемыми элементами списка и другими свойствами: 

public class DetailsViewModel
{
    public int PersonId { get; set; }
    public string Name { get; set; }
    ... etc
    public List<string> MyListItems;
}

Создание частичного представлениядля деталей со списком (или сеткой) на нем: 

@model DetailsViewModel
<div>
... // Show fields, etc.
@(Html.Kendo().ListBox()
    ... other list options
    .BindTo(Model.MyListItems)
    .Deferred()   // Need for nested control
</div>

Создайте действие контроллера для возврата частичного: 

public PartialViewResult GetDetailsView(int personId)
{
    // fetch data
    // Fill the viewmodel 
    var vm = new DetailsViewModel
    {
        PersonId = data.PersonId,
        Name = data.Name,
        MyListItems = context.Items.Where(i => i.PersonId == personId).ToList()
    }
    return PartialView("_Details", vm);
}

Код JavaScript для нажатия кнопки откроетокно и сказать ему, чтобы загрузить частичное представление из действия контроллера: 

<script type="text/javascript">
    function showDetails(personId) {
        var wnd = $("#Details").data("kendoWindow");
        wnd.refresh({
            url: '@Url.Action("GetDetailsView","Person", new { personId = "__personid__" })'
                        .replace("__personid__", personId )
                });
        wnd.open();
    }
</script>

Наконец, измените пользовательскую команду для передачи в Id: 

.Click("showDetails(PersonId)")

EDIT - или используйте шаблон дляВаша кнопка: 

columns.Template(t => { }).Width(150)
       .ClientTemplate(@"<a class='btn btn-info btn-xs' onclick="showDetails(PersonId)">Details</a>");
...