How to combine two fields for the dataTextField of Kendo UI autocomplete?

8
votes

I want to combine two fields for the dataTextField property of the Kendo autocomplete.

My datasouce has a FirstName field and a LastName field.

schema: {
            data: "d",
            model: {
                id: "PersonId",
                fields: {
                    PersonId: {
                        type: "number",
                        editable: false // this field is not editable
                    },
                    FirstName: {
                        type: "text",
                        validation: { // validation rules
                            required: true // the field is required
                        }
                    },
                    LastName: {
                        type: "text",
                        validation: { // validation rules
                            required: true // the field is required
                        }
                    }
                }
            }
        }

Is there a way I can configure the autocomplete to display FirstName + LastName?

Maybe I have to do something with the datasource instead, and if that is the case, can someone provide a simple example?

Thank you!

2
jqueryautocompletekendo-uidatasourceconcatenation
FYI: only "string", "number", "boolean", and "date" are valid values for the "type" field. docs.kendoui.com/api/framework/model#model.define - Kevin Babcock

2 Answers

9
votes

You should use template:

for example:

template:"The name is : #= FirstName # #=LastName #"
7
votes

Using templates is a valid solution. However, if you want to always have a composite or calculated field accessible on your model you can define a parse function in the schema definition.

schema: {
    data: "d",
    model: {
        id: "PersonId",
        fields: {
            PersonId: {
                type: "number",
                editable: false // this field is not editable
            },
            FirstName: {
                type: "string",
                validation: { // validation rules
                    required: true // the field is required
                }
            },
            LastName: {
                type: "string",
                validation: { // validation rules
                    required: true // the field is required
                }
            },
            Name: {
                type: "string"
                // add any other requirements for your model here
            }
        }
    },
    parse: function (response) {
        var values = response.d,
            n = values.length,
            i = 0,
            value;
        for (; i < n; i++) {
            value = values[i];
            value.Name = kendo.format("{0} {1}",
                value.FirstName,
                value.LastName);
        }

        return response;
    }
}

The parse function pre-processes the server response before it is used, so you can modify existing fields or attach new ones. You can then reference the field(s) directly in any controls that use the Model.