logo/image in Kendo window's title

12 posts, 0 answers
  1. Poonam
    Poonam avatar
    14 posts
    Member since:
    Nov 2012

    Posted 13 Dec 2012 Link to this post

    How to add icon in Kendo window's title?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 17 Dec 2012 Link to this post

    Hi Poonam,

    I am afraid at this point adding icons in Kendo UI window's title is not supported. Actually there is a public item with the same idea at our UserVoice portal so if you wish you may cast a vote, leave a comment or monitor the community's interest in it here. The more votes the suggestion collects, the higher priority will have when planning for a release. 
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Poonam
    Poonam avatar
    14 posts
    Member since:
    Nov 2012

    Posted 17 Dec 2012 Link to this post

    Thank you for your reply.

    Regards,

    Poonam
  5. Mark
    Mark avatar
    15 posts
    Member since:
    Feb 2010

    Posted 01 Aug 2013 Link to this post

    i need to same things in kendo ui window
    put icon/images in window title bar
    is it possible?
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 Aug 2013 Link to this post

    Hello Mark,

    As I mentioned in my previous post, this feature is currently not available in Kendo UI Window. As a possible workaround I can suggest you using jQuery API to add additional HTML element with the needed image and custom CSS to style it. For example: 

    <script>
    $(".k-window-title").prepend("<div class='custom'></div>");
    </script>
     
    <style>
    .custom{
        background: url('//...');
        width: 20px;
        height: 20px;
        display: inline-block;
    }  
    </style>
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 24 Apr 2014 in reply to Iliana Nikolova Link to this post

    Thanks for the post which I used to get this working for me:

    $(".k-window-title").prepend("<div class='TriSysPopupWindowIcon'></div> &nbsp; ");

    .TriSysPopupWindowIcon
    {
         background: url('/img/t-cms-24x24.png');
         background-size: 16px;
         width: 16px;
         height: 16px;
         display: inline-block;
    }

    My problem now however is that the title text is aligned to the bottom of the windows caption - whereas I want it middle aligned alongside the icon. Can you please help?

    I think I need to edit the k-window-titlebar but I do not know how to do this.

  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Apr 2014 Link to this post

    Hi Garry,

    In order to achieve the expected result you could add the following properties to the CSS rule:
    .TriSysPopupWindowIcon
    {
        background: url('/img/t-cms-24x24.png');
        background-size: 16px;
        width: 16px;
        height: 16px;
        display: inline-block;
        line-height: 16px;
        vertical-align: middle;
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Garry
    Garry avatar
    43 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2014 in reply to Iliana Nikolova Link to this post

    Thanks Lliana - this works perfectly.

    Kind Regards, Garry.
  10. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 17 Nov 2014 in reply to Iliana Nikolova Link to this post

    How can I do this using angular ? 
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 Nov 2014 Link to this post

    Hi Gal,

    I am not quite sure if I understand your requirement correctly as the suggested solution is JavaScript / CSS related. Could you please elaborate a bit more?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Gal
    Gal avatar
    48 posts
    Member since:
    Apr 2009

    Posted 19 Nov 2014 in reply to Iliana Nikolova Link to this post

    Hi Iliana  

    I need to do this using Angular can you post an example using Angular / CSS 
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Nov 2014 Link to this post

    Hi Gal,

    You can add the additional HTML element in the kendoWidgetCreated event (example). 

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready