0

ここに私が取り組んでいる HTML ページがありますが、正しく動作していません。問題はどこにあるのか、誰でも一度確認できます。

ここでは、フィルタの後にグリッドのドロップダウン値も変更またはフィルタリングします。

誰でもhtmlページでこのコードをチェックできます。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"    rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link  href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css"  rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="example" class="k-content">



    <span class="nwcselection">data</span>
    <input id="ddl"/></div>
<input type="button" id="btnfilter" value="Filter" onclick="Filter()" />
<div id="grid"></div>
</div>


<script type="text/javascript">
    var data =new kendo.data.DataSource({
        type: "odata",
        transport: {
            read:
                    "http://demos.kendoui.com/service/Northwind.svc/Products",
        },
    });
    function createGrid()
    {
        var grid= $("#grid").kendoGrid({
            dataSource:data,
            schema: {
                model: {
                    fields: {
                        ProductID: { type: "number" },
                        UnitPrice: { type: "number" },
                        ProductName: { type: "string" },
                    } }},

            pageable: true,
            columns: [
                { field: "ProductID", title:"Product ID", width:100 },
                { field: "ProductName", title:"Product Name" },
                { field: "UnitPrice", title:"Unit Price", width: 100 } ]
        });
    }






    function dd()
    {
        $("#ddl").kendoDropDownList({
            dataSource: data,
            optionLabel: "Select category...",
            dataTextField: "ProductName",
            dataValueField: "ProductName"
        }).data("kendoDropDownList");
    }


    function Filter() {

        $("#btnfilter").click(function () {
            $filter = new Array();
            $ProductName = $("#ddl").data("kendoDropDownList").value();

            if($ProductName)
            {
                $filter.push({ field: "ProductName",
                    operator: "contains", value: $ProductName });
            }
            var grid = $("#grid").data("kendoGrid");

            grid.dataSource.filter({
                logic: "and",
                filters: $filter
            });
        });

    }


    $(document).ready(function () {

        createGrid();
        Filter();
        dd();
    });
</script>
</body>
4

1 に答える 1

1

問題は、Grid と DropDown に同じ DataSource を使用していることです。これらは同じオブジェクトへのポインターのようなものです。それらは実際には同じものであるため、一方をフィルタリングすると他方もフィルタリングされます。

DataSource を 2 回作成してみてください。

var ds1 =new kendo.data.DataSource({
    type: "odata",
    transport: {
        read:
                "http://demos.kendoui.com/service/Northwind.svc/Products"
    }
});
var ds2 =new kendo.data.DataSource({
    type: "odata",
    transport: {
        read:
                "http://demos.kendoui.com/service/Northwind.svc/Products"
    }
});

そして、それぞれを別の要素で使用します。

var grid = $("#grid").kendoGrid({
    dataSource: ds1,
    schema    : {
        model: {
            fields: {
                ProductID  : { type: "number" },
                UnitPrice  : { type: "number" },
                ProductName: { type: "string" }
            } }},

    pageable: true,
    columns : [
        { field: "ProductID", title: "Product ID", width: 100 },
        { field: "ProductName", title: "Product Name" },
        { field: "UnitPrice", title: "Unit Price", width: 100 }
    ]
});

$("#ddl").kendoDropDownList({
    dataSource    : ds2,
    optionLabel   : "Select category...",
    dataTextField : "ProductName",
    dataValueField: "ProductName"
}).data("kendoDropDownList");
于 2013-09-24T10:01:00.637 に答える