11 Answers, 1 is accepted
0
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
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
![](/forums/images/avatarimages/default.gif)
Poonam
Top achievements
Rank 1
answered on 17 Dec 2012, 02:54 PM
Thank you for your reply.
Regards,
Poonam
Regards,
Poonam
0
![](/forums/images/avatarimages/default.gif)
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?
put icon/images in window title bar
is it possible?
0
Hello Mark,
Regards,
Iliana Nikolova
Telerik
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>
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
![](/forums/images/avatarimages/e980f216-6b02-4fe7-b4a4-d00bd6045636t-logo-512x512.png)
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> ");
.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.
$(".k-window-title").prepend("<div class='TriSysPopupWindowIcon'></div> ");
.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
Hi Garry,
In order to achieve the expected result you could add the following properties to the CSS rule:
Regards,
Iliana Nikolova
Telerik
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
![](/forums/images/avatarimages/e980f216-6b02-4fe7-b4a4-d00bd6045636t-logo-512x512.png)
Garry
Top achievements
Rank 2
Veteran
answered on 25 Apr 2014, 07:40 AM
Thanks Lliana - this works perfectly.
Kind Regards, Garry.
Kind Regards, Garry.
0
![](/forums/images/avatarimages/78787ba7-7310-4f17-a0e5-8bf120b78926gal20190908_1.jpg)
Gal
Top achievements
Rank 2
answered on 17 Nov 2014, 10:05 PM
How can I do this using
0
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
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
![](/forums/images/avatarimages/78787ba7-7310-4f17-a0e5-8bf120b78926gal20190908_1.jpg)
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
I need to do this using Angular can you post an example using Angular / CSS
0
Hi Gal,
You can add the additional HTML element in the kendoWidgetCreated event (example).
Regards,
Iliana Nikolova
Telerik
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!