kendo-ui - 如果数据不匹配，如何弹出剑道下拉菜单

Question

我可以使用过滤器按钮过滤匹配的数据。单击过滤器数据后，如果没有匹配的数据，如何获取弹出窗口。如果没有匹配的数据，则表格显示为空，而不是显示如何弹出告诉没有匹配的数据要过滤

// Set up information window
$("#filter-msg").kendoWindow({
    modal: true,
    visible: false
});

// Set up date pickers
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});

// Set up DDL
var categories = $("#categories").kendoDropDownList({
    optionLabel: "Select category...",
    dataTextField: "CategoryName",
    dataValueField: "CategoryID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
        }
    }
}).data("kendoDropDownList");

var products = $("#products").kendoDropDownList({
    autoBind: false,
    cascadeFrom: "categories",
    optionLabel: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    }
}).data("kendoDropDownList");

var orders = $("#orders").kendoDropDownList({
    autoBind: false,
    cascadeFrom: "products",
    optionLabel: "Select order...",
    dataTextField: "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoDropDownList");


// Bind "click" event on button "Filter"
$("#filter").on("click", function () {
    var mindate = $('#datetimepicker1').data("kendoDatePicker").value();
    var maxdate = $('#datetimepicker2').data("kendoDatePicker").value();
    var product = $("#products").data("kendoDropDownList").value();
    var order = $("#orders").data("kendoDropDownList").value();

    if (!mindate || !maxdate || !product || !order) {
        var content = "";
        if (!mindate) 
            content += "<div class=\"k-error-colored\">mindate is not defined!</div>";
        if (!maxdate) 
            content += "<div class=\"k-error-colored\">maxdate is not defined!</div>";
        if (!product) 
            content += "<div class=\"k-error-colored\">product is not defined!</div>";
        if (!order) 
            content += "<div class=\"k-error-colored\">order is not defined!</div>";

        $("#filter-msg").data("kendoWindow")
            .content(content)
            .center()
            .open();
        return false;
    }

    var condition = {
        logic: "and",
        filters: [{
            field: "OrderDate",
            operator: "ge",
            value: mindate
        }, {
            field: "OrderDate",
            operator: "le",
            value: maxdate
        }]
    };

    grid.dataSource.filter(condition);
});




var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
    },
        "Freight", {
        field: "OrderDate",
        title: "Order Date",
        width: 100,
        format: "{0:MM/dd/yyyy}"
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 200
    }, {
        field: "ShipCity",
        title: "Ship City"
    }]
}).data("kendoGrid");

这是js小提琴：http: //jsfiddle.net/XHW3w/1/

Answer 1

完成，您可以使用length以下属性检查dataSource.data

这是更新的jsfiddle

grid.dataSource.filter(condition);
console.log(grid.dataSource.data.length);
if(grid.dataSource.data.length <= 1)
    $("#filter-msg").data("kendoWindow")
        .content("<div class=\"k-error-colored\">No record found!</div>")
        .center()
        .open();