如何使用其中包含列表的 Kendo UI 网格打开模式

Question

我在 asp.net mvc 项目中使用 Kendo UI。

我在显示模态时遇到问题。在我的网格中，我想添加一个额外的列，其中有一个按钮。

当用户单击该按钮时，我需要显示另一个 table 的列表，该列表具有当前 table 的 ID，并以模式显示。

如果你能帮助我，我将不胜感激。

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

Answer 1

好的，您的代码看起来与演示相似 here。你只需要完成它：

首先，在页面上创建一个模式：

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

该示例使用 kendo 模板来显示详细信息，因此您可以在其中添加一个 kendo 列表（您需要使用 .ToHtmlString()，因为它是一个 nested control).我更喜欢一种不同的方法，我可以将局部视图与视图模型一起使用：

创建一个包含要显示的列表项和其他属性的视图模型：

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>

为 return 部分创建控制器操作：

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 代码将打开 window 并告诉它从控制器操作加载局部视图：

<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)")

编辑 - 或为您的按钮使用模板：

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

如何使用其中包含列表的 Kendo UI 网格打开模式

How to open a modal using Kendo UI grid that has a list inside it

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc