Kendo mvc网格详细信息模板,其中的列被限制为tabstrip中的编辑器模板

时间:2015-06-16 23:53:19

标签: asp.net-mvc-4 kendo-grid kendo-asp.net-mvc

我有一个mvc4 razor视图,包含一个带有详细模板的Kendo mvc网格,这些模板也是Kendo Tabstrip每个标签内的Kendo mvc网格。

每个细节网格都通过主网格的唯一ID链接到主网格。 当列是文本时,所有网格都可以毫无问题地呈现。

但是,一旦我开始自定义某些列,即用EditorTemplate替换文本列,那么网格就不会再渲染了。我在一些列中使用了ForeignKeyColumn,但是由于某些列的记录大小,我必须使用EditorTemplate来自定义源并限制每次传递给客户端的记录数。

这是我的视图代码。



    @(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.AssetSubType>()
      .Name("subTypeGrid")
      .Columns(columns =>
      {
		  columns.Bound(c => c.AssetSubTypeID).Hidden();
          columns.ForeignKey(c => c.AssetTypeID, (System.Collections.IEnumerable)ViewData["assetTypes"], "AssetTypeID", "Type").Width(200);
          columns.Bound(c => c.SubType).Width(300);
          columns.Bound(c => c.Description).Width(300);
          columns.Bound(c => c.ProductTypeID).Width(100);
          columns.Bound(c => c.PhysicalItem).Width(100);
          columns.Bound(c => c.LastModified).Hidden();
          columns.Bound(c => c.LastModifiedBy).Hidden();
          columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
      })
	  .
	  .
      .Editable(editable => editable.Mode(GridEditMode.InLine))
	  .ClientDetailTemplateId("SubTypeChildrenTemplate")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model =>
          {
              model.Id(p => p.AssetSubTypeID);
         })
	)  

	<script id="SubTypeChildrenTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=AssetSubTypeID#")
            .SelectedIndex(0)
            .Items(tabStrip =>
            {
                tabStrip.Add().Text("Specs").Content(@<text>
                    @(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeSpec>()
                            .Name("specGrid_#=AssetSubTypeID#")
                            .Columns(columns =>
                            {
                                columns.ForeignKey(o => o.SubTypeSpecCategoryID, (System.Collections.IEnumerable)ViewData["subTypeSpecsCat"], "SubTypeSpecCategoryID", "SpecCategory").Title("SpecCategory").Width(100);
                                columns.Bound(o => o.Spec).Width(100);
                                columns.Bound(o => o.SpecValue).Title("SpecValue").Width(100);
                                columns.ForeignKey(o => o.UnitID, (System.Collections.IEnumerable)ViewData["specUnits"], "UnitID", "SpecUnit").Width(50).Title("Unit");
                                columns.Bound(o => o.Comment).Width(100);
                                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                            })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Model(model =>
                                {
                                    model.Id(p => p.SubTypeSpecID);
                                })
                                .Read(read => read.Action("SubTypeSpecs_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                                .Update(update => update.Action("SubTypeSpecs_Update", "AssetAttribute"))
                                .Create(update => update.Action("SubTypeSpecs_Create", "AssetAttribute").Data("onAddSubItem"))
                                .Destroy(update => update.Action("SubTypeSpecs_Destroy", "AssetAttribute"))
                             )
							 .
							 .
                             .Editable(editable => editable.Mode(GridEditMode.InLine))
                             .ToClientTemplate()
                    )
                </text>);
                tabStrip.Add().Text("Attributes").Content(@<text>
                     @(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeAttribute>()
                        .Name("attributeGrid_#=AssetSubTypeID#")
                        .Columns(columns =>
                        {
                            columns.ForeignKey(c => c.AttributeValueID, (System.Collections.IEnumerable)ViewData["attributes"], "AttributeValueID", "Attribute").Title("Attribute").Width(200);
                            columns.Bound(c => c.DefaultValue);
                            columns.Bound(c => c.Description);
                            columns.Bound(c => c.LastModified).Hidden();
                            columns.Bound(c => c.LastModifiedBy).Hidden();
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                        })
                        .
                        .
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Model(model =>
                            {
                                model.Id(p => p.SubTypeAttributeID);
                                model.Field(p => p.SubTypeAttributeID).Editable(false);
                                model.Field(p => p.LastModified).Editable(false);
                                model.Field(p => p.LastModifiedBy).Editable(false);
                            })
                            .Read(read => read.Action("SubTypeAttributes_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                            .Create(create => create.Action("SubTypeAttributes_Create", "AssetAttribute").Data("onAddSubItem"))
                            .Update(update => update.Action("SubTypeAttributes_Update", "AssetAttribute"))
                            .Destroy(destroy => destroy.Action("SubTypeAttributes_Destroy", "AssetAttribute"))
                        )
                        .ToClientTemplate()
					)
                </text>);
                tabStrip.Add().Text("Parts").Content(@<text>
            		@(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypePartList>()
                        .Name("partGrid_#=AssetSubTypeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.ParentID).Hidden();
                            columns.Bound(c => c.AssetSubType).Title("SubType").ClientTemplate("\\#=AssetSubType.SubType\\#").EditorTemplateName("SubTypeEditor");
                            columns.Bound(c => c.SPartID);
                            columns.Bound(c => c.Qty);
                            columns.Bound(c => c.Description);
                            columns.Bound(c => c.InsideParent);
                            columns.Bound(c => c.LastModified).Hidden();
                            columns.Bound(c => c.LastModifiedBy).Hidden();
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                        })
						.
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model =>
                            {
                                model.Id(p => p.ID);
								model.Field(p => p.AssetSubType);
                            })
                            .Read(read => read.Action("SubTypePartLists_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                            .Create(create => create.Action("SubTypePartLists_Create", "AssetAttribute").Data("onAddSubItem"))
                            .Update(update => update.Action("SubTypePartLists_Update", "AssetAttribute"))
                            .Destroy(destroy => destroy.Action("SubTypePartLists_Destroy", "AssetAttribute"))
                        )
                        .ToClientTemplate()
					)
                </text>);
                tabStrip.Add().Text("Asset Items").Content(@<text>
            		@(Html.Kendo().Grid<EMD.Manager.ViewModels.AssetItemVM>()
                        .Name("assetItemsGrid_#=AssetSubTypeID#")
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.Asset);
                            columns.Bound(c => c.Description);
                            columns.Bound(c => c.Location).Title("Location").ClientTemplate("\\#=Location.Asset\\#").EditorTemplateName("LocationEditor");
                            columns.Bound(c => c.Owner);
                            columns.Bound(c => c.LastModified).Hidden();
                            columns.Bound(c => c.LastModifiedBy).Hidden();
                            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                        })
                        .ToolBar(toolbar =>
                        {
                            toolbar.Create().HtmlAttributes((new { onclick = "setMasterSubTypeID(this, #=AssetSubTypeID#)" }));
                        })
                       .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model =>
                            {
                                model.Id(p => p.AssetItemID);
                                model.Field(p => p.Location);
                            })
                            .Read(read => read.Action("AssetItems_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                            .Create(create => create.Action("AssetItems_Create", "AssetAttribute").Data("onAddSubItem"))
                            .Update(update => update.Action("AssetItems_Update", "AssetAttribute"))
                            .Destroy(destroy => destroy.Action("AssetItems_Destroy", "AssetAttribute"))
                        )
                        .ToClientTemplate()
					)
                </text>);
                tabStrip.Add().Text("SubType I/O").Content(@<text>
					@(Html.Kendo().Grid<EMD.DAL.Domain.Attribute.SubTypeIO>()
                            .Name("IOGrid_#=AssetSubTypeID#")
                            .Columns(columns =>
                            {
                                columns.ForeignKey(c => c.IOTypeID, (System.Collections.IEnumerable)ViewData["ioTypes"], "IOTypeID", "IType").Title("I/OType").Width(50);
                                columns.ForeignKey(c => c.FieldDeviceTypeID, (System.Collections.IEnumerable)ViewData["fieldDevices"], "FieldDeviceTypeID", "FieldDevice").Title("Field Device Type").Width(150);
                                columns.ForeignKey(c => c.EngUnitID, (System.Collections.IEnumerable)ViewData["engUnits"], "EngUnitID", "EngineeringUnit").Title("Eng Unit").Width(100);
                                columns.Bound(c => c.IOTag);
                                columns.Bound(c => c.IODescription);
                                columns.Bound(c => c.IOModule);
                                columns.Bound(c => c.IOChannelNo);
                                columns.Bound(c => c.InputLow);
                                columns.Bound(c => c.InputHigh);
                                columns.Bound(c => c.MinEngValue);
                                columns.Bound(c => c.MaxEngValue);
                                columns.Bound(c => c.FATOnly);
                                columns.Bound(c => c.LastModified).Hidden();
                                columns.Bound(c => c.LastModifiedBy).Hidden();
                                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
                            })
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Model(model =>
                                {
                                    model.Id(p => p.SubTypeIOID);
                                })
                                .Read(read => read.Action("SubTypeIOs_Read", "AssetAttribute", new { assetSubTypeID = "#=AssetSubTypeID#" }))
                                .Create(create => create.Action("SubTypeIOs_Create", "AssetAttribute").Data("onAddSubItem"))
                                .Update(update => update.Action("SubTypeIOs_Update", "AssetAttribute"))
                                .Destroy(destroy => destroy.Action("SubTypeIOs_Destroy", "AssetAttribute"))
                             )
                            .ToolBar(toolbar =>
                            {
                                toolbar.Create().HtmlAttributes((new { onclick = "setMasterSubTypeID(this, #=AssetSubTypeID#)" }));
                            })
                             .ToClientTemplate()
					)
                </text>);
            })
    )
</script>
&#13;
&#13;
&#13;

这是我的两个EditorTemplate。

&#13;
&#13;
@model object
<script>
    function valueMapper(options) {
        $.ajax({
            url: "@Url.Action("AssetItems_ValueMapper", "AssetAttribute")",
            data: convertValues(options.value),
            success: function (data) {
                options.success(data);
            }
        });
    }

    function convertValues(value) {
        var data = {};

        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }
</script>


@(Html.Kendo().DropDownListFor(m => m)
            .HtmlAttributes(new { id = "LocationDDL#=AssetSubTypeID#" })
            .Name("Location")
            .DataTextField("Asset")
            .DataValueField("AssetItemID")
        //.AutoBind(false)
            .Filter(FilterType.StartsWith)
            .MinLength(3)
            .DataSource(source =>
                    {
                        source.Custom()
                            .ServerFiltering(true)
                            .ServerPaging(true)
                            .ServerSorting(true)
                            .PageSize(5)
                            .Type("aspnetmvc-ajax")
                            .Transport(transport =>
                            {
                                transport.Read("AssetItemsDropDown_Read", "AssetAttribute");
                            })
                            .Schema(schema =>
                            {
                                schema.Data("Data").Total("Total");
                            });
                    })
        //.Events(events => events.Change("selected"))
        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
)
&#13;
&#13;
&#13;

&#13;
&#13;
@model object
<script>
    function valueMapper(options) {
        $.ajax({
            url: "@Url.Action("SubTypes_ValueMapper", "AssetAttribute")",
            data: convertValues(options.value),
            success: function (data) {
                options.success(data);
            }
        });
    }

    function convertValues(value) {
        var data = {};

        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }

</script>
    @( Html.Kendo().DropDownListFor(m => m)
            .HtmlAttributes(new { id = "SubTypeDDL#=AssetSubTypeID#" })
            .Name("AssetSubType")
            .DataTextField("SubType")
            .DataValueField("AssetSubTypeID")
            .HtmlAttributes(new { style = "width:300px" })
            .Filter(FilterType.StartsWith)
            .MinLength(3)
            .DataSource(source =>
                    {
                        source.Custom()
                            .ServerFiltering(true)
                            .ServerPaging(true)
                            .ServerSorting(true)
                            .PageSize(5)
                            .Type("aspnetmvc-ajax")
                            .Transport(transport =>
                            {
                                transport.Read("AssetSubTypesDropDown_Read", "AssetAttribute");
                            })
                            .Schema(schema =>
                            {
                                schema.Data("Data").Total("Total");
                            });
                    })
            .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
            //.Events(events => events.Change("selected"))

    )
&#13;
&#13;
&#13;

我发现导致问题的行都与使用EditorTemplate有关。一旦我对这两行进行评论,网格就会再次加载。

columns.Bound(c =&gt; c.AssetSubType)。标题(&#34; SubType&#34;)。ClientTemplate(&#34; \#= AssetSubType.SubType \#&#34;)。EditorTemplateName( &#34; SubTypeEditor&#34);

columns.Bound(c =&gt; c.Location)。标题(&#34;位置&#34;)。ClientTemplate(&#34; \#= Location.Asset \#&#34;)。EditorTemplateName( &#34; LocationEditor&#34);

根据Kendo的文档,我已经通过在#的每个实例之前放入两个(2)\反斜杠(屏幕只显示一个,但我在代码中放了两个)来逃避#hash但网格仍然没有渲染。

但是,如果我拿出这些细节网格并将它们放在一个新视图上,它们就会起作用。

我也试图为DropDownList分配唯一的名称,但它似乎没什么帮助。

非常感谢任何帮助。

0 个答案:

没有答案