How do you remove toolbar separators

[Bill]

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

 

[Radoslav]

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

 

 

[Bill]

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.

[Radoslav]

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

 

 

[Bill]

Cool.  By using the template, the css is no longer needed.  Thanks.

[Bill]

Tried to mark as answered but got an error page.