I have an excel button and two custom buttons in a grid toolbar that I have pulled to the right. There are two hyphen-like separators that I want to remove that appear just to the right of the excel button. You can see this in the attached pciture. I tried to remove it with some very novice css but it didn't quite work. Any ideas?
/* hide kendo grid toolbar separators */
.k-button.k-button-icontext.a[class*='k-grid-'] {
visibility:hidden;
}
5 Answers, 1 is accepted
0
Accepted
Hello ,
Thank you for contacting us.
Based on the provided information it is hard to say why the css not working. Could you please post your grid declaration with any external css or JavaScript. Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.
At meantime you can try using following code css rule:
Looking forward for your reply.
Regards,
Radoslav
Telerik
Thank you for contacting us.
Based on the provided information it is hard to say why the css not working. Could you please post your grid declaration with any external css or JavaScript. Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.
At meantime you can try using following code css rule:
<style> .k-button.k-button-icontext[class*='k-grid-'] { visibility:hidden; } </style>Looking forward for your reply.
Regards,
Radoslav
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 2
Rank 2
answered on 23 Sep 2015, 08:36 PM
Radoslav,
I've got a working example here at http://dojo.telerik.com/evEVo
I want to be able to remove the separators and keep the excel button. Notice my save and load grid buttons nicely pulled to the right on the toolbar.
0
Hi ,
To achieve the desired functionality you need to change the toolbar declaration as following:
Also I modified your example with the mentioned code snippet:
http://dojo.telerik.com/evEVo/2
I hope this helps.
Regards,
Radoslav
Telerik
To achieve the desired functionality you need to change the toolbar declaration as following:
toolbar: [ { name: "excel", text: "Export to Excel" }, { template: "<a class='k-button pull-right' onclick='saveGridState()'></span>Save Grid Options</a>"} , { template: "<a class='k-button pull-right' onclick='loadGridState()'></span>Load Grid Options</a>"}],http://dojo.telerik.com/evEVo/2
I hope this helps.
Regards,
Radoslav
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 2
Rank 2
answered on 24 Sep 2015, 01:36 PM
Cool. By using the template, the css is no longer needed. Thanks.
0
Bill
Top achievements
Rank 2
Rank 2
answered on 24 Sep 2015, 01:40 PM
Tried to mark as answered but got an error page.