DotNetT2 Light_1200x303

Check out all the latest enhancements in the Spreadsheet for Telerik UI for ASP.NET AJAX.

The R1 2020 SP1 release of Telerik UI for ASP.NET AJAX was not only about the PdfViewer control – definitely the star of the release – but also about the Spreadsheet, which brought to you four highly anticipated features:

  • Built-in Import from an Excel File
  • Ability to add images
  • Out-of-the-box Export to PDF and Excel
  • Cell comments

Let me reveal the features one by one plus the benefits for you in more detail:

Import from Excel

This important functionality is now built-in and available at the client-side:

Import_Excel_File 

You can make use of it through the fromFile() passing the actual Excel file to the function. For example, the RadAsyncUpload control can be used for selection of a file. In its OnClientFileSelected client-side event, you can get a reference to the selected file and supply the RadSpreadsheet with it:

<telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1"></telerik:RadSpreadsheet>

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileSelected="OnClientFileSelected"></telerik:RadAsyncUpload>

<script>

    function OnClientFileSelected(sender, args) {

        var file = args.get_fileInputField().files[0]; // get the selected file from the RadAsyncUpload

        var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");

        spreadsheet.fromFile(file); //supply the RadSpreadsheet control with the Excel file.

        $(args.get_row()).remove(); //remove the row, visualizing the selection in the RadAsyncUpload

    }        

</script>

Add Images

Right now, you can not only insert images in the sheet via the Insert Image dialog, but also drag and drop them on it for repositioning.

Insert_Image 

To add the Insert Image button to the toolbar, register the InsertImage tool:

        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">

            <Toolbar>

                <telerik:SpreadsheetToolbarTab Text="Home">

                    <telerik:SpreadsheetToolbarGroup>

                        <telerik:SpreadsheetTool Name="InsertImage" ShowLabel="true" />

                    </telerik:SpreadsheetToolbarGroup>

                </telerik:SpreadsheetToolbarTab>

            </Toolbar>

        </telerik:RadSpreadsheet>

Tip

If you want, you can delete the image by selecting it and pressing the Delete key.

Export to PDF and Excel

The brand-new ExportAs dialog allows you to export the spreadsheet content to two popular formats: PDF and XLSX.

Export_to_Excel_and_PDF 

All you have to do to enable it is to register the ExportAs tool to the toolbar, e.g.

        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">

 

            <Toolbar>

                <telerik:SpreadsheetToolbarTab Text="Home">

                    <telerik:SpreadsheetToolbarGroup>

                        <telerik:SpreadsheetTool Name="ExportAs" ShowLabel="true" />

                    </telerik:SpreadsheetToolbarGroup>
                    …

The export to PDF and to Excel can be also triggered programmatically via the API of the underlying Kendo Spreadsheet widget: saveAsPDF and saveAsExcel.

You can play with the new feature at Export to PDF and Export to Excel File demos.

Cell Comments

The comments feature allows you to insert, edit and remove comments via the provided Insert Comment dialog:

Insert_New_Comment

To enable the Insert Comment button add the following entry to the RadSpreadsheet declaration:

        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">

            <Toolbar>

                <telerik:SpreadsheetToolbarTab Text="Home">

                    <telerik:SpreadsheetToolbarGroup>

                        <telerik:SpreadsheetTool Name="InsertComment" ShowLabel="true" />

                    </telerik:SpreadsheetToolbarGroup>

                </telerik:SpreadsheetToolbarTab>

            </Toolbar>

        </telerik:RadSpreadsheet>

Tips

  • You can also add or remove comments via the API of the underlying Kendo widget - range.comment(). Go and test this feature at the Cell Comments demo.
  • The workbook with Cell Comments can also be imported and exported using the built-in import/export tools.

What’s Next?

  • PdfViewer - If you have missed by any chance this super trendy component in the R1 2020 SP1 release, you can take a glance at the Show PDF Files within Your ASP.NET Web Form Page in No Time blog as well as play with the live demos.
  • Timeline – Upcoming in May, another big addition to the R2 release will be the brand-new Timeline component. You will be able to visualize series of events or chronological facts in a stylish and interactive way. It will be a server wrapper of the Kendo UI timeline widget, so if you are curious to learn more about it visit this link.

We Value Your Feedback!

You know how important the feedback for the development and enhancement of any product on the market is. As a company driven to serve developers around the world, we strive to satisfy your expectations and needs to speed up your development with supreme UI components, so you are always warmly welcomed to share your thoughts and feedback.

We do appreciate it, so do not hesitate to drop your comments below or in our feedback portal, and tell us how you feel about the new components or our plans, and don't forget to contribute with ideas on the AJAX future roadmap and backlog.

Be sure to grab the latest bits from your account or download a free trial today to get started.

Start Your Trial


Rumen-Jekov
About the Author

Rumen Jekov

Rumen Jekov (@Rumen_Jekov) started his career at Telerik’s ASP.NET team in 2004 as a tech support engineer and passed through the position of a team lead to a product manager. He has answered more than 51,500 tickets helping customers to achieve their goals. Presently, he is a product owner of Telerik UI for ASP.NET AJAX and a manager of the AJAX crew at Progress. Off work, he enjoys traveling across the globe, watching movies and tech shows, reading books and listening to podcasts.

Related Posts

Comments

Comments are disabled in preview mode.