How to change Kendo Excel Button Content Text


Tags: css,kendo-ui,kendo-grid

Problem :

I have a Kendo grid which has Excel export function. It produces a" Export to Excel" texted button and i want to change its text like "Send to Excel".

 @(Html.Kendo().Grid(Model).ToList())
.Name("Grid")

.Columns(columns =>
{
    //columns.Bound(p => p.BirimAd).Title("Birim").Width(500);
    columns.Bound(p => p.SehirAd).Title("┼×ehir").HtmlAttributes(new { style = "text-align:center" }).Width(200);
    columns.Bound(p => p.Value).Title("Value").HtmlAttributes(new { style = "text-align:center" }).Width(200);
    //columns.Bound(p => p.Avg).Title("Avg").HtmlAttributes(new { style = "text-align:center" }).Width(200);
})
  .ToolBar(tools => tools.Excel())

.Sortable()

.Excel(excel => excel
    .FileName("Rapor.xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("Excel_Export_Save", "Report"))
)

.ColumnMenu()
.DataSource(dataSource => dataSource
    .Ajax()

.Read(read => read.Action("Excel_Export_Read", "Report"))
)
    )

and excel button is producing like that:

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

I am trying this css:

 <style>

     .k-button k-button-icontext k-grid-excel
     {
         content:"Send to Excel";
     }
     .k-icon k-i-excel
     {
         content:"Send to Excel"
     }

 </style>

But it looks like same text. How can i change it?



Solution :

Using custom command and calling export via javascript api

Razor :

.ToolBar(tools => tools.Custom("Export").Text("Send to Excel").Click("exportExcel"))

Javascript:

function exportExcel() {
    var grid = $("#grid").data("kendoGrid");
    grid.saveAsExcel();
});

    CSS Howto..

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to apply a CSS height setting to all child elements?

    How can I apply a font type to everything using css

    How to set a single value of transform while leaving the other values?

    how to collapse width of parent element to total width of child elements

    how to trace this computed CSS value in firefox inspector?

    How to insert a div below dynamic divs row after onclick

    How can I have columns like this in CSS? (image)

    How to tune CSS with Isotope to display top border?

    How to add CSS styles to javascript

    My dropdown menu isn't showing below parent

    How to override the CSS !important property when the original file loads after the customized css file

    How to create push button?

    how to make my horizontal css dock navigation to vertical

    Rotation of a div gives a black background on IE, how can I remove it?

    How to select only some children in CSS?

    How to apply CSS directives to h3 element?

    HTML/CSS: How to make a bar on the side to take you to a certain part of the page

    How automatically adjust div's width using CSS?

    How to use grunt sass to compile and compress scss to css?

    how to do drop down list

    How to force two elements become hovered at the same time?

    Using CSS or Java to Show or Hide Empty Content Area

    How to contain a scrollable div element completely within another?

    how to make background fit on screen bootstrap3

    How do I toggle CSS with jQuery?

    How to construct multilevel menu using CSS only?

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    how to include css and js files to php template?