How do you remove toolbar separators

6 posts, 1 answers
  1. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 18 Sep 2015 Link to this post

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

     

  2. Answer
    Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 23 Sep 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 23 Sep 2015 in reply to Radoslav Link to this post

    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.

  5. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 24 Sep 2015 Link to this post

    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!
     
  6. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 24 Sep 2015 in reply to Radoslav Link to this post

    Cool.  By using the template, the css is no longer needed.  Thanks.
  7. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 24 Sep 2015 Link to this post

    Tried to mark as answered but got an error page.  
Back to Top
Kendo UI is VS 2017 Ready