How to make a round Kendo UI button
Dec 13
How to make a round button with Kendo UI
Background
There are plenty of posts on the web showing you how to make a typical square button with Kendo UI, but I have not seen a post describing how to make a round Kendo button. Since there are no other posts that cover this, I had to learn this through trial and error.
If you're using Kendo, it is a good idea to try to use as many native Kendo widgets as possible as these widgets will be incorporated into the chosen Kendo theme. The reasons for this are simple, native Kendo widgets will perform and look the same and inherit the properties of the selected theme.
Border Radius 50% can make nearly every element round, including a normal Kendo button.
Using the border-radius: 50% CSS can make nearly any HTML into a circle. Indeed, it can also make a normal Kendo UI button into a circle. However, on the desktop, Kendo UI's button also has an outline around it's buttons, and the bottom part of the outline is larger than the upper part making the button look weird. Let's take a look:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org #primaryTextButton { height: 35px; width: 35px; border-radius: 50%; } <button id="primaryTextButton" class="k-primary">i</button> looks OK with mobile- but not so good on the desktop. 1#primaryTextButton { 2 height: 35px; 3 width: 35px; 4 border-radius: 50%; 5} 6<button id="primaryTextButton" class="k-primary">i</button> looks OK with mobile- but not so good on the desktop. |
This button's outline looks weird. It only gets worse when the button becomes smaller.
A different approach
The code below is one method to make a round Kendo UI button widget using inline code. The id element can be anything. Here I am using the button to expand the comments for Galaxie Blog, so I am using the id of commentControl. The collapse class is also not important here.
What is important is the k-i-sort-desc-sm class, and k-primary. The k-i-sort-desc-sm is the Kendo UI icon that is being displayed, and the k-primary class indicates that the color of the button must be the primary color of the selected theme.
The width and height of the button are set by the width and height property, and the border-radius: 50% argument takes the width and height properties to make a circular button image.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <span id="commentControl" class="collapse k-icon k-i-sort-desc-sm k-primary" style="width: 35px; height:35px; border-radius: 50%;"></span> 1<span id="commentControl" class="collapse k-icon k-i-sort-desc-sm k-primary" style="width: 35px; height:35px; border-radius: 50%;"></span> |
This Kendo button takes on the primary color of the selected theme, and without the funny outline, it looks much better!
This entry was posted on December 13, 2019 at 2:24 PM and has received 738 views.
How to add additional descriptive elements to an element with 'data-'
Mar 29
by Gregory Alexander Kendo UI, HTML 5, jQuery

While coding logic for a Kendo tooltip, I had to send both the anchor's title and other information that the Kendo tooltip would display. I wanted to display the location where the image was taken, and a description of the image like this:
"Grand Prismatic Spring, Yellowstone National Park.
The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?"
I wanted both elements to be separated with a horizontal rule, and I needed to isolate the location and the description. However, the anchor tag only has a 'title' and an alt tag to store this information.
If you want to store additional information in an element does not support, you can easily use the 'data-' + name prefix like so:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <span title="Grand Prismatic Spring, Yellowstone National Park." data-desc="The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?"> 1<span title="Grand Prismatic Spring, Yellowstone National Park." data-desc="The vibrant colors of this spring is best captured from over-head. Wouldn't it be cool to fly a drone over this and take a few pictures?"> |
To get the information that the data element contains, in this case, a Kendo template, use the data- prefix. You can name the prefix anything you want, and within the javascript template, don't need to specify the actual data tag- just leave it blank but name the variable after the 'data-' element (see '#=target.data('desc')#: below).
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org <!--- Kendo tooltip template---> <script id="aboutTemplate" type="text/x-kendo-template"> <div class="template-wrapper"> <h3> #=target.data('title')# </h3> <p>#=target.data('desc')#</p> </div> </script> 1<!--- Kendo tooltip template---> 2<script id="aboutTemplate" type="text/x-kendo-template"> 3 <div class="template-wrapper"> 4 <h3> #=target.data('title')# </h3> 5 <p>#=target.data('desc')#</p> 6 </div> 7</script> |
This is a neat way to store additional data into HTML elements, such as a span tag, or any other element as well.
This entry was posted on March 29, 2019 at 2:16 PM and has received 348 views.
Kendo Server Side Validation
Mar 1
by Gregory Alexander Kendo UI, Galaxie Blog

This post describes how to use Kendo's validator for server side validation. There are very few posts showing how to use Kendo's validator with server side validation (none of them are really clear), it took me a bit of time to figure it out, and want to share my approach and will provide extensive comments.
One of the reasons that there are very few posts concerning server side validation with the Kendo validator is that it is not really built to do this. Unlike the majority of the other Kendo widgets which allow for customization, the validator was meant for simple validation. The built in validation is quite useful for simple client side validation, but it is not an extensive validation library and anytime that you need to extend it you will find yourself wanting more. I felt like I was trying to hammer a square peg into a circle while coding this. However, since one of the main goals of this blog is to share how ColdFusion can use the Kendo UI, I felt the need to dig into the kendo validator.
I have a captcha form on this blog that is used to verify that the user is an actual user, and it encrypts a token and passes it off to the server side for validation. You can see this in action by making a comment on this post below.
The meat and potatoes of this function, like most of the other Kendo widgets, lies in the Javascript. This script is heavily commented. Click the more button below to inspect the script.
This entry was posted on March 1, 2019 at 5:34 PM and has received 737 views.
Download Galaxie Blog
Subscribe
Tags
Recent Posts
CfBlogs.org - A New ColdFusion Blog Aggregator |
Extending Application.cfc's using mappings and proxies |
Happy New Year! |
Galaxie Blog Status Update |
Adding a dummy record in the first row of a recordset |