Autosizing columns

4 posts, 0 answers
  1. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 15 Dec 2016 Link to this post

    It appears the Spreadsheet component doesn't have a way to automagically size the columns, and I was hoping there might be a workaround for this somewhere?  I am loading CSV files into the spreadsheet, all of which could have completely different formats, so cannot just hard code column widths...


    Or at the very least, in Excel I can select all rows and columns, double click on a dividing line between headers, and it will automagically resize columns.  Perhaps there's a way to implement this behaviour?

  2. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 15 Dec 2016 in reply to Joe Link to this post

    I'd also like to know how to set the number of visible rows (I tried.Rows(val) to no avail), as well as adjust the overall width and height of the spreadsheet...
  3. Joe
    Joe avatar
    191 posts
    Member since:
    May 2012

    Posted 15 Dec 2016 Link to this post

    It doesn't seem as if there are any column click events?  Or cell click events?  I know there are change events, but I want to detect when a user clicks a column header, or if they click in a cell, the specific column the cell is in?

    I'm am trying to build a upload mapping system.  We have people that upload their timesheets in CSV format, and currently there is a custom uploader written for every customer that uploads files.  I'm trying to come up with a way so that customers can map their own CSV files, save the definition so whenever they pload again, there's an import definition for the,

    I had planned on displaying the values that the uploader should include, and then have the user click the appropriate column from the CSV that will contain that value.  But if I can't get the column click events, I may have to re-think this.  

    Maybe I'd be better off using a regular Telerik grid?  Is there an easy way to load a CSV file into the Grid?  With autosizing columns?

  4. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    590 posts

    Posted 19 Dec 2016 Link to this post

    Hello Joe,

    Below you will find the answers of your questions:

    - The auto-resize column feature is still not implemented for the Spreadsheet. At the moment we are not able to offer you a reliable workaround, that would implement the above. However, the discussed double-click feature is already suggested for implementation in our Feedback portal, where you could vote for it;

    - Configuring the initial number of rows, loaded to each of the Spreadsheet sheets should be achived in the following way:
        .Sheets(sheets =>

    You should keep in mind, that the above setting will be overwritten, when a file is loaded to the Spreadsheet. In this case, if the initial number of rows is less that the number of rows in the imported sheet, the sheet automatically changes the number of its rows to match the number of the rows in the initial file. If you need to hide some of the already loaded rows, you could do that manually, using the Sheet.hideRow() method;

    - You could set the width and height of the widget / HTML helper, by adding the styles to the helper initialization:
        .HtmlAttributes(new { style = "width: 500px; height: 300px;" })

    or by apply the following CSS rule:
    html .k-spreadsheet {
        width: 500px;
        height: 300px;

    - We are currently working on extended events functionality of the Spreadsheet, that should be available within our next release (R1 2017). I believe that the Spreadsheet Select event would match your needs;

    - I believe that using the Kendo Grid in this scenario could be an option for you. However, as the Grid does not offer CSV import feature, you will have to manually convert the CSV data to JSON, load that JSON to a DataSource and pass that as DataSource of the Grid.

    I hope that the above helps you. If you have any further questions, please do not hesitate to contact us.

    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top