Making a Custom Toolbar Button look like the other Toolbar Buttons

[Brent]

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

 

 

 

[Georgi]

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:

• https://www.screencast.com/t/dSgHEW5mVr3C

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


Regards,
Georgi
Progress Telerik

[Brent]

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

 

 

[Georgi]

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