Kendo Grid tooltip at the end of row

Question

I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution . But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?

Answer 1

Add a :last-child to the filter property:

filter: "tbody td:last-child",

Demo:

 <!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/grid/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" /> <script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" }, pageSize: 20 }, height: 550, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true, buttonCount: 5 }, columns: [{ template: "<div class='customer-photo'" + "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + "<div class='customer-name'>#: ContactName #</div>", field: "ContactName", title: "Contact Name", width: 500 }, { field: "ContactTitle", title: "Contact Title", width: 300 }, { field: "CompanyName", title: "Company Name", width: 300 }, { field: "Country", width: 300 }] }); }); $("#grid").kendoTooltip({ position: "right", callout: false, filter: "tbody td:last-child", content: function(e) { return "<button class='k-button' ><span class='k-icon ki-trash'></span></button>&nbsp;<button class='k-button'><span class='k-icon ki-email'></span></button>&nbsp;<button class='k-button'><span class='k-icon ki-warning'></span></button>"; } }); </script> </div> <style type="text/css"> .customer-photo { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background-size: 32px 35px; background-position: center center; vertical-align: middle; line-height: 32px; box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); margin-left: 5px; } .customer-name { display: inline-block; vertical-align: middle; line-height: 32px; padding-left: 3px; } </style> </body> </html>

Dojo

Kendo Grid tooltip at the end of row

Question

1 answers

solution1
1 2020-10-21 12:55:39

Kendo Grid tooltip at the end of row

Question

1 answers

solution1 1 2020-10-21 12:55:39

solution1
1 2020-10-21 12:55:39