문제

I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.

See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.

도움이 되었습니까?

해결책

As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:

var categories = [{
  "value": 1,
  "text": "Beverages"
}, {
  "value": 2,
  "text": "Condiments"
}, {
  "value": 3,
  "text": "Confections"
}, {
  "value": 4,
  "text": "Dairy Products"
}, {
  "value": 5,
  "text": "Grains/Cereals"
}, {
  "value": 6,
  "text": "Meat/Poultry"
}, {
  "value": 7,
  "text": "Produce"
}, {
  "value": 8,
  "text": "Seafood"
}];

function getCategory(catID) {
  return $.grep(categories, function(n, i) {
    return n.value === catID;
  })[0].text;
}

$(document).ready(function() {
  var dataSource = new kendo.data.DataSource({
    pageSize: 20,
    data: products,
    autoSync: true,
    schema: {
      model: {
        id: "ProductID",
        fields: {
          ProductID: {
            editable: false,
            nullable: true
          },
          ProductName: {
            validation: {
              required: true
            }
          },
          CategoryID: {
            field: "CategoryID",
            type: "number",
            defaultValue: 1
          },
          UnitPrice: {
            type: "number",
            validation: {
              required: true,
              min: 1
            }
          }
        }
      }
    }
  });

  var rowTemplateString = '<tr data-uid="#: uid #">' +
    '<td>#: ProductName #</td>' +
    '<td>#: getCategory(CategoryID) #</td>' +
    '<td>#: UnitPrice #</td>' + '<td></td>' +
    '</tr>';

  var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');

  var commonSettings = {
    dataSource: dataSource,
    filterable: true,
    groupable: true,
    pageable: true,
    height: 430,
    toolbar: ["create"],
    columns: [{
        field: "ProductName",
        title: "Product Name"
      },
      {
        field: "CategoryID",
        width: "150px",
        //values: categories,
        dataTextField: "text",
        dataValueField: "value",
        dataSource: categories,
        filterable: {
          ui: function(element) {
            element.kendoComboBox({
              dataTextField: "text",
              dataValueField: "value",
              dataSource: categories
            });
          }
        },
        title: "Category"
      },
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}",
        width: "150px"
      },
      {
        command: "destroy",
        title: " ",
        width: "110px"
      }
    ],
    editable: true
  };

  $("#grid").kendoGrid($.extend({
    rowTemplate: rowTemplateString,
    altRowTemplate: altRowTemplateString
  }, commonSettings));

});

Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.

Here's the Dojo http://dojo.telerik.com/oFulu

다른 팁

Try this One,According to your demo here

</script>
    <div id="example" class="k-content">
        <div id="grid"></div>

        <script>               
            var categories = [{
                "value": 1,
                "text": "Beverages"
            },{
                "value": 2,
                "text": "Condiments"
            },{
                "value": 3,
                "text": "Confections"
            },{
                "value": 4,
                "text": "Dairy Products"
            },{
                "value": 5,
                "text": "Grains/Cereals"
            },{
                "value": 6,
                "text": "Meat/Poultry"
            },{
                "value": 7,
                "text": "Produce"
            },{
                "value": 8,
                "text": "Seafood"
            }];

            $(document).ready(function () {
                var dataSource = new kendo.data.DataSource({
                    pageSize: 20,
                    data: products,
                    autoSync: true,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true} },
                                CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                            }
                        }
                    }
                });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    filterable: true,
                    groupable: true,
                    pageable: true,
                    height: 430,
                    toolbar: ["create"],
                    columns: [
                        { field: "ProductName", title: "Product Name" },
                        { 
                            field: "CategoryID",
                            width: "150px",
                            values: categories,
                            editor:function(container,options)
                            {
                                $('<input name-"' + options.fields +'"/>').
                              appendTo(container).kendoComboBox({
                                autoBind:false,
                                dataTextField:"text",
                                dataValueFiled:"value",
                                dataSource:new kendo.data.DataSource({
                                  schema:{
                                    model:{
                                      id:"value",
                                      fields:{
                                        text:{},
                                        value:{}
                                      }
                                    }
                                  },
                                  data:categories
                                })
                              })
                            },
                            title: "Category" 
                        },
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
                        { command: "destroy", title: " ", width: "110px"}],
                    editable: true
                });
            });
        </script>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top