Kendo ui 带图像和文本的剑道网格列

我有一个网格，看起来像下面的图像，在“描述”列中我有一个记事本图标，当我单击该图像时，我需要一个弹出窗口显示“描述”列的值，以便我可以编辑、保存和关闭它

我使用了以下代码：

<div id="viewSCtable" style="width: 75%"></div>

<script type="text/javascript" charset="UTF-8">
        $(document).ready(function () {

            var UserGroup = [{
                UserGroupName: "Guest",
                Status: "Active",
                NoOfUsers: 4,
                CreatedDate: "2013-04-24T00:00:00",
                Description: "Can be used  by Guest for"
            }, {
                UserGroupName: "Exportor",
                Status: "Active",
                NoOfUsers: 4,
                CreatedDate: "2013-04-24T00:00:00",
                Description: "Can be used  by Guest for"

            }, {
                UserGroupName: "Sales",
                Status: "Active",
                NoOfUsers: 4,
                CreatedDate: "2013-04-24T00:00:00",
                Description: "Can be used  by Guest for"

            }];
            function getUserGroup() {
                return UserGroup;
            }

            var element = $("#viewSCtable").kendoGrid({
                dataSource: {
                    data: getUserGroup(),
                    schema: {
                        model: {
                            fields: {
                                UserGroupName: { type: "string" },
                                Status: { type: "string" },
                                NoOfUsers: { type: "number" },
                                CreatedDate: { type: "string" },
                                Description: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                dataBound: function () {
                },
                scrollable: true,
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                reorderable: true,
                refreshable: true,
                resizable: true,
                pageable: {
                    input: true,
                    numeric: false,
                    pageSizes: true
                },
                sortable: true,
                //filterable: {
                //    extra: false,
                //    operators: {
                //        string: {
                //            startswith: "Starts with",
                //            contains: "Contains"
                //        }
                //    }
                //},

                columns: [
                    { field: "UserGroupName", title: "User Group Name", width: "12%", attributes: { style: "text-align:left;" } },
                    { field: "Status", title: "Status", width: "10%", attributes: { style: "text-align:left;" } },
                    { field: "Description", title: "Description", width: "25%", attributes: { style: "text-align:left;" },
                    template: '<span>#: Description #<img src="../../images/notepad.png" title="Edit Description" style="float:right;width:9%;cursor: pointer;" onclick="onEdit(this.row)"/></span>'
                    },
                    { field: "NoOfUsers", title: "No of Users", width: "10%" },
                    { command: [{ name: "destroy", width: "1%", template: "<a href='javascript: void(0)' onclick='deleteRow(this)' title='Edit'>Edit</a> / <a href='javascript: void(0)' onclick='deleteRow(this)' title='Delete'>Delete</a>" }], title: "Action" },
                ],
            });
        });

        function deleteRow(element) {
            grid = $("#viewSCtable").data("kendoGrid");
            grid.removeRow($(element).closest("tr"));
        }
        function onEdit(e) {

            var selected = grid.select();
            if (selected && selected.length > 0) {
                $.each(selected, function (idx, elem) {
                    grid.editRow(grid.select());
                });
            }
        }

</script>

$（文档）.ready（函数（）{
var用户组=[{
UserGroupName:“来宾”，
状态：“活动”，
NoOfUsers:4，
CreatedDate：“2013-04-24T00:00:00”，
描述：“可供客人用于”
}, {
UserGroupName:“导出器”，
状态：“活动”，
NoOfUsers:4，
CreatedDate：“2013-04-24T00:00:00”，
描述：“可供客人用于”
}, {
UserGroupName:“销售”，
状态：“活动”，
NoOfUsers:4，
CreatedDate：“2013-04-24T00:00:00”，
描述：“可供客人用于”
}];
函数getUserGroup（）{
返回用户组；
}
var元素=$（“#viewSCtable”）.kendoGrid({
数据源：{
数据：getUserGroup（），
模式：{
型号：{
字段：{
UserGroupName:{type:“string”}，
状态：{type:“string”}，
NoOfUsers:{type:“number”}，
CreatedDate:{type:“string”}，
描述：{type:“string”}
}
}
},
页面大小：10
},
数据绑定：函数（）{
},
可滚动：对，
可排序：{
模式：“多个”，
allowUnsort:对
},
可重定额：对，
令人耳目一新：没错，
可调整大小：正确，
可分页：{
输入：正确，
数字：false，
页面大小：正确
},
可排序：是的，
//可过滤：{
//额外：错，
//操作员：{
//字符串：{
//startswith:“以开始”，
//包含：“包含”
//        }
//    }
//},
栏目：[
{字段：“用户组名”，标题：“用户组名”，宽度：“12%”，属性：{style:“text align:left；”}，
{字段：“状态”，标题：“状态”，宽度：“10%”，属性：{样式：“文本对齐：左；“}}，
{字段：“描述”，标题：“描述”，宽度：“25%”，属性：{样式：“文本对齐：左；“}，
模板：'#：说明#'
},
{字段：“NoOfUsers”，标题：“用户数量”，宽度：“10%”，
{命令：[{name:“destroy”，width:“1%”，template:“/”}]，title:“Action”}，
],
});
});
函数deleteRow（元素）{
网格=$（“#viewSCtable”）.data（“kendoGrid”）；
网格.removeRow（$（元素）.closest（“tr”）；
}
功能OneEdit（e）{
var selected=grid.select（）；
如果（已选择（&selected.length>0）{
$.each（已选择，函数（idx，元素）{
grid.editRow（grid.select（））；
});
}
}

---

据我所见，代码中有两种不同的编辑：链接和记事本图标。我知道你只想在点击记事本时编辑描述，对吗？。。。当你点击“编辑链接所有内容”或“其他内容”时会发生什么？为什么有两种版本模式？是的，你是正确的。点击编辑按钮，它将重定向到另一个页面实际上我已经问了几个问题，所以“你是对的”并不是所有问题的答案。我仍然不知道你到底想做什么，最终的“点击编辑按钮，它将重定向到另一个页面”引入了更多的疑问。