In this blog post, we will look at how easy it is to get started with Kendo UI Web using WebMatrix as a development tool. we will look at what is this WebMatrix in brief and how you can play with Kendo UI Web widgets within WebMatrix.

 

What is WebMatrix:

WebMatirx is a free and lightweight web development tool. You can create, publish and maintain your website with ease right within WebMatrix. You can know more about WebMatrix here: http://www.microsoft.com/web/webmatrix/

Installing WebMatrix:

WebMatrix can be installed by using the Web Platform Installer 4.0. Click the following button to install the WebMatrix. This will download an exe and launch the Web Platform Installer 4.0.

The Web Platform Installer will have an option to select WebMatrix 2 Release Candidate. Just select that and perform the installation.

Creating a Web Site using WebMatrix:

Once installed launch the WebMatrix from Start Menu. With WebMatrix we have 2 options to create a new web site.

We can use the Templates option to select from a pre defined 12 templates which includes ASP.NET, PHP, Node & HTML templates or we can use App gallery to download 61 open source application to start with.

 

For this blog post, I will be creating an empty site which can be found under Templates option. Give a name to the new site and hit Next button.

WebMatrix will go ahead and get the pre requisite for the template we have selected, install and configure the site for us.

Once configured the site dashboard will look like below:

As you can see, the site is created in user’s Documents folder.

Integrating Kendo UI:

One of the new features added to WebMatrix 2 is the support of NuGet packages. From the web site dashboard, select the Files workbench located in the left hand bottom corner. This will show the file structure of the project. Also notice the change in the ribbon in this view. On the far right hand top corner you will see a familiar NuGet Package icon. Similar to the package addition experience in Visual Studio here also within WebMatrix we can perform pretty much the the same steps to get a package. So lets see how to get Kendo UI Web.

Click on the NuGet Gallery button. You will be presented with NuGet Gallery window as below:

In the search string enter “Kendouiweb” and wait for the results to come back. NuGet will find one package with that search string and show you that in the results pane. Select the package and click Install.

Next screen it will show information of the package. Click Install again on this screen.

At this point, WebMatrix will retrieve the package information from NuGet server. It will get the End User License Agreement if any and show you that. You have option to Accept or Reject the EULA. If you accept the agreement package will be installed otherwise installation will be skipped.

Note: At this moment it is important for you to know that you are downloading Kendo UI Web trial version and I urge you to read the trial license without fail. This trial download allows you a free trial of Kendo UI Web framework for 30 days.  You can click on the “View License Terms” to understand the EULA. Alternatively, you can visit the licensing FAQ here http://www.kendoui.com/faq/licensing.aspx and here http://www.kendoui.com/purchase/license-agreement/kendo-ui-trial.aspx

Once you click on Accept, the package will be retrieved and installed in our application. Here is the folder structure after package installation.

As you can see from the above screen shot, Kendo UI framework related files have been downloaded and added to our application. The stylesheet’s are placed in Content folder and java script files are placed in Scripts folder. Next we will see how to work with Kendo UI Web Widgets

Create UI with Kendo:

Working with Kendo UI Web framework is 3 steps – Stylesheet reference, JavaScript reference and defining the HTML. So we will see them one by one.

Open the Default.cshtml and start by placing reference to Kendo UI Web stylesheets. Kendo UI comes with the following themes out of the box:

• Black
• Blue Opal
• Default
• Metro
• Silver

Apart from the above theme stylesheets, we have a common stylesheet which is required for all other theme stylesheets to work. So here is the stylesheet reference code:

<link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
rel="stylesheet" />
<link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
rel="stylesheet" />

Next, we reference the javascript required to work with Kendo UI. Here is the script tag snippet:

<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>

Next we defined the HTML. In this example I am going to create a UI Widget called DateTimePicker i.e. a widget which allows users to select Date and as well as Time in a single control. In the body of the page declare a input tag, give it an id and set a value to any date and time value. Here is the code snippet:

<input id="datetimepicker" value="10/12/2012 01:00 PM"

style="width:200px;" />

Next, on document ready we will refer the input tag by its id and ask kendo to transform that into an DateTimePicker widget with just one line of code as below:

<script>
    $(document).ready(function() {
        // create DateTimePicker from input HTML element
        $("#datetimepicker").kendoDateTimePicker();
    });
</script>

We use JQuery to get a reference to the input tag by its id and then invoke a kendo function kendoDateTimePicker() which does the magic under the hood to transform the input tag to a date time control like below:

 

Here is the complete HTML code snippet of Default.cshtml:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <!-- Step 1 : StyleSheet Reference -->
        <link href="/Content/kendo/2012.2.710/kendo.common.min.css" 
            rel="stylesheet" />
        <link href="/Content/kendo/2012.2.710/kendo.default.min.css" 
            rel="stylesheet" />

        <!-- Step 2 : JavaScript Reference -->
        <script src="~/Scripts/jquery-1.7.2.min.js"></script>
        <script src="~/Scripts/kendo/2012.2.710/kendo.web.min.js"></script>
    </head>
    <body>
        <div id="example" class="k-content">
            <div id="to-do">
                    <input id="datetimepicker" value="10/12/2012 01:00 PM" 
                    style="width:200px;" />
            </div>
        </div>
         <script>
            $(document).ready(function() {
                // create DateTimePicker from input HTML element
                $("#datetimepicker").kendoDateTimePicker();
            });
        </script>
    </body>
</html>

Here is the output of the code we just wrote:

Well that’s how easy it is to work with Kendo.

Conclusion:

WebMatrix is a great tool which is free and is best suited for lightweight web development. Through this post we have now seen the webMatrix support for NuGet packages. We saw how easy it is to get going with Kendo UI Web controls right from the step of looking at the package to installing to coding our first example with Kendo – all done within WebMatrix.

More information about Kendo UI can be seen at www.kendoui.com. You can view more demos of Kendo UI Web at the site itself. Here is a direct link to launch the demos –

You can also download Kendo UI directly from the site for a 30 day free trial. Here is the direct link for the download:

Hope this excites you to start coding with Kendo UI. Looking forward to your experiences with Kendo. Till next time – Happy Coding !.