Hide gridlines

8 posts, 0 answers
  1. Hema
    Hema avatar
    20 posts
    Member since:
    Jul 2015

    Posted 03 Mar Link to this post

    Is there a way to hide the grid lines in the Spreadsheet ( both in the empty cells and the cells that have some data)  ? I tried to set no borders and still gridlines appear . If I have a different fill ( like grey ) , still the lines appears , but it is lighter.
  2. Jared
    Jared avatar
    10 posts
    Member since:
    Sep 2015

    Posted 04 Mar in reply to Hema Link to this post

    var spreadsheet = $("#spreadsheet");
    var activeSheet = spreadsheet.activeSheet();
    activeSheet.options.showGridLines = false;

     

    client side

  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 07 Mar Link to this post

    Hello,

    Thanks, Jared, you're absolutely right.

    I see that this option is missing in the Spreadsheet API. Will add it right away.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 07 Mar Link to this post

    Hello,

    Perhaps I spoke a bit too soon. The option is currently accessible only when loading the spreadsheet from configuration or from external source (JSON, XLSX).
    For example:
        <script>
            $("#spreadsheet").kendoSpreadsheet({
                sheets: [{
                    name: "Food Order",
                                showGridLines: false,
                    mergedCells: [
                        "A1:G1"
                    ],
                    rows: [{
                        height: 70,
                        cells: [{
                            value: "My Company", fontSize: 32, textAlign: "center"
                        }]
                    }]
                }]
            });
        </script>


    Changing it at run-time is not supported. For the next release, the Sheet will have a showGridLines method:
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        var activeSheet = spreadsheet.activeSheet();
        activeSheet.showGridLines(false);


    Note that the sheet.options.showGridLines field will be removed. It was not intended to be a part of the public API.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Hema
    Hema avatar
    20 posts
    Member since:
    Jul 2015

    Posted 09 Mar in reply to T. Tsonev Link to this post

    I tried the showGridLines: false option . It doesn't remove any gridlines if there is no data. I want gridlines removed from the spreadsheet completely . Is there a way for that ?
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 11 Mar Link to this post

    Hello,

    Sorry, my bad. The provided samples only work against the latest builds for our next release.

    For the current version, the code is a bit more involved. I've created a sample in the dojo.
          if (activeSheet.showGridLines) {
            // Kendo UI 2016.2 and beyond
            activeSheet.showGridLines(false);
          } else if (activeSheet.options) {
            // Kendo UI 2016.1
            activeSheet.batch(function() {
              activeSheet.options.showGridLines = false;
            }, { layout: true });
          }


    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Hema
    Hema avatar
    20 posts
    Member since:
    Jul 2015

    Posted 14 Mar in reply to T. Tsonev Link to this post

    Tsonev,

    I am using the Kendo version 2016.1.112 . I tried to call the showGridLines property and I got this error . Please advice.

    TypeError: Cannot read property 'start' of undefined
        at e.support.browser.msie.e.support.browser.version.e.Class.extend.visible

    Uncaught TypeError: Cannot read property 'start' of undefinede.support.browser.msie.e.support.browser.version.e.Class.extend.visible

    Code snippet :

    var sheet = spreadsheet.sheetByIndex(0);
    sheet.fromJSON({
    name : gridData.name,
    frozenRows : gridData.frozenRows,
    frozenColumns : gridData.frozenColumns,
    rows : gridData.rows,
    columns : gridData.columns
    });// sheet json
    if( sheet.options )
    {
    console.log("in sheet options ");
    sheet.batch(function() {
    sheet.options.showGridLines = false;
    }, { layout: true });
    }

     

    Thanks,

    Hema

  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 17 Mar Link to this post

    Hello,

    Please accept my apologies for the delayed response.

    I tried to reproduce the issue in the standalone example, but without luck.
    Can you try upgrading to the latest version? 

    The error is strange to begin with. Please check if you're not loading the Kendo UI scripts twice.

    Regards,
    T. Tsonev
    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