使用kendoui的网格中的外键

时间:2012-08-08 12:57:54

标签: jquery asp.net-mvc-3 kendo-ui

所以在我看来我有这个

<div id="grid"></div>


<script>
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GetCityList", "City")',
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json; charset=utf-8"
                },
                create: {
                url: '@Url.Action("create", "City")',
                type: "Post"
            },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        var result = {};

                        for (var i = 0; i < data.models.length; i++) {
                            var ciudad = data.models[i];

                            for (var member in ciudad) {
                                result["ciudades[" + i + "]." + member] =                        ciudad[member];
                            }
                        }
                        return result;
                    }
                }


            },
            batch: true,
            pageSize: 30,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        descripcion: { validation: { required: true} },
                        DepartamentName: { field: "DepartamentName" },
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            height: 400,
            toolbar: ["create", "save", "cancel"],
            columns: [
                "descripcion",
            { field: "DepartamentName", title: "Name Departament", editor: categoryDropDownEditor, width: 150 }, 
                { command: "destroy", title: "&nbsp;", width: 110}],
            editable: true
        });
    });

</script>

<script>

    function categoryDropDownEditor(container, options) {

        $('<input data-text-field="name" data-value-field="name"  data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: '@Url.Action("GetDepartament", "city")
                                            }
                                }
                            }
                        });
    }
            </script>
它显示我没问题 我的问题是,当它触及我的动作创建时,它会给我一个部分的名称而不是id

当我将我的功能改为此

 $('<input data-text-field="name" data-value-field="name"  data-bind="value:' + options.field + '"/>')

 $('<input data-text-field="name" data-value-field="id"  data-bind="value:' + options.field + '"/>')

用它来表明我的行动很好我得到了id但是在我的网格中,当我在我的下拉列表中选择一个网格中的一个部分时它会向我显示id(所以这不是我想要的行为)

我该怎么做才能让它发挥作用?我想这是在绑定部分..

1 个答案:

答案 0 :(得分:1)

前段时间我遇到了同样的问题。我的解决方案有点棘手。 想法是使用“id | name”格式。 我为该字段设置了模板:

template: '#= (fldName).substring((fldName).indexOf("|", 0) + 1) #';

我设置编辑:

function(container, options) {
        $('<input id="autoComplete" data-bind="value:' + options.field + '"/>')
            .appendTo(container)                                    
            .kendoComboBox({
                dataTextField: "name",
                dataValueField: "id",
                minLength: 1,
                template: '#= (id).substring((id).indexOf("|", 0) + 1) #',
                filter: "contains",
                delay: 0,
                dataSource: new kendo.data.DataSource({
                    type: "json",
                    transport: {
                        read: {
                            url: "services/SearchContent",
                            type: "GET"
                        },
                        parameterMap: function (opt, operation) {
                            var val;
                            if(opt.filter) {
                                val = opt.filter.filters[0].value;
                            } else {                                                        
                                val = options.model[$("#autoComplete").data("bind").substring(6)];
                                val = (val).substring((val).indexOf("|", 0) + 1);
                            }
                            if(val == "") val = "a";
                            return {
                                searchString: val,
                                resultsCount: 10,
                                date: (new Date()).valueOf()
                            };
                        }
                    },
                    schema: {
                        data: "results",
                        type: "json"
                    },
                    serverFiltering: true
                })
            });

我的服务还会根据用户输入动态过滤结果,但我认为您可以了解我的想法。 当然为了使这项工作,您的网格服务shell返回此列的“id | name”格式,而不仅仅是“name”。