Kendo Grid 外键列动态绑定 [英] Kendo Grid Foreign key column bind dynamically

问题描述

@(Html.Kendo().Grid((IEnumerable)Model.contact_lst).Name("网格").Columns(columns =>{column.Bound(o => o.ContactID).Visible(false);column.Bound(o => o.ContactName).Title("联系人姓名");columns.ForeignKey(p => p.CPOID, (System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po").Title("公司 - 联系方式/采购订单");column.Command(command => { command.Edit(); command.Destroy(); }).Width(182);}).ToolBar(toolbar => toolbar.Create()).Editable(editable => editable.Mode(GridEditMode.InLine)).Pageable().Sortable().Filterable().ToolBar(工具栏 =>{工具栏.模板(@<文本><div class="工具栏"><a href="/Contact/EditingInline_Read?grid-mode=insert" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>添加新记录</a><label class="category-label" for="category">站点:</label>@(Html.Kendo().DropDownListFor(m => m.SiteID).Name("站点ID").DataTextField("文本").DataValueField("值").Events(e => e.Change("categoriesChange")).Value(Model.SiteID.ToString()).DataSource(ds =>{ds.Read("ToolbarTemplate_Categories", "联系人");}))

</text>);}).DataSource(dataSource => 数据源.Ajax().PageSize(20).Events(events => events.Error("error_handler")).Model(model => model.Id(p => p.ContactID)).Create(update => update.Action("EditingInline_Create", "Contact").Data("additionalInfo")).Read(read => read.Action("EditingInline_Read", "Contact").Data("additionalInfo")).Update(update => update.Action("EditingInline_Update", "Contact").Data("additionalInfo")).Destroy(update => update.Action("EditingInline_Destroy", "Contact").Data("additionalInfo"))))

我想在 SiteID 下拉列表的更改事件中重新绑定外键列值，该下拉列表位于标题模板上.我在EditingInline_Read"事件中尝试过，但 ViewBag 值没有更新.有什么建议?

解决方案

Kendo 网格不支持动态重新绑定.你能得到的最接近的事情是定义一个自定义的编辑器模板使用 AJAX 绑定数据.

columns.ForeignKey(p => p.CPOID,(System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po").Title("公司 - 联系方式/采购订单").EditorTemplateName("RemoteForeignKey");

RemoteForeignKey 编辑器模板

@model int@(Html.Kendo().DropDownListFor(m => m).DataSource(源=>{source.Read(读=>{read.Action("actionName", "controllerName").Type(HttpVerbs.Post).Data("dataFunc");}).ServerFiltering(false);}).DataValueField("cpo_id").DataTextField("contract_po"))

dataFunc javascript 函数

function dataFunc() {返回 {SiteID: $("#SiteID").val()//这里我们将站点 ID 传递给服务器};}

和您的服务器功能

[AcceptVerbs(HttpVerbs.Post)]公共 JsonResult actionName(int? SiteID){如果(站点 ID ！= 空){var 对象 =(来自 db.tableName 中的 obj其中 obj.SiteID == SiteID.Value选择新的{cpo_id = obj.cpo_id,contract_po = obj.contract_po}).ToList().Distinct().OrderBy(obj => obj.contract_po);返回 Json(对象);}返回空；}

然后下拉列表中的值将按 SiteID 输入的当前值进行过滤.

@(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Common.ContactModel>)Model.contact_lst)  
    .Name("grid")
    .Columns(columns =>
    {

        columns.Bound(o => o.ContactID).Visible(false);
        columns.Bound(o => o.ContactName).Title("Contact Name");
        columns.ForeignKey(p => p.CPOID, (System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po")
                .Title("Company - Contact/Purchase Order");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(182);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
           <div class="toolbar">
               <a href="/Contact/EditingInline_Read?grid-mode=insert" class="k-button k-button-icontext k-grid-add">
    <span class="k-icon k-add"></span>Add New Record
</a>
                    <label class="category-label" for="category">Site:</label>
                       @(Html.Kendo().DropDownListFor(m => m.SiteID)
                            .Name("SiteID")
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .Events(e => e.Change("categoriesChange"))
                            .Value(Model.SiteID.ToString())
                            .DataSource(ds =>
                            {
                                ds.Read("ToolbarTemplate_Categories", "Contact");
                            })
                        ) 

                        </div>

        </text>);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ContactID))
        .Create(update => update.Action("EditingInline_Create", "Contact").Data("additionalInfo"))
        .Read(read => read.Action("EditingInline_Read", "Contact").Data("additionalInfo"))
        .Update(update => update.Action("EditingInline_Update", "Contact").Data("additionalInfo"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Contact").Data("additionalInfo"))

    )
)

I want to rebind the foreign key column values on change event of SiteID dropdown, which is on the header template. I tried within "EditingInline_Read" event but ViewBag values does not update. Any suggestions?

解决方案

Kendo grid does not support dynamic rebinding. The closest thing you can get is to define a custom Editor Template which binds data using AJAX.

columns.ForeignKey(p => p.CPOID, 
(System.Collections.IEnumerable)ViewData["CPOs"], "cpo_id", "contract_po")
.Title("Company - Contact/Purchase Order")
.EditorTemplateName("RemoteForeignKey");

RemoteForeignKey Editor Template

@model int

@(Html.Kendo().DropDownListFor(m => m)
  .DataSource(source =>
  {
      source.Read(read =>
      {
          read.Action("actionName", "controllerName").Type(HttpVerbs.Post).Data("dataFunc");
      }).ServerFiltering(false);
  })
  .DataValueField("cpo_id")
  .DataTextField("contract_po")
)

dataFunc javascript function

function dataFunc () {
    return {
        SiteID: $("#SiteID").val() // here we pass the site ID to server
    };
}

and your server function

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult actionName(int? SiteID)
{
    if (SiteID != null)
    {
        var objects = (from obj in db.tableName
                       where obj.SiteID == SiteID.Value
                       select new
                       {
                           cpo_id = obj.cpo_id,
                           contract_po = obj.contract_po
                       }).ToList().Distinct().OrderBy(obj => obj.contract_po);
            return Json(objects);
    }
    return null;
}

Then the values in your dropdown will be filtered by the current value of SiteID input.

这篇关于Kendo Grid 外键列动态绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！