I've been working with Telerik products for several years now, so when Telerik annouced that they were creating a new JavaScript framework that could be used with any platform, I was excited to jump in and start playing with it. I've been able to work with it quite easily using ASP.NET MVC and have been pleased with it's performance, but I wondered, how well does it work with other platforms? I did some research to choose what framework I would like to try using with Kendo UI, and found that Django had a lot of similarities to ASP.NET MVC. So, I setup a virtual machine with Fedora 16 (Linux), Eclipse with the PyDev plugin, the Django framework, jQuery and Kendo UI. I then went through the excellent First Steps tutorial on the Django website, which if you are new to Django, I would highly recommend.

Instead of coming up with some creative idea for a sample application, I decided to create an application that displays information about the Kendo UI widgets. To keep it simple, I decided that I would display the list of Kendo UI widgets in a Kendo UI Grid. The grid would display the name and description of each Kendo UI widget, as well as the URL for the widget on the Kendo UI website.

Note: if you are an ASP.NET MVC developer looking at this, keep in mind the following:

ASP.NET MVC	Django
Model	Model
View	Template
Controlleer	View

Creating the DjangoKendoSample Project

I launched Eclipse and I selected New -> Other. In the Wizards dialog, filter box, I entered Django, and then selected the "PyDev Django Project" wizard. I gave it the name "DjangoKendoSample", and clicked Next. In the Django Settings, I left everything as is to use sqlite3 and clicked Finish.

I then opened up a bash window and navigated to the "DjangoKendoSample" package folder. I typed the following to create a "widgets" package:

python manage.py startapp widgets

I switched back to Eclipse and refreshed the PyDev Package Explorer.

In the DjangoKendoSample package, I opened up the settings.py and added django.contrib.admin and widgets to the INSTALLED_APPS so that it looked like this:

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widgets',
)

In Eclipse, I added a static folder to the DjangoKendoSample package and then in settings.py I added a static files directory to the STATICFILES_DIRS so that it looked like this:

STATICFILES_DIRS = (
    "/home/jddevight/workspace/DjangoKendoSample/DjangoKendoSample/static",
)

Next, In Eclipse, I added a templates folder to the DjangoKendoSample package and then in settings.py I added template directory to the TEMPLATE_DIRS sp that it looked like this:

TEMPLATE_DIRS = (
    "/home/jddevight/workspace/DjangoKendoSample/DjangoKendoSample/templates"
)

In the DjangoKendoSample/static folder, I created 2 folders, css and js. I copied the contents of the Kendo UI styles folder into the DjangoKendoSample/static/css folder. I then copied the contents of the Kendo UI js folder into the DjangoKendoSample/static/js folder. I also copied the jquery-1.7.1.min.js file into the DjangoKendoSample/static/js folder.

Next, in the DjangoKendoSample/templates folder, I created a folder called widgets.

To define the routing for the admin site and the widgets site; in the DjangoKendoSample, I opened up the urls.py and replaced the contents with the following code:

from django.conf.urls.defaults import patterns, include, url
 
from django.contrib import admin
admin.autodiscover()
 
urlpatterns = patterns('',
    url(r'^widgets/', include('widgets.urls')),
    url(r'^admin/', include(admin.site.urls)),
)

Creating the Model

In the widgets package, I opened up the models.py module and added the following code:

from django.db import models
 
class Widget(models.Model):
    name = models.CharField(max_length=100)
    description = models.CharField(max_length=1000)
    url = models.URLField()
    def __unicode__(self):
        return self.name
    class Meta:
        ordering = ['name']

I then opened up a bash window and navigated to the "DjangoKendoSample" package folder. I typed the following to create the table in the database for the Widget model:

python manage.py syncdb

Creating the View

In the widgets package, I opened up the views.py module and added an index function and a widgetsList function. The index function displays the index.html page and the widgetsList function returns a list of widgets serialized as JSON.

The default method of serializing a model creates a JSON representation of the Widget model as:

{
  "pk": 1,
  "model": "widgets.widget",
  "fields": {
    "name": AutoComplete",
    "description": "The AutoComplete widget provides suggestions depending on the typed text.  It allows entry of multiple values with by predefined seperator.  The suggestions shown by the AutoComplete widget can come from a local Array or from a remote data service.",
    "url": "http://demos.kendoui.com/autocomplete/index.html"
  }
}

However, I wanted it to look like this:

{
  "id": 1,
  "name": AutoComplete",
  "description": "The AutoComplete widget provides suggestions depending on the typed text.  It allows entry of multiple values with by predefined seperator.  The suggestions shown by the AutoComplete widget can come from a local Array or from a remote data service.",
  "url": "http://demos.kendoui.com/autocomplete/index.html"
}

To accomplish this, I created an empty array. I then looped through all the widgets, and for each widget, I appended the desired JSON to the array. Finally, I used the simplejson.dumps function to convert the array to JSON.

Here is the code for the view:

from django.http import HttpResponse
from django.shortcuts import render_to_response
from django.utils import simplejson
from DjangoKendoSample.widgets.models import Widget
 
def index(request):
    return render_to_response('widgets/index.html')
 
def widgetsList(request):
    widgetsList = []
 
    for widget in Widget.objects.all().order_by('name'):
        widgetsList.append({'id': widget.id,'name': widget.name,'description': widget.description,'url': widget.url})
 
    data = simplejson.dumps(widgetsList)
    return HttpResponse(data, mimetype='application/javascript')

Creating the Template

In the templates folder, I added the following 2 files: index.html and layout.html. The layout.html file is a base template and index.html derives from layout.html. In Django, the base template defines blocks that the child template can override. The syntax for defining a block in the base template is:

{% block name_of_block %}contents_of_block{% endblock %}

In the base template, I define the html that will be used for all the templates in the widgets package. I define the links to the Kendo UI stylesheets and the references to the Kendo UI and jQuery javascript files. I define a contents block and a scripts block. Here is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href='/static/css/style.css' rel='stylesheet' type='text/css'/>
    <link href='/static/css/kendo.common.min.css' rel='stylesheet' type='text/css'/>
    <link href='/static/css/kendo.default.min.css' rel='stylesheet' type='text/css'/>
  </head>
 
  <body>
    <div id="content">
      {% block content %}{% endblock %}
    </div>
 
    <script type='text/javascript' src='/static/js/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='/static/js/kendo.all.min.js'></script>
    {% block scripts %}{% endblock %}
  </body>
</html>

In the index.html template, I extend the layout.html template. I define the content block that contains a div that will be used to render the Kendo UI grid. I define the scripts block that contains a script tag. The script tag contains the jquery .ready() function. Within the .ready() function, I initialize the Kendo UI grid by calling the widgetsList function in the widgets package to get the list of widgets by using the grid dataSource configuration setting. Since I want the url field to be rendered as an anchor html element, I add the template configuration setting to the url column and provide the html needed to render the url using the achor tag. I can use the value of the url field by placing the name of the field ( url ) within a dollar sign, open curly brace ( ${ ) and a close curly brace ( } ). Here is the code:

{% extends "widgets/layout.html" %}
 
{% block content %}
<h2>Kendo UI Widgets</h2>
 
<div id='widgetsGrid'>
</div>
{% endblock %}
 
{% block scripts %}
<script type="text/javascript">
  $(document).ready(function() {
    $('#widgetsGrid').kendoGrid({
      dataSource: {
    transport: {
      read: {
        url: '/widgets/widgetsList/',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json'
      }
    },
    pageSize: 10
      },
      columns: [
    {
      field: 'name',
      title: 'Name'
    },
    {
      field: 'description',
      title: 'Description'
    },
    {
      field: 'url',
      title: 'Url',
      template: "<a href='${ url }'>${ url }</a>"
    }
      ],
      height: 500,
      sortable: true,
      pageable: true
    });
  });
</script>
{% endblock %}

URLconf for the widgets package

Before I could run the application, I needed to configure the URLconf to display the index.html page and also the ajax call that is made to the widgetsList function. In the widgets package, I added a urls.py module and add the following code:

from django.conf.urls.defaults import patterns, url
 
urlpatterns = patterns('widgets.views',
    url(r'^$', 'index'),
    url(r'^widgetsList/$', 'widgetsList')
)

Run the Application

To run the application, in Eclipse, from the PyDev Package Explorer, I right-clicked on the DjangoKendoSample project, highlighted Run As, and selected PyDev: Django. I then launched FireFox, and entered the following url: http://127.0.0.1:8000/widgets/. To lanuch the admin site to add the widgets, I entered the following url: http://127.0.0.1:8000/admin/.

Conclusion

Implementing Kendo UI was easy to do in an application using the Django framework. I also had a lot of fun learning about Django and Python as well as Linux. Next, I plan on implementing the Kendo UI Splitter and TreeView into the application and learn more about working Django!

ASP.NET Wiki

This website is no longer actively supported

Page Tags

This website is no longer actively supported

Overview

Creating the DjangoKendoSample Project

Creating the Model

Creating the View

Creating the Template

URLconf for the widgets package

Run the Application

Conclusion

References

Discussion Closed

Other interesting sites

RPC機構

神域

Mecha Documents

The Windrooms风室