带有图像和文本的kendo网格列

Question

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

我使用了以下代码：

<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>