Question

我有一个kendo ui网格，在该网格中我有一个下拉列表。至于现在，它的工作方式是它获取客户的名称并将其添加到下拉列表中，但当下拉列表不是“活动”时，它只显示customerId。

这是我在网格中使用的对象：

  public int Id { get; set; }
    public string Code { get; set; }
    public System.DateTime StartDate { get; set; }
    public System.DateTime EndDate { get; set; }
    public int MinimumCost { get; set; }
    public int MaximumCost { get; set; }
    public int Quantity { get; set; }
    public Nullable<int> CustomerId { get; set; }
    public string CountryCode { get; set; }
    public decimal Discount { get; set; }
    public string ModelName { get; set; }

我想要做的是连接到CustomerId的下拉列表，但在下拉列表中显示customername。这是我网格的代码：

      $(document).ready(function () {
   var datasource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/DiscountPromotion/Get',
            dataType: "json",
        },
        update: {
            url: '/DiscountPromotion/Update',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        destroy: {
            url: '/DiscountPromotion/Delete',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        create: {
            url: '/DiscountPromotion/Add',
            dataType: "json",
            type: "POST",
            contentType: "application/json"
        },
        parameterMap: function (options, operation) {
            if (operation !== "read") {
                return JSON.stringify({ discountPromotionDto: options });
            }
        },

    },
    pageSize: 10,
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { type: "number" },
                Code: { type: "string" },
                StartDate: { type: "date" },
                EndDate: { type: "date" },
                MinimumCost: { type: "number", validation: { min: 0 } },
                MaximumCost: { type: "number", validation: { min: 0 } },
                Quantity: { type: "number", validation: { min: 0 }},
                CustomerId: { type: "number" },
                CountryCode: { type: "string" },
                Discount: { type: "number" },
                ModelName: { type: "string" }
            }
        }
    }
});
$("#discountpromotiongrid").kendoGrid({
    dataSource: datasource,
    batch: true,
    toolbar: ["create", "save", "cancel", { name: "genCode", text: "Generate Code", click: function(e) {
        return false;
    }}],
    height: 400,
    navigatable: true,
    selectable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
    {
        field: "ModelName",
        title: "ModelName",
        editor: modelNameDropDown,
        template: "#=ModelName#",
        width: 150
    },
    {
        field: "Code",
        title: "Code",
        width: 150
    },
    {
        field: "StartDate",
        title: "StartDate",
        template: '#= kendo.toString(StartDate,"yyyy-MM-dd") #',
        format: "{0:yyyy-MM-dd}",
        parseFormats: ["yyyy-MM-dd"],
        width: 120
    },
    {
        field: "EndDate",
        title: "EndDate",
        template: '#= kendo.toString(EndDate,"yyyy-MM-dd") #',
        format: "{0:yyyy-MM-dd}",
        parseFormats: ["yyyy-MM-dd"],
        width: 120
    },
    {
        field: "MinimumCost",
        title: "MinCost",
        width: 100,
        format: "{0:n0}"
    },
    {
        field: "MaximumCost",
        title: "MaxCost",
        width: 100,
        format: "{0:n0}"
    },
    {
        field: "Quantity",
        title: "Quantity",
        width: 80,
        format: "{0:n0}"
    },
    {
        field: "CustomerId",
        title: "Customer",
        editor: customerDropDown,
        template: "#=CustomerId#",
        width: 150
    },
    {
        field: "CountryCode",
        title: "CountryCode",
        editor: countryCodeDropDown,
        template: "#=CountryCode#",
        width: 120
    },
    {
        field: "Discount",
        format: "{0:p0}",
        editor: function (container, options) {
            $("<input name='Discount'>")
            .appendTo(container)
            .kendoNumericTextBox(
              {
                  min: 0,
                  max: 1.0,
                  step: 0.01
              });
        },
        width: 100
    },
    {
        command: "destroy",
        title: "&nbsp;",
        width: 120
    }],
    editable: true
});



function modelNameDropDown(container, options) {
    $('<input required data-text-field="ModelName" data-value-field="ModelName" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select model...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetModelNamesByCustomerId',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

function customerDropDown(container, options) {
    $('<input required data-text-field="CustomerName" data-value-field="CustomerId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select model...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetSuppliersCustomersByCustomerId',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

function countryCodeDropDown(container, options) {
    $('<input required data-text-field="CountryCode" data-value-field="CountryCode" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: true,
            optionLabel: "Select model...",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        url: '/DiscountPromotion/GetCountryCodesBySuppliersCustomers',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            }
        });
}

$(".k-grid-genCode", "#discountpromotiongrid").bind("click", function (ev) {
    var text = generateCode();
    var grid = $("#discountpromotiongrid").data("kendoGrid");
    var row = grid.select();
    var data = grid.dataItem(row);
    data.dirty = true;
    data.Code = text;
    $('#discountpromotiongrid').data('kendoGrid').refresh();
    //$(".k-grid-edit-row").find("input[name='Code']").val(text);

});

function generateCode() {

     var n = 8;

    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (var i = 0; i < n; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return text;
   }

    });

dropdownlist get-method获取的列表对象如下所示：

    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public string CountryCode { get; set; }
    public string CustomerERPId { get; set; }

那么如何将数据绑定到网格中的CustomerId但显示CustomerName的值？

Answer 1

网格不知道与CustomerId对应的客户名称。下拉列表在编辑期间填充该列表。要使其工作，您需要加载客户并设置列的模板：

{
    field: "CustomerId",
    title: "Customer",
    editor: customerDropDown,
    template: "#=customerNames[CustomerId]#",
    width: 150
}

customerNames就是这样的

var customerNames = { 1: "Foo", 2: "Bar" }; // key is CustomerID value is CustomerName

可以将kendo ui grid自定义下拉列表绑定到id而不是对象

1 个答案: