Kendo Grid Фильтрующая ячейка

Question

У меня есть требование, в котором я должен показать два раскрывающегося списка в ячейке Filterable ячейки сетки kendo. Эти два раскрывающихся списка будут фильтровать два разных столбца в сетке кендо.

Одна мысль, что у меня есть шаблон, который, возможно, будет некоторым контейнером кендо, как некоторые панели, а затем добавить два выпадающих списка в этот контейнер.

Возможно ли это? Если да, то как этого добиться?

Вот мое определение сетки кендо.

ctrl.mainGridOptions = { 
    dataSource: ctrl.gridDataSource, 
    columns: [ 
       { 
        title: 'Col1-Col2', 
        field: 'Col1', 
        width: 200, 
        template: kendo.template($("#col1").html()), 
        filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } } 
       }, 
       { 
        field: 'Col3', 
        width: 150, 
        title: 'Col3', 
        template: kendo.template($("#col3").html()), 
        filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } } 
       } 
     ] 
     } 

Вот макет того, чего я хочу достичь.

Answer 1

Есть несколько различных частей этого.

Во-первых, если вы хотите иметь несколько элементов управления фильтром для разных частей данных, вы должны определить столбец для каждого из них. Затем поместите шаблон в первый столбец, чтобы он отображал данные для двух столбцов. Используйте параметр атрибутов, чтобы установить colspan = 2. Затем используйте параметр атрибутов на вторых столбцах, чтобы установить style = "display: none".

Вторая часть получает выпадающие списки. Обычно я предпочитаю использовать параметр «values» для достижения этого. Код ниже использует это для столбца OrderID. Другой альтернативой был подход, которым вы были, который должен использовать шаблон ячейки. Код ниже использует это в столбце ShipName.

<div id="example"> 
     <div id="grid"></div> 
     <script> 
      $(document).ready(function() { 
       $("#grid").kendoGrid({ 
        dataSource: { 
         type: "odata", 
         transport: { 
          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
         }, 
         schema: { 
          model: { 
           fields: { 
            OrderID: { type: "string" }, 
            Freight: { type: "number" }, 
            ShipName: { type: "string" }, 
            OrderDate: { type: "date" }, 
            ShipCity: { type: "string" } 
           } 
          } 
         }, 
         pageSize: 20, 
         serverPaging: true, 
         serverFiltering: true, 
        }, 
        height: 550, 
        filterable: { 
         mode: "row" 
        }, 
        pageable: true, 
        columns: 
        [{ 
         field: "OrderID", 
         width: 150, 
         attributes: { 
          colspan: 2 
         }, 
         values: [{text: "10248", value: "one"},{text:"10249", value: "two"}], 
         template: '#:OrderID# (#:ShipName#)', 
         filterable: { 
          cell: { 
           operator: "eq", 
           showOperators: false 
          } 
         } 
        }, 
        { 
         attributes: { 
          style: "display:none" 
         }, 
         field: "ShipName", 
         width: 200, 
         title: "Ship Name", 
         filterable: { 
          cell: { 
           template: function(args) { 
            args.element.kendoDropDownList({ 
             dataSource: args.dataSource, 
             dataTextField: "ShipName", 
             dataValueField: "ShipName", 
             valuePrimitive: true 
            }); 
           }, 
           operator: "eq", 
           showOperators: false 
          } 
         } 
        },{ 
         field: "Freight", 
         width: 255, 
         filterable: false 
        } 
        ] 
       }); 
      }); 
     </script> 
    </div> 

Runnable Demo