How to prevent user from inserting a new sheet or deleting an existing sheet

4 posts, 0 answers
  1. Sandra Walters
    Sandra Walters avatar
    29 posts
    Member since:
    Dec 2005

    Posted 25 Apr Link to this post

    Is there a way to prevent the sheetsbar from displaying the Insert button, as well as a way to disable the user's ability to delete an existing sheet? 

    I've tried some basic DOM manipulation (find the Insert element and remove it) but that appears to throw off the formatting of the sheetsbar somewhat.  Is there a recommended method to do either of these?

  2. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 26 Apr Link to this post

    Hello Sandra,

    I have two options for you to take a look at.

    1.  Hide the SheetsBar.

    Please take a look at this Telerik Dojo illustrating how to hide the SheetsBar.  
    Here's the code used in the example:
    $("#spreadsheet").kendoSpreadsheet({
        sheetsbar: false,
        ...
    });


    2. Use jQuery and CSS to customize the Kendo Spreadsheet.

    Here is an example using the Dojo illustrating one approach you can use to customize the tabs.

    When the render event fires (which fires when the widget has completely rendered), I use jQuery to hide the insert and remove buttons.  I also use CSS to fix the formatting of the tabs.

    Hope this helps!

    Regards,
    Patrick
    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. Sandra Walters
    Sandra Walters avatar
    29 posts
    Member since:
    Dec 2005

    Posted 26 Apr in reply to Patrick Link to this post

    Hi Patrick, thanks for the reply.

    Hiding the sheetsbar makes it impossible for the user to navigate from one sheet to another; this really isn't a suitable solution.

    I tried the second option you mentioned, which was similar to what I'd tried initially.  With the css theme I'm using (bootstrap) the tab's title is directly against the edge of the tab.  I solved this by adding the following:

    .k-link {
        margin-right: 12px;
    }

     

    Thanks again!

  5. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 27 Apr Link to this post

    Hi Sandra,

    Glad everything worked out!  

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready