This is a migrated thread and some comments may be shown as answers.

Making a Custom Toolbar Button look like the other Toolbar Buttons

3 Answers 146 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brent
Top achievements
Rank 1
Brent asked on 09 Jun 2017, 04:12 PM

I need to make a Custom Toolbar button mesh in with the other 2 buttons. 

(See attachment and code)

.ToolBar(tools =>
{
 tools.Custom().Text("Print this Page").Name("PrintPage").Url("#").HtmlAttributes(new { @class = "export-img" });
                   tools.Pdf().Text("Export all records to PDF");
                   tools.Excel().Text("Export all records to Excel");
}
 )

 

I have tried to apply CSS just can't get the ".Custom()" to take effect.

Suggestions?

Thanks

 

 

 

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 13 Jun 2017, 08:36 AM
Hi Brent, 

Based on the provided information I assume that the reason for different appearance are the custom styles you are adding. When I remove the additional CSS class the button looks like the rest of the buttons on my end:



 Try to remove the custom styles applied on the button and let me know how the behavior changes.


Regards,
Georgi
Progress Telerik
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.
0
Brent
Top achievements
Rank 1
answered on 13 Jun 2017, 02:05 PM

Georgi, Thanks for your reply.

We do have a CSS for our apps and someone did actually update it to make buttons "bluer". (see attachment)

While this is fine, the "Print this Page" button still looks different. 

I have tried targeting the item w/css on the view and in the agency/custom css, but no avail.

The button's wiring is assigned a class "export-img", but need that for functionality.

.ToolBar(tools =>
                       {
     tools.Custom().Text("Print this Page").Name("PrintPage").Url("#").HtmlAttributes(new { @class = "export-img" });
     tools.Pdf().Text("Export all records to PDF");
     tools.Excel().Text("Export all records to Excel");
                       }
           )

 

<script>
    $(document).ready(function () {
 
        $(".export-img").click(function () {
            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM($(".content-wrapper"))
            .then(function (group) {
                // Render the result as a PNG image
                return kendo.drawing.exportImage(group);
            })
            .done(function (data) {
                // Save the image file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "ProviderSEarchReportSinglePage.png",
                });
            });
        });
 
    })
 
        
 
</script>

 

Thanks

 

 

0
Georgi
Telerik team
answered on 15 Jun 2017, 11:22 AM
Hi Brent,

Could you please make sure that the custom button has the .k-button .k-button-icontext  CSS classes. If none of them is missing then the case is overriding of the styles. 

In order to force kendo styles to apply you should either set them as important, set the styles inline or place 
or remove the styles from .export-img CSS class if they are not needed.


Regards,
Georgi
Progress Telerik
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.
Tags
Grid
Asked by
Brent
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Brent
Top achievements
Rank 1
Share this question
or