Listview 在KendoUI列表视图中显示KendoUI窗口_Listview_Window_Kendo Ui

Listview 在KendoUI列表视图中显示KendoUI窗口

listview kendo-ui

Listview 在KendoUI列表视图中显示KendoUI窗口,listview,window,kendo-ui,Listview,Window,Kendo Ui,我是KendoUI的新用户，我希望在ListView中显示一小部分数据，但我希望有一个按钮或链接，当我单击它时，我希望它在窗口中显示我项目的完整数据，我希望有人能帮助我。提前感谢。提供以下数据源： var dataSource = new kendo.data.DataSource({ transport: { read: { url : ... } }, schema : { mode

我是KendoUI的新用户，我希望在ListView中显示一小部分数据，但我希望有一个按钮或链接，当我单击它时，我希望它在窗口中显示我项目的完整数据，我希望有人能帮助我。

提前感谢。

提供以下数据源：

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url     : ...
        }
    },
    schema   : {
        model: {
            id    : "ProductID",
            fields: {
                ProductID   : { nullable: true },
                ProductName : { type: "string" },
                UnitPrice   : { type: "number" },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number" }
            }
        }
    }
});

它定义了一系列字段：

ProductID

，

ProductName

。。。我想显示

ProductName

，因此我的模板是：

<script type="text/x-kendo-tmpl" id="template">
    <div class="product-view k-widget ob-product-view">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext" href="\\#" id="${uid}">
                <span class="k-icon k-i-search"></span>
            </a>
        </div>
        <dl>
            <dt>Product Name</dt>
            <dd>#:ProductName#</dd>
        </dl>
    </div>
</script>

我将其创建为：

var win = $("#ob-win").kendoWindow({
    title  : "Details",
    visible: false
}).data("kendoWindow");

使它最初隐藏起来

然后我为按钮创建一个处理程序，如下所示：

$(document).on("click", ".k-button-icontext", function (e) {
    var uid = $(this).attr("id");
    var elem = listView.dataSource.getByUid(uid);
    kendo.bind($("#ob-win"), elem);
    win.open().center();
});

它获取单击元素的

uid

，然后使用

id

中存储的

uid

从数据源获取数据，并将此数据绑定到以前创建的窗口。最后我打开窗户以防万一关上了

这里有一个运行示例：

给定以下数据源：

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url     : ...
        }
    },
    schema   : {
        model: {
            id    : "ProductID",
            fields: {
                ProductID   : { nullable: true },
                ProductName : { type: "string" },
                UnitPrice   : { type: "number" },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number" }
            }
        }
    }
});