Decorate your Sitefinity Forms with KendoUI

We’re quite lucky that sitefinity uses plain Html (albeit a bit bloated thanks to the ID attributes).  However what it means on a fundamental level is that they’re easier to style and extend.  If we had the RadControls being rendered out we’d have to have more complex designers, they’d be harder to style, yada yada.  So this is good news!

So lets say for example you need the functionality to have a user select a date.  Well you have two options.  Option 1 is to create a new sitefinity forms control, register it, re-build your project.  Option 2 is to run this $(".mydate input").kendoDatePicker();

Steps:

1. Load jQuery and KendoUI somehow on your page.   I don’t care from where, or how, just make sure you don’t get $ or kendo undefined javascript errors when the page runs the code.  Firebug is your friend on this one.
2. Put your form on the page
3. In a Javascript widget kendo-ize all the objects inside $(document).ready.

Things to Note:

1. So as you can see we have something REALLY cool…Rich Text Editing with one line of javascript :)  Now keep in mind the downside is that it’ll save the resulting HTML back to the forms table encoded.  So it’s not ideal unless you’re going to consume the results some other way where you can decode it back to readable…but for an emailed form like using Georges control, you can do this quite easily.
2. Since we’re Kendo-izing objects manually we can leverage every configuration\method\event kendo has to extend your form…go…nuts :)
3. Make sure to set CSS on your elements in order to specifically target the controls like I did with name and age.  It puts the class on the outer wrapper of the control…see figure1
4. USE FIREBUG! :)  It’ll help with script errors, or locating the elements you want to initialize.
5. You will still probably need some CSS styles to fix some styling
6. This is how I did my forms on this site

figure1

Cheers!