Kendo 网格内联编辑模式中不显示下拉列表

问题描述 投票：0回答：1

当用户点击它进行编辑时，我想在 Kendo 网格单元格中显示一个 Kendo 下拉菜单。

这是我的代码

index.cshtml
文件网格代码

@(Html.Kendo().Grid<SvwDesignMaterialSystemAttributeDto>()
        .Name("DesignMaterialSystemAttribute")
        .Columns(columns =>
        {
            columns.Bound(m => m.MaxAcceptableValue).Hidden();

            columns.Bound(m => m.MaxAcceptableText).ClientTemplate(
                "# if (MaxAcceptableText) { #"
                    + "#=formatValueInUnit(MaxAcceptableText, UnitTypeCode)#" + " "
                + "# } #").Title("Max").Width(100);

        })
    .ToolBar(toolbar =>
    {
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell)).Pageable().Sortable()
    .Events(e => e.Edit("onEdit"))

    .Events(events => events.DataBound("function"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(true)
        .Model(model =>
        {
            model.Id(m => m.DesignMaterialSystemAttributeId);
            .....
        })
        .Events(events => events.DataBound(
                    @<text>
                    function (e) {
                        if ($('#DesignMaterialSystemAttribute').data('kendoGrid').dataSource.data().length == 0) {
                            $("#DesignMaterialSystemAttribute").find('tbody')
                                .append('<tr class="kendo-data-row"><td colspan="6" style="text-align: center"><b>No Results Found!</b></td></tr>');
                        }
                    }
                    </text>
        ))
        .AutoBind(true)
)

这是在标记同一文件内编辑点击事件

index.cshtml

<script id="myscript" type="text/javascript">

function onEdit(e)
{ 
    var field = e.sender.columns[e.container.index()].field;
    if (e.model.UnitTypeCode === "UNIT_LOOKUP_COMBOBOX") {

       var input = $("<input id='products'/>")    

       $(document).ready(function() {
            $("#products").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                        }
                    }
                }
            });
        });             

        var temp = $("#products");
        e.container.append(input);
        input.focus();

        temp.remove();
        kendo.bind(e.container, e.model);
    }
}

</script>

我采用了上面的代码 kendo Kendo 下拉示例。当我点击单元格时，它只会在编辑模式下的网格单元格上显示

Textbox
（输入）而不是下拉列表。

这就是我想要在网格内联编辑中做下拉的方式。

在第一个链接中使用了很少的剑道样式，我添加了这些样式并在控制台中收到有关剑道订阅的警告。似乎那些款式是新发布的

2023.1.117
。我不想更新剑道订阅。我只想继续当前订阅。

如何将 Kendo 下拉列表添加到网格内联编辑模式？

编辑1：

在第二个 if 条件下我需要下拉菜单，按照第二种方法我该怎么做

 <script id="myscript" type="text/javascript">
    
    function onEdit(e)
    {
        var field = e.sender.columns[e.container.index()].field;
        if (e.model.UnitTypeCode === "Integer") {
          //other editor control
        }
        if (e.model.UnitTypeCode === "UNIT_LOOKUP_COMBOBOX") {
        
          //here I need dropdown editor
        
        }
        if (e.model.UnitTypeCode === "Float") {
        //other editor control
        }
    }
</script>
javascript jquery asp.net-mvc kendo-ui
1个回答
1
投票

关于编辑器和编辑器模板，网格的工作方式略有不同，具体取决于使用的是 HTML 包装器还是 Kendo UI。

使用 HTML 包装器（ASP.NET Core 的 UI 或 ASP.NET MVC 的 UI）时，使用的编辑器位于 ~/Viwes/Shared/EditorTemplates 文件夹中。这些模板被序列化并作为 columns.editor 作为字符串传递，这样当单元格进入编辑模式时定义编辑器。您可以通过 

EditorTemplateName
配置.

指定要使用的编辑器

使用 Kendo UI 初始化网格，您可以将 editor 设置为所需的小部件（或使用返回编辑器的函数）并使用 editorOptions 提供其他配置选项。

现在，要在使用 HTML 帮助程序时创建自定义编辑器，例如列的 DropDownList，而不是 TextBox，请遵循 自定义编辑示例 和 docs。基本上你必须：

  1. 用 [UIHint] 属性装饰模型属性：

     [UIHint("ClientCategory")]
 public CategoryViewModel Category {get;set;}

  2. 创建自定义编辑器并将其放在 ~/Views/Shared/EditorTemplates 文件夹中

    @model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
     .DataValueField("CategoryID")
     .DataTextField("CategoryName")
     .BindTo((System.Collections.IEnumerable)ViewData["categories"]) //You can also bind to a DataSource, it's not mandatory to use local data
)

  3. 添加列定义：

    columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);

    ClientTemplate 配置用于显示 CategoryViewModel 的属性，否则您将在 Grid 上看到 [Object object]

现在，如果出于某种原因您不想使用 EditorTemplates 文件夹中的 EditorTemplate 并希望使用 JS 函数来初始化列的编辑器，您可以定义一个返回编辑器的函数，并在 document.ready 上使用 setOptions Grid 的方法来覆盖选项并将函数设置为 columns.editor 配置 - example

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.AutoBind(false)
.Columns(columns => {
    columns.Bound(p => p.ProductName);
    ...
    columns.Command(command => command.Destroy()).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
...
)

<script type="text/javascript">
 function productNameEditor(container, options) {
        $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind:false,
                dataTextField: "ProductName",
                dataValueField: "ProductName",
                dataSource: {
                    transport: {
                        read: {
                            dataType: "json",
                            url: "@Url.Action("RemoteDataSource_GetProducts", "DropDownList")",
                        }
                    }
                }
            });
    }
    $("document").ready(function(){
        var grid = $("#grid").getKendoGrid();
        var options = grid.options;
        options.columns[0].editor = productNameEditor;
        grid.setOptions(options);
        grid.dataSource.read();
    })
</script>

编辑：

扩展第二种方法 - 也可以为每一列使用条件编辑器，您可以调用一个函数，该函数将根据您拥有的条件返回所需的编辑器。

迭代所有列并将编辑器分配给返回所需编辑器的函数。 

options.field
表示当您点击单元格时将为其生成编辑器的字段，您可以通过 
options.model
访问正在编辑的模型：

   $("document").ready(function(){
        var grid = $("#grid").getKendoGrid();
        var options = grid.options;
        options.columns.forEach((itm)=>itm.editor = chooseEditor)
        grid.setOptions(options);
        grid.dataSource.read();
      })

   function chooseEditor(container, options) {
    switch (options.field) {
        case "ProductName":
            if(options.model.ProductID % 2 == 0){
                dropdownEditor(container, options);
            } else {
                textEditor(container, options);
            }
            break;
        case "UnitPrice":
            currencyEditor(container, options);
            break;
        case "UnitsInStock":
            numericEditor(container, options);
            break;
        case "OrderDate":
            dateEditor(container, options);
            break;
        case "Discontinued":
            booleanEditor(container, options);
            break;
        default:
            textEditor(container, options);
            break;
     }
   }

函数将返回相应的编辑器，例如：

  function textEditor(container, options) {
    $('<input type="text" name="' + options.field + '"/>')
    .appendTo(container)
    .kendoTextBox()  
  }

  function numericEditor(container, options) {
    $('<input name="' + options.field + '"/>')
    .appendTo(container)
    .kendoNumericTextBox()
}

因此，基于上述内容，在这个更新的示例中，单击 ProductName 列中的单元格将呈现 DropDownList 或 TextBox。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.