This is a migrated thread and some comments may be shown as answers.

How do you remove toolbar separators

5 Answers 164 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 2
Bill asked on 18 Sep 2015, 10:46 PM

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

Sort by
0
Accepted
Radoslav
Telerik team
answered on 23 Sep 2015, 07:00 AM
Hello Bill,

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
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
Radoslav
Telerik team
answered on 24 Sep 2015, 11:21 AM
Hi Bill,

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>"}],
Also I modified your example with the mentioned code snippet:
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
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
answered on 24 Sep 2015, 01:40 PM
Tried to mark as answered but got an error page.  
Tags
Grid
Asked by
Bill
Top achievements
Rank 2
Answers by
Radoslav
Telerik team
Bill
Top achievements
Rank 2
Share this question
or