Making a Custom Toolbar Button look like the other Toolbar Buttons

4 posts, 0 answers
  1. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 09 Jun Link to this post

    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

     

     

     

  2. Georgi
    Admin
    Georgi avatar
    169 posts

    Posted 13 Jun Link to this post

    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.
  3. Brent
    Brent avatar
    7 posts
    Member since:
    Oct 2014

    Posted 13 Jun in reply to Georgi Link to this post

    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

     

     

  4. Georgi
    Admin
    Georgi avatar
    169 posts

    Posted 15 Jun Link to this post

    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.
Back to Top