Kendo ui

来自tomtalk
跳转至: 导航搜索

Kendo UI autocomplete retrieve id on select

$("#autocomplete").kendoAutoComplete({
    dataTextField: "Txt",
    select: function(e) {
        var dataItem = this.dataItem(e.item.index());
 
        //output selected dataItem
        $("#result").html(kendo.stringify(dataItem));       
    },
    dataSource: {
        data: [
            { Txt : "GB1", value: 1 },
            { Txt : "GB2", value: 2 },
            { Txt : "GB3", value: 3 },
            { Txt : "GB4", value: 4 }
        ]
    }
});

Auto complete filtering in kendo ui

This is the DataSource and AutoComplete definition:

$("#products").kendoAutoComplete({
    dataTextField: "name",
    filter: "contains",
    minLength: 3,
    dataSource: {
        transport: {
            read: {
                url: "/admin/countries",
                type: "POST",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "id" },
                    name: { type: "string" }
                }
            }
        }
    }
});

and this is how Countries list should be returned by the server.

[
    { "id":1, "name":"Albania" },
    { "id":2, "name":"Andorra" },
    { "id":3, "name":"Armenia" },
    { "id":4, "name":"Austria" },
    { "id":5, "name":"Azerbaijan" },
    ...
]

自定义工具按钮

.k-editor .k-myTool
{
    background: 50% 50% no-repeat url(http://digitaltools.node3000.com/wp-content/themes/digital-tools/images/rss-icon-16x16px.png);
}
$("#editor").kendoEditor({
    tools: [
        {
            name: "myTool",
            tooltip: "My ToolTip",
            exec: function(e) {
                var editor = $(this).data("kendoEditor");
                editor.exec("inserthtml", { value: '<img src="/images/275x185_2.jpg"/>' });                
            }
        }
    ]
});