Как открыть модальное окно с помощью сетки пользовательского интерфейса Kendo, внутри которой есть список

Я использую 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"))
                  ))
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
0
1 242
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, ваш код похож на демо здесь. Вам просто нужно закончить его:

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

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

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

.Click("showDetails(PersonId)")

РЕДАКТИРОВАТЬ - или используйте шаблон для своей кнопки:

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

большое спасибо за ваш полный ответ. но у меня проблема с частью .click в пользовательской команде. когда я помещу это -- (#= PersonId #) -- я не увижу свой список, но когда я его удалю, я увижу свой список.

farshid torkaman 23.05.2019 06:33

@farshidtorkaman Вы можете попробовать просто (PersonId) или посмотреть мою правку для использования столбца шаблона вместо этого.

Steve Greene 24.05.2019 19:08

Другие вопросы по теме