Kendo UI Quick Answers, #1

As Kendo UI continues to grow in popularity, the Kendo UI community is also quickly growing. And with that growing community come some very good technical questions about Kendo UI. To help give more visibility to some of these questions happening in the active Kendo UI Forums, I will periodically feature a few questions with answers here on the Kendo UI blog.

This is the first installment in "Kendo UI Quick Answers." Let's see what the forum "mailbag" has to offer today.

Q: Why are my Kendo UI input controls not posting values to the server?

Good question. So here is the scenario:

You have a Kendo UI input widget on your page (let's say it's a DropDownList). The Kendo UI widget is inside of an HTML form along with other "plain" form elements. This form contains a submit button that POSTs the form values to a server. In code we have this:

<h2>Basic Form</h2>

<form action="/" method="post">
    <input type="text" id="myText" />
    <input id="myDropList" />
    <input type="submit" value="Submit Form" />
</form>

<script type="text/javascript">
    //Intialize the Kendo UI DropDownList with some options
    $(function () {
        $("#myDropList").kendoDropDownList([
            { text: "Option 1", value:"One" }, 
            { text: "Option 2", value:"Two" }, 
            { text: "Option 3", value:"Three"}]);
    });
</script>

Fill out the form. Click submit. What values will the server receive in the form POST collection?

If you said "NONE!", you are correct. Why?

The solution is in basic HTML forms behavior. While we technically have two input elements in our form, both with an ID attribute, they both lack a Name attribute.  For form input values to be included in a POST, they must have a name attribute.

It's easy to forget this if you're doing a lot of programming with Ajax and JavaScript, where the ID attribute is usually sufficient. In fact, the ID attribute is used for just about everything (JavaScript, CSS) except form POSTing.

Fixing this problem for our "normal" input and our Kendo UI input simply requires the addition of the name attributes, like this:

<form action="/" method="post">
    <input type="text" id="myText" name="myText" />
    <input id="myDropList" name="myDropList" />
    <input type="submit" value="Submit Form" />
</form>

Q: Can I easily customize Kendo UI themes?

Yes, of course! Kendo UI is built to be highly customizable. While current betas only include a few themes out of the box, Kendo UI will eventually provide many "pixel perfect" out-of-the-box themes, along with a visual tool for quick and easy theme customization (similar to jQueryUI's ThemeRoller).

Under the covers, Kendo UI widgets use a semantic CSS convention, sometimes called "CSS Primitives." This means that there are common styles, like ".t-state-hover" (now ".k-state-hover" in upcoming betas) that define hover styles for all Kendo UI widgets.

Kendo UI styles are further broken in to two stylesheets: kendo.common.css and kendo.[themename].css.

The "common" stylesheet has everything needed for "core" Kendo UI widget styling. This stylesheet never needs to be customized. Think of it as "functional" CSS. The second "theme name" stylesheet has the style overrides and definitions specific to each theme. If you want to create a custom theme, it's only this second stylesheet that has to change.

Today, customizing Kendo UI themes is for CSS slingers. For the official release, the Kendo UI Theme Builder will make it possible for anyone to customize a Kendo UI theme.

BONUS: Using LESS to customize a Kendo UI theme

This is rough, not thoroughly tested, and not compatible with post-Beta1 builds of Kendo UI, but I thought I'd share anyway as an example of another way to quickly customize Kendo UI themes. In this case, I've replaced static CSS values in the Kendo UI theme stylesheet with LESS variables. Now, with simple variable changes, I can quickly restyle all of my Kendo UI widgets (obviously, excluding any changes needed in sprite image).

You can grab my LESS-ified theme file from this Gist.

Box of Crayons

Green Frog

Q: Can I configure Kendo UI JavaScript widgets with server-side code (like PHP)?

Sure. Since Kendo UI is a JavaScript framework, all processing and initialization happen after the HTML and JavaScript get to the browser. If you use a server-side framework, like PHP or ASP.NET, to manipulate the Kendo UI configuration code, these changes will be interpreted when the page loads.

For example, let's say we have some server data we want to use to define the list of options for a Kendo UI DropDownList again. If we were using PHP, we might do something like this to statically embed those options when the page is requested:

<input id="myDropDown" name="myDropDown" />

<script type="text/javascript">
    <?php
    $arr = array("{text:'TX'}","{text:'CA'}","{text:'MA'}");
    $script = 'var newArr = new Array(' . implode(',', $arr) . ')';        
    $echo $script;
    ?>
    
    $(function () {
        $("#myDropList").kendoDropDownList(newArr);
    });
</script>

When the page loads, the DropDownList will initialize with the values rendered in to the JavaScript array created by our PHP code.

In the future, we will start shipping Kendo UI wrappers for various popular server-side frameworks, making server-side configuration even easier. If you want to see a server-wrapper for your preferred framework, be sure to share your idea and vote on the Kendo UI UserVoice site.

---

I suppose that's enough answers for the first installment. Do you have other questions you want to see covered in this format? Let us know in the comments or send me an email directly (todd.anglin@kendoui.com). 'Til next time, have fun with Kendo UI!