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

logo/image in Kendo window's title

11 Answers 348 Views
Window
This is a migrated thread and some comments may be shown as answers.
Poonam
Top achievements
Rank 1
Poonam asked on 13 Dec 2012, 07:31 PM
How to add icon in Kendo window's title?

11 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 17 Dec 2012, 09:50 AM
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!
0
Poonam
Top achievements
Rank 1
answered on 17 Dec 2012, 02:54 PM
Thank you for your reply.

Regards,

Poonam
0
Mark
Top achievements
Rank 1
answered on 01 Aug 2013, 07:46 AM
i need to same things in kendo ui window
put icon/images in window title bar
is it possible?
0
Iliana Nikolova
Telerik team
answered on 02 Aug 2013, 04:06 PM
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!
0
Garry
Top achievements
Rank 2
Veteran
answered on 24 Apr 2014, 12:39 PM
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.

0
Iliana Nikolova
Telerik team
answered on 25 Apr 2014, 06:15 AM
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!
 
0
Garry
Top achievements
Rank 2
Veteran
answered on 25 Apr 2014, 07:40 AM
Thanks Lliana - this works perfectly.

Kind Regards, Garry.
0
Gal
Top achievements
Rank 2
answered on 17 Nov 2014, 10:05 PM
How can I do this using  
0
Iliana Nikolova
Telerik team
answered on 19 Nov 2014, 04:11 PM
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!
 
0
Gal
Top achievements
Rank 2
answered on 19 Nov 2014, 04:34 PM
Hi Iliana  

I need to do this using Angular can you post an example using Angular / CSS 
0
Iliana Nikolova
Telerik team
answered on 21 Nov 2014, 09:35 AM
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!
 
Tags
Window
Asked by
Poonam
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Poonam
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Garry
Top achievements
Rank 2
Veteran
Gal
Top achievements
Rank 2
Share this question
or