Kendo ui 如果数据不匹配，如何获得剑道弹出下拉列表

我可以使用“筛选”按钮筛选匹配的数据。单击筛选数据后，如果没有匹配的数据，如何获得弹出窗口。如果没有匹配的数据，则显示空表，而不是如何弹出窗口，告知没有匹配的数据进行筛选

// 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");

//设置信息窗口
$（“#过滤器消息”）.kendoWindow({
莫代尔：是的，
可见：假
});
//设置日期选择器
$（“#datetimepicker1”）.kendoDatePicker（{}）；
$（“#datetimepicker2”）.kendoDatePicker（{}）；
//设置DDL
var类别=$（“#类别”）。kendoDropDownList({
选项标签：“选择类别…”，
dataTextField:“CategoryName”，
dataValueField:“类别ID”，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
}).数据（“kendoDropDownList”）；
var产品=$（“#产品”）。kendoDropDownList({
自动绑定：错误，
来自：“类别”，
选项标签：“选择产品…”，
dataTextField:“产品名称”，
dataValueField:“产品ID”，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Products"
}
}
}).数据（“kendoDropDownList”）；
var订单=$（“#订单”）。kendoDropDownList({
自动绑定：错误，
来自：“产品”，
选项标签：“选择订单…”，
dataTextField:“Order.ShipCity”，
dataValueField:“OrderID”，
数据源：{
类型：“odata”，
是的，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=订单“
}
}
}).数据（“kendoDropDownList”）；
//绑定按钮“过滤器”上的“单击”事件
$（“#过滤器”）。在（“单击”上，函数（）{
var mindate=$（'#datetimepicker1'）.data（“kendoDatePicker”）.value（）；
var maxdate=$（'#datetimepicker2'）.data（“kendoDatePicker”）.value（）；
var product=$（“#产品”）.data（“kendoDropDownList”）.value（）；
var order=$（“#orders”）.data（“kendoDropDownList”）.value（）；
如果（！mindate | | | |！maxdate | |！产品| |！订单）{
var-content=“”；
如果（！mindate）
内容+=“未定义mindate！”；
如果（！maxdate）
内容+=“未定义maxdate！”；
如果（！产品）
内容+=“未定义产品！”；
如果（！订单）
内容+=“未定义订单！”；
$（“#过滤器消息”）.data（“kendoWindow”）
.内容（content）
.center（）
.open（）；
返回false；
}
变量条件={
逻辑：“和”，
过滤器：[{
字段：“订单日期”，
接线员：“ge”，
价值：mindate
}, {
字段：“订单日期”，
接线员：“乐”，
值：maxdate
}]
};
grid.dataSource.filter（条件）；
});
var grid=$（“#grid”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.kendoui.com/service/Northwind.svc/Orders"
},
模式：{
型号：{
字段：{
医嘱ID：{
类型：“编号”
},
运费：{
类型：“编号”
},
船名：{
类型：“字符串”
},
订购日期：{
类型：“日期”
},
船舶城市：{
类型：“字符串”
}
}
}
},
页面大小：10，
对,，
是的，
服务器排序：true
},
可过滤：正确，
可排序：是的，
pageable:对，
栏目：[{
字段：“订单ID”，
可过滤：false
},
“运费”{
字段：“订单日期”，
标题：“订单日期”，
宽度：100，
格式：“{0:MM/dd/yyyy}”
}, {
字段：“ShipName”，
标题：“船名”，
宽度：200
}, {
字段：“ShipCity”，
标题：“船舶城”
}]
}).数据（“kendoGrid”）；

---

这是js提琴：

完成，您可以使用

dataSource.data的
length
属性进行检查

以下是更新后的

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();

grid.dataSource.filter（条件）；
log（grid.dataSource.data.length）；
if（grid.dataSource.data.length