【问题标题】:How to open a details popup from a kendoui grid如何从 kendoui 网格打开详细信息弹出窗口
【发布时间】:2012-06-10 13:07:47
【问题描述】:

我正在尝试打开一个详细信息弹出窗口,以显示有关 kendoUI 网格中记录的更多详细信息。

我看过这个示例:http://demos.kendoui.com/web/grid/detailtemplate.html

但我想打开一个弹出窗口,而不是网格,传递所选记录的 ID。

我该怎么做?

【问题讨论】:

    标签: grid kendo-ui


    【解决方案1】:

    你见过自定义弹出示例吗?

    http://demos.kendoui.com/web/grid/custom-command.html

    【讨论】:

      【解决方案2】:

      Kendo Grid 有自己的弹出式编辑表单来处理这个问题,也可以使用模板进行自定义。

      http://demos.telerik.com/kendo-ui/grid/editing-popup

      http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template

      【讨论】:

        【解决方案3】:

        非常简单。订阅 onChange 事件并提醒选择的 id。我假设您的意思是属性ID。 :

        function onChange(arg) {
            var selected = $.map(this.select(), function(item) {
                                return $(item).attr("id");
                            });
        
                           alert(selected);
                        }
        
        $(document).ready(function() {
                            $("#grid").kendoGrid({
                                dataSource: {
                                    data: createRandomData(50),
                                    pageSize: 5
                                },
                                change: onChange,
                                columns: [
                                    {
                                        field: "FirstName",
                                        title: "First Name"
                                    },
                                    {
                                        field: "LastName",
                                        title: "Last Name"
                                    },
                                    {
                                        field: "Age"
                                    }
                                ]
                            });
                        });​
        

        【讨论】:

          猜你喜欢
          • 2018-03-11
          • 2019-08-04
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-11-26
          • 2013-03-09
          • 2020-01-28
          • 1970-01-01
          相关资源
          最近更新 更多