Exporting Grid to Excel with % Width

[Klaus]

Hello,

 we are trying to export a Grid to Excel. This works fine, but since we are using percentage based width for some columns, this percentage ("30%") gets turned into a pixel count (30px), which in turn makes the Excel column way too small.

 

Is there a way to set a better width, or an automatic "Be as big as you need to be in Excel" for the export?

 

@(Html.Kendo().Grid<BusinessObjectLayer.BusinessObjects.CategoryOfCostBusinessObject>()
    .Name("CategoryGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Title).Width("30%");
        columns.Bound(p => p.Rate).Width(70);
        columns.Bound(p => p.Description).ClientTemplate("#: convertHtmlString(Description, 50)#");
        columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(88);
    })
    .ToolBar(toolbar => { toolbar.Create().Text("Add Category"); toolbar.Excel().HtmlAttributes(new { @class = "pull-right" }).Text(" Export to Excel"); })
    .Excel(excel => excel
        .FileName("Categories.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("ExcelExport", "Category"))
    )

Thanks for your help,

Klaus

[Dimiter Madjarov]

Hello Klaus,

As a solution for the current case you could bind to the excelExport event of the Grid and manually specify the desired width of the columns. Here is a runnable example that demonstrates the approach.

Regards,
Dimiter Madjarov
Telerik

 

 

[Klaus]

Hello,

 thanks, that looks like it will work for us.

 

Best regards,

Klaus

[DHHS]

Hi Dimiter,

It's me again :)

I am trying to do export to excel. I have already toolbar template on a grid for new record which is working fine and i want to add one more toolbar for export to excel button and it is not displaying. When i remove new record button, it is displaying properly but when i keep both export to excel button is not displaying.

After displaying too, my export to excel button is not working too. it is not doing anything. Did i miss anything else?

<div class="container-fluid">
    <br /><br /><br />
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractorModel.contractor>()
        .Name("grid")
        .Columns(columns =>
        {
            //columns.Bound(p => p.Id).Filterable(false).Width(50);
            columns.Bound(p => p.ContractorName);
            columns.Bound(p => p.ContractorType).Title("Type").Width(80);
            columns.Bound(p => p.BHSISNum).Width(180); ;
            columns.Bound(p => p.ContractorIsAlsoRegion).Width(110).Title("Is Region").ClientTemplate("<input type='checkbox' disabled='disabled' #= ContractorIsAlsoRegion ? checked='checked': '' # class='chkbx' />").HtmlAttributes(new { style = "text-align: center" });
            columns.Bound(p => p.AddressBkNum).Width(160);
            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}").Width(140);
            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}").Width(140); ;
            columns.Bound(p => p.ISAT).Width(100);
            columns.Bound(p => p.MHS).Width(100);
            columns.Bound(p => p.ParentName).Width(170); ;
            columns.Command(command =>
            {
                command.Custom("Edit").SendDataKeys(true).Click("editClick");
                command.Custom("View").SendDataKeys(true).Click("viewClick");
                //command.Custom("Delete").SendDataKeys(true).Click("deleteClick");
            }).Width(160);
        })

           .Events(e => e.DataBound("onDataBound"))
                 .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
        .Sortable()
                 .Scrollable()
        .Filterable()
        .Selectable()

                .HtmlAttributes(new { style = "height:636px;" })
        .DataSource(dataSource => dataSource
        .Ajax()

                .Read(read => read.Action("Contractors_Read", "Contractor"))
        )
                .ToolBar(toolbar =>
        {
            toolbar.Template(@<text>
                <div class="toolbar">
                    <input type="button" title="New Record" value="New Record" onclick='OnCreate()' class="k-button k-button-icontext k-grid-add k-primary" />
                    @*   <a class="k-button k-button-icontext k-grid-add k-primary" href="/Admin/Contractor/Create">New Record</a>*@

                </div>
            </text>);
            toolbar.Excel().HtmlAttributes(new { @class = "pull-right" }).Text(" Export to Excel");
        })
                .Excel(excel => excel
                        .FileName("Kendo UI Grid Export.xlsx")
                        .Filterable(true)
                        .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
                    )
            )
        </div>
    </div>
</div>

Controller Method :

    [HttpPost]
        public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

[Dimiter Madjarov]

Hello DHHS,

When a toolbar template is used, it will override the included commands and they will be ignored. In this case you should manually include the command mark up in the template.
E.g.

<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>

Regards,
Dimiter Madjarov
Telerik