How to iterate all the data in Kendo UI Data Source

In this post we will take a look on how could we iterate all the data of Kendo UI Data Source? Let us say we have a JavaScript array as given below,


var speakers = [
 {
 SpeakerName: "Chris Sells",
 SpeakerTitle: "Author, Ex- Microsoft and ardent community contributor"

},
 {

SpeakerName: "Steve Smith",
 SpeakerTitle: "Speaker, Author, Microsoft Regional Director and MVP"

},
 {

SpeakerName: "Dr.Michelle Smith",
 SpeakerTitle: "Enterprise Consultant"

},
 {

SpeakerName: "Gaurav Mantri",
 SpeakerTitle: "Founder Cerebrata & Windows Azure MVP"
 }

];

We will create a Kendo Datasource reading speakers array. Very simply we can create data source as following,


var yourdatasource = new kendo.data.DataSource({

data: speakers
 });

Now we will see how we could iterate each data of data source. We can do that by calling data() function on Kendo UI Data source. data() function is used to get and set data of the Kendo data source.

image

So we can read data from data source as following. We are alerting length of data source below.


var datasourcedata = yourdatasource.data()
alert(datasourcedata.length);

Finally we can iterate through data source as following,

yourdatasource.fetch();
 var datasourcedata = yourdatasource.data()

 for (var i = 0; i < datasourcedata.length; i++) {
 var dataitem = datasourcedata[i].SpeakerName;
 alert(dataitem);
 }

As output in alert we will get entire speakername. In this way you can iterate through data of Kendo datasource. I hope you find this post useful. Thanks for reading.

Download Slides and Source Code of Webinar Create Hybrid Mobile Application in 1 hour

Download Presentation and Source Code from here

Read more about Icenium here

Read more about Kendo UI here

View recorded webinar below:

Thank you so much for attending the webinar on Create Hybrid Mobile Application in 1 hour . I had great time presenting and interacting with each one of you. I hope webinar was useful and worth your time.

In the webinar we covered:

  • What is a Hybrid Mobile Application?
  • How it is different from Native Applications?
  • Working with Icenium
  • Understanding different project templates of Icenium
  • Understating the project structure of an Icenium project
  • Working with Application Layout
  • Working with Views
  • Working with Kendo DataSource
  • Working with Kendo Templates
  • Working with Kendo ListView
  • How to insert records in a database from a Hybrid Application
  • Working with OData in a Hybrid Application

If after attending the webinar you are still excited for Hybrid Application development, then Download Icenium from here – it is completely free till May. You can learn more about Kendo UI here

Download Presentation and Source Code from here

Question and Answers from Webinar

How will we connect our local development database to build these apps using Icenium

Icenium is cloud based IDE and it cannot directly connect to SQL Server or any other database. You have three options

  1. Create a service layer over database and work with service in Icenium
  2. Expose data as OData and can work with OData in Icenium.
  3. Icenium allows you to work with HTML5 storage directly.

Does Icenium support Windows Phone?

As of now Icenium does not support Windows Phone. But it is in Roadmap. Read more here

Does Icenium support Enterprise Application Development?

Icenium only allows you to create Cross Platform device applications at this time.

What other datasource can be used other than SQL?

In Hybrid Applications you can use any database. However, you will have to expose operations on database as service. Essentially, you will be consuming Services in the Hybrid Application.

Can we use jQuery mobile instead of Kendo UI Mobile in Icenium?

Yes, you can use jQuery Mobile instead of Kendo UI Mobile in Icenium. To work with jQuery Mobile choose the second project template while creating a new project in Icenium.

Can you show a Login Screen implementation in Icenium ?

You can implement it in the same way you implement Login in any HTML5 based web application. You have two options to authenticate a user:

  • Call a authentication service
  • You can authenticate user from data stored from local storage as well.

Can we use ASP.NET WEB API in a Hybrid Application?

Yes you can use Web Api in the same way you consume a WCF REST Service.

How does Icenium Cost?

Until 1st May Icenium is completely free. Find more pricing details here

What is role of PhoneGap Here?

Icenium uses Phonegap (aka Apache Cordova) to build and package applications for various platforms.

Can we use SharePoint as Datasource ?

In SharePoint 2010 and onwards you get OData feed of SharePoint lists. You can use them to create Kendo Data source.

Can we work collaboratively on Icenium?

Yes, you can. You can invite collaborators by right -clicking on project and choosing the option for Version Control.

Can we directly deploy on device?

Yes, you can directly deploy on multiple devices.

Can we use Camera in Icenium ?

Yes, you can access camera on Icenium using Phonegap API to access Camera.

Once again, I thank you for attending the webinar. If you have any question feel free to reach me at Dhananjay.kumar@telerik.com . For update follow @icenium and @kendoui on twitter.

How to Activate Test Studio Installation

In this post we will take a look on Activation process of Test Studio. After successful installation of Test Studio, you will be prompted to activate the installation.

clip_image002

Either you can activate the purchase license or activate as trial. To activate the purchase license select first option and click on Next to proceed further.

clip_image004

Again you have two options to activate. Either you can activate online which is recommended or offline using license key. You can find license key for Test Studio under Manage Product section of your Telerik Account. To activate online select online option and click on Next to proceed further.

clip_image006

Here you need to provide your Telerik credential. After providing Telerik Credential click on Activate to activate Test Studio.

clip_image008

After successful activation you will get above message. If you are running Test Studio as trial then you can activate it later as well. To activate it later launch Test Studio and click on the Help menu. In Help menu select View from About tab.

clip_image010

If you Test Studio installation is already activated then you will get license information as following image.

clip_image011

If you are running trial version then you will get an option to activate license.

clip_image012

In this way you can activate Test Studio. I hope you find this post useful. Thanks for reading.

From where to download Test Studio Run Time

In this post we will take a look on downloading Test Studio Run Time. To download browse to http://www.telerik.com/ . After successful login click on the Product Families and from bottom select Your Account.

clip_image002

Now choose Manage Products and select Test Studio.

clip_image004

Next click on the Download Installer and other resources

clip_image006

You will get option to download Test Studio run time as below.

clip_image007

In this way you can download Test Studio Run Time. I hope you find this post useful. Thanks for reading.

Create Hybrid Mobile Application in 1 hour: Join the webinar on 21st February at 3pm IST

Register Here for the Webinar

Telerik India is conducting a webinar on “Hybrid Mobile Application Development “on 21st February 2013 from 3pm to 4 pm IST.

Register Here for the Webinar

image

Would you like to create a mobile application that can run on most of the mobile application platforms? From the same codebase?

Gone are the days when one had to write different codes in different languages for different mobile platforms. Now a days developers are more inclined to write Cross Platform Mobile Applications or Hybrid Mobile Application. An application written using web technologies like HTML, JavaScript and deployed on multiple platforms without changing any codebase is known as Hybrid Mobile Application.

Register Here for the Webinar

clip_image002

Webinar details are here,

Title: Hybrid Mobile Application Development

Date: 21st February 2013

Time: 3pm to 4 pm

Presenter: Dhananjay Kumar

Register Here for the Webinar

This session will focus on various development aspects of Hybrid Mobile Application development. Session will follow step by step approach to create Hybrid Mobile Application. This will be a demo oriented session. In Session demo will be on creating Hybrid Applications like Netflix Movie Explorer and Twitter Search using Telerik JavaScript Hybrid Mobile Application development framework Kendo UI Mobile in Icenium . This session will also touch upon various complexities of building and packaging a hybrid application along with their solution.

Come and learn with us of this amazing capability with the skills you already possess. We will go from nothing to a fully functional mobile app ready for the app store in an hour.

Register Here for the Webinar

How to create Data Model of SQL Azure database using Telerik Open Access ORM

In this post we will take a look on creating data model using Open Access ORM from a data base in SQL Azure.

image

To create data model add new item to project and select Telerik Open Access Domain Model from Data tab.

clip_image002

Next select option Populate from database and from drop down choose Microsoft SQL Azure. If you want you can change the model name and then click on the Next.

clip_image004

Telerik Open Access ORM does not provide you to create a connection in case of SQL Azure. You will have to manually copy and paste connection string of SQL Azure database to create Domain Model. You can find connection string of SQL Azure database in Windows Azure portal.

clip_image006

In the quick glance click on the Show Connection strings to see the connection string. Choose ADO.NET connection string. Do not forget to change the password with the real password.

clip_image007

Copy this connection string of ADO.NET and paste it to Set Connection Manually section and click on the Next.

clip_image009

Next you need to choose Schemas, Tables, Views, Stored Procedure to create data model. Let us say we are choosing only one table to create data model. After choosing items click on the next.

clip_image011

Now you can define naming rules of Classes, Fields and Properties if required. Let us leave to default and click on next to proceed further. In last step you can configure Code Generation Settings. Let us leave settings to default and click on Finish to generate data model.

Once Data Model is created you will find *.rlinq file added in the project. Click on *.rlinq file to view the data model.

clip_image012

In this way you can create a data model using Telerik Open Access ORM from a SQL Azure database. I hope you find this post useful. Thanks for reading.

Webinars in India

Telerik India Webcasts (Feb – March 2013)

Webinars in India

Since last year, Telerik India has been hosting monthly webinar sessions on various Telerik Technologies. The effort was hugely appreciated and we are pleased to continue the series for the Ninja Developer. Learning and training are continuous activities and with your help we hope to continue making this learning a continuous activity for you.

The webinar schedule for February – March 2013 is as follows (all times are in UTC + 5:30 hrs):

Date Time (IST i.e. UTC + 5:30 hrs) Topic Audience
21st February 3:00 – 4:00 PM Create Hybrid Mobile Application in 1 hour Developers
26th   February 11:00 AM – 12:00 PM Redux: Evolving your Mobile Strategy with Content Management System Project Managers and Developers
28th   February 3:00 – 4:00 PM ASP.NET MVC: Better User Experience with Kendo UI Developers
7th March 3:00 – 4:00 PM Developing Applications for Nokia Lumia using Telerik Controls Developers
11-Mar 11:00 AM – 11:45 AM Redux: Enhance Your WinForms LOB Applications with PDF Viewer, PivotGrid and Reporting Developers
11-Mar 3:00 – 4:00 PM Redux: Impress Your End-Users with New Visualizations in Telerik Reporting. Manage Large Data Models with OpenAccess. Developers
12-Mar 11:00 AM – 12:00 PM Redux: Get the Most Out of AJAX Web Development with PivotGrid, Grid Model Binding Support and Integration with SharePoint 2013 Developers
12-Mar 3:00 – 3:45 PM Redux: Skip the JavaScript!   Build Awesome HTML5 Apps with Kendo UI’s MVC Server Wrappers Developers
13-Mar 11:00 AM – 12:00 PM Redux: Dramatically Improve Your Next XAML Enterprise Application with PivotGrid, Spreadsheet and Telerik Reporting Developers
13-Mar 3:00 – 3:45 PM Redux: Tying Test Studio   Together With TeamPulse and Telerik Controls Testing Professionals
14-Mar 11:00 AM – 12:00 PM Redux: Amp Up Your Visual Studio Productivity with the New Features in JustCode, JustMock, JustTrace and JustDecompile Developers
14-Mar 3:00 – 4:00 PM Redux: Bring Power, Convenience and Meaningful Display of Data to Windows 8 UI using the All-New Grid, AutoCompleteBox and New Chart Developers
15-Mar 11:00 AM – 12:00 PM Redux: Develop Engaging Consumer and Enterprise Apps with the Most Recent Additions to Windows Phone 8 Controls Developers
21st March 3:00 – 4:00 PM Automated Functional Testing Can be affordable with Test Studio Testing Professionals

If you are intrigued by the mystery of the “Redux” webinars above, read on. The Redux webinars aim to bring the best content from Telerik product teams to India friendly time zones. We would be replaying the content presented earlier at these webinars and have a product team member available to answer any questions that you may have.

This time we have included the intended audience for each webinar to let you choose the most relevant topics for yourself. If you would like to see a webinar on any specific topic, please do let us know by leaving a note in the comments section below.

So, join us in this journey of continuous learning to be the venerable Ninja Developer… HeeYa!

How to get Device information in Icenium

In this post we will take a look on fetching device information in Icenium. Internally Icenium usage PhoneGap to build the application. We will use PhoneGap API to fetch device information. It is always good idea to read device information when device is being ready. Device information can be fetched with reading values of following properties.

image

So in Icenium device information on device ready can be read as given in below code snippet,


document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {

var deviceName = device.name;
var deviceId = device.uuid;
var deviceOs = device.platform;
var deviceOsVersion = device.version;

//Use device information as required

console.log("devicename : " + deviceName + " deviceId: " + deviceId + " deviceOs: " + deviceOs + " deviceosversion : " + deviceOsVersion);

}

On running application in Graphite simulator you will find device information.

image

In this way device information can be fetched in Icenium. I hope you find this post useful. Thanks for reading.

Inserting Record in Database from Kendo UI DataSource using OData

While creating hybrid mobile application or a web application, we always come across requirement when we need to insert a record or create a record in the database. In this post we will take a look on creating a record from Kendo UI DataSource. Kendo DataSource will make a call to OData Service to insert a record. Essentially structure we are assuming in the post is as given in below diagram,

image

Let us follow step by step approach to perform insertion. Very first let us make variables to holding URLS to create and read data from OData service. In your case these URL values will be as per your service

image

Now we need to create Kendo DataSource. While creating Kendo data source we can configure it for reading and creating records.

To read values in the transport of data source set the value of read property with READ_URL. In below image you will notice that we are setting type of data source as odata because we are interacting with database via OData service. To read data you need to set following attribute of Kendo datasource.

image

We want to configure Kendo datasource for creating record also. For that we need to configure create property of Kendo datasource. In create property is a JSON object and essentially it takes following parameters

  1. url: OData url to created record.
  2. type : to create a record type should be POST
  3. datatype : this should be set to json or xml.
  4. contentType : This attribute is set for the content type

image

For OData version 2.0 contentType should be set to application/json .However in case of OData version 3.0 it should be set to application/json;odata=verbose.

image

After configuring Kendo datasource to create record, we need to set the schema of the kendo datasource. We must set schema of data source to successfully perform create record operation. In the schema, we need to create model defining different fields or columns. We need to provide type of the columns. Other types can be number, date, and string. Make sure you are setting total property of schema with count.

image

After setting all the required properties code to create Kendo data source is as following,


var READ_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var CREATE_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: READ_URL
},
create: {
url: CREATE_URL,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose"

}
},
schema: {
total: "count",
model: {
id: "PersonID",
fields: {
PersonID: {

type: "number"
},
LastName: {
type: "string"
},
FirstName: {
type: "string"
}

}
}
}

});

As of now we have created data source to perform read and create operation. Now to create a record we need to create an item. Item can be created from reading values from the view. After creating item call add function on data source. Last step is to sync data with the server. This can be done by callinf sync function on the datasource.


var item = {
FirstName: $("#txtFirstName").val(),
LastName: $("#txtLastName").val()
}

dataSource.add(item);
dataSource.sync();
console.log("done");

In this way we can create or insert a record in database from Kendo UI data source using OData service. I hope you find this post useful. Thanks for reading.

Kendo DropDownList Wrapper for ASP.NET MVC

Overview:

This is the sixth post in the series on Kendo UI wrappers for ASP.NET MVC. We will look at one more wrapper in this post namely DropDownList. This post is part of a getting started with Kendo UI wrappers for ASP.NET MVC and you can find the index post here.

What is DropDownList Wrapper?

First lets understand what is a DropDownList control. A DropDownList displays a list of values and allows the selection of a single value from the list. Custom values are not allowed i.e. user cannot type in a custom value rather he can only select from the list.

image

The DropDownList Wrapper for ASP.NET MVC is a server side wrapper for Kendo UI DropDownList which is a JavaScript based widget.

Basic Usage:

In order to instantiate a DropDownList wrapper on any webpage, we make use of the DropDownList extension available within the Kendo helpers. Here is the code which will create a DropDownList control:

 
@( Html.Kendo().DropDownList().Name("kdropdownlist") ) 

Here is the output of the above code:

image

The Name is a required setting on the control. Without that setting we will get error, so provide a unique name every time you instantiate the drop down list control.

Data Binding Scenarios:

The data binding options available for drop down list wrapper are Server binding and Ajax binding. We will look at them one by one.

Server Data Binding:

Lets start by creating an action method. We will build a static list of SelectListItem and pass it as the Model to the view. Here is the code to illustrate that:

 
public ActionResult DropDownList() 
{ 
var items = new List() 
{ 
new SelectListItem { Value="1", Text="Beverages" }, 
new SelectListItem { Value="2", Text="Condiments" }, 
new SelectListItem { Value="3", Text="Confectionries" }, 
new SelectListItem { Value="4", Text="Dairy" }
}; 
return View(items); 
} 

Next we will see how we bind the model data to the drop down list wrapper. Here is the Razor view code:

 
@model List<SelectListItem> 
@( 
   Html.Kendo().DropDownList().Name("kdropdownlist") 
               .DataTextField("Text") 
               .DataValueField("Value") 
               .BindTo(Model) 
               .OptionLabel("Select a category") 
) 

As you can see we first let the view know what is the model type it will be working with i.e. the view is now strongly typed. In this case we have a List<SelecteListItem>. Then we use the BindTo() method of the drop down list helper to bind the control with data. We also need to set what is the Text field and Value field to bind too within the model. Now if we run this code, following is result we get:

image

Notice the use of OptionsLabel() method. This lets you add a empty item before any of the data items from the model. So this is like a placeholder or a cue to the user as to what he needs to do.

Ajax Data Binding:

In this section we will see how to bind the drop down list using an Ajax call. First lets create an action method which returns JsonResult instead of ActionResult. The action method will convert the category list which we saw in the server binding as a Json object and return it. Here is the code to illustrate the action method:

 
public JsonResult GetCategories() 
{ 
   var items = new List() 
   { 
      new SelectListItem { Value="1", Text="Beverages" }, 
      new SelectListItem { Value="2", Text="Condiments" }, 
      new SelectListItem { Value="3", Text="Confectionries" }, 
      new SelectListItem { Value="4", Text="Dairy" } 
   }; 
    return Json(items, JsonRequestBehavior.AllowGet); 
} 

We just create the data as we would prepare and then use the Json() method to convert the objects to Json format and return that. Now we will see how to make AJAX call to bind the drop down list with data. Here is the code for the same:

 
@( 
   Html.Kendo().DropDownList() 
               .Name("kdropdownlistajax") 
               .DataTextField("Text") 
               .DataValueField("Value") 
               .DataSource(source => 
               { 
                 source.Read(read => { read.Action("GetCategoriesAjax", "Home"); }); 
               }) 
               .OptionLabel("Select a category") 
) 

Instead of using the BindTo() method, we make use of DataSource() method. Within the datasource method we set the read action i.e. what is the action on a controller which will provide us the Json data. With this setting we are not binding the data at the server side, rather the data is bound on the client side.

You will not find any difference when you run the application. But when you do the network sniffing you will see that the control issues a AJAX call to the action method configured for read purpose. Here is a screen shot of the network activity of the page:

SNAGHTML3df1d34a

So we saw how we can use either the server side data binding or client side data binding through AJAX. Depending on your scenario you can take any of the approaches.

Customizing Item Templates:

In the above sections we saw that the Items of the drop down list were just shown as text. With Kendo DropDownList it is possible to customize item templates. The item templates will be visible when the drop down list is in open state. When it is in collapsed state the drop down list will just show the  text field that is bound to the data object. In our example lets say we have images for each of the category and when the drop down list is open we would like to show image next to each of the category name. We can do that easily my making use of the Template() method. You can provide any HTML template and customize each item appearance. Since the templates are pure HTML, Kendo provides a special syntax to access the properties on the bound data object. The syntax is ${<PropertyName>}. That’s it and you can refer the properties of the data item within your custom templates. Here is the code which illustrates the custom teamplate implementation:

 
@( 
   Html.Kendo().DropDownList() 
               .Name("kdropdownlist") 
               .DataTextField("Text") 
               .DataValueField("Value") 
               .BindTo(Model) 
               .Template("<img alt='' src='" + Url.Content("~/Images/") + "${Text}.gif' width='40' height='40' />" + 
                         "<span style='padding: 10px;'>${Text}</span>") 
) 

The template is self explanatory. We have image tag whose source is set to an image url formed by using the text of the item itself and then we are showing the text as is. This is a simple template, but the power of template allows you to customize the UI to your needs.

Cascading DropDownList:

One of the common scenarios on web is to cascade a dropdownlist based on a value selected in another dropdownlist. For e.g. I want to show categories dropdown and products dropdowb but the products dropdown should not be enabled until user selects a value in category dropdown. Once a category is selected the products dropdown should get enabled and display all products belonging to that category. With Kendo DropDownList this can be achieved very easily. For the purpose of this example, we will created one more action method GetProductsAjax() which accepts a categoryid and will return products based on the category selected from this action. Here is the code for the same:

 
public JsonResult GetProductsAjax(string categoryId) 
{ 
   var items = new List() 
   { 
      new SelectListItem { Value=categoryId + "1", Text="Product 1" + categoryId }, 
      new SelectListItem { Value=categoryId + "2", Text="Product 2" + categoryId }, 
      new SelectListItem { Value=categoryId + "3", Text="Product 3" + categoryId }, 
      new SelectListItem { Value=categoryId + "4", Text="Product 4" + categoryId } 
   }; 
   return Json(items, JsonRequestBehavior.AllowGet); 
} 

I am just building a static list of products for the demo purpose.

next we will see how we can cascade a product dropdownlist based on category dropdownlist. We will place 2 dropdownlist on the screen – one for category and another for product. Here is the view code:

Category DropDownList:

 
@(
   Html.Kendo().DropDownList() 
               .Name("categories") 
               .OptionLabel("Select category...") 
               .DataTextField("Text") 
               .DataValueField("Value") 
               .DataSource(source => 
                          { source.Read(read => { read.Action("GetCategoriesAjax", "Home"); }); }
                          ) 
) 

Products DropDownList:

 
@(
   Html.Kendo().DropDownList() 
               .Name("products") 
               .OptionLabel("Select product...") 
               .DataTextField("Text") 
               .DataValueField("Value") 
               .DataSource(source => 
                          { 
                             source.Read(read => { read.Action("GetProductsAjax", "Home") 
                                   .Data("filterProducts"); 
                          }) 
               .ServerFiltering(true); }) 
               .Enable(false) 
               .AutoBind(false) 
               .CascadeFrom("categories") 
)
<script>
   function filterProducts() 
   {
      return {categoryId: $("#categories").val()};
   }
</script>

Notice couple of things in products drop down list. Firstly, in the data source read, we use a Data() method to pass additional data for the request. In this case, we invoke a javascript function which extracts the value of the selected category and pass it to the request. Then we set a property on the drop down list called AutoBind() which controls if the control should fetch the data on load of the control. In our case since we need to wait till a category is selected, we set auto bind to false. Lastly we set a property called CascadeFrom() and pass the parent drop down list id. This property takes care of keeping the products drop down in sync with the category selected. This will also control the enabling and disabling of product drop down based on whether a value is selected in category drop down or not. Here is the out put of the above code:

image

Handling Events:

DropDownList exposes 4 main events on the client side. You can subscribe to those events and perform your business logic if any. The event exposed are as follows:

  • Select – When a item is selected
  • Change – When the value of the drop down is changed
  • Open – When the drop down list is opened
  • Close – When the drop down list is closed

Here is the code to subscribe to these events:

 
@( 
    Html.Kendo().DropDownList() 
                .Name("kdropdownlist") 
                .DataTextField("Text") 
                .DataValueField("Value") 
                .BindTo(Model) 
                .Events(e => { e.Change("change") .Select("select") .Open("open") .Close("close"); })) 
) 

In the above code we use the Events() method to subscribe to different events. The events like Select, Open, Close, Change receive the names of the JavaScript function and when the event occurs the function will be invoked. Here is the JavaScript functions which log the event as it occurs to a div.


<div class="console"></div>

function open() {
        $(".console").html("<p>event: open</p>");
};

function close() 
{
        $(".console").append("<p>event: close</p>");
};

function change() 
{
        $(".console").append("<p>event: change</p>");
};

function dataBound() 
{
        $(".console").append("<p>event: dataBound</p>");
};

function select(e) 
{
        var dataItem = this.dataItem(e.item.index());
        $(".console").append("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
};

DropDownList API:

So far we have seen how to get the drop down list instantiated on the screen, bind data and react to events. What if we need to access the drop down list control on the client side, at run time. All Kendo controls provide a very rich client side API. Using these api’s we can access a control which is already instantiated on the screen using JavaScript. Here is the code to access a drop down list control from JavaScript:

 
$(document).ready(function()
{ 
   var dropdownlist = $("#kdropdownlist").data("kendoDropDownList") 
}); 

On document ready, we use the jquery selector syntax to grab a element with id kdropdownlist and then use the jquery’s data() method to get the kendo drop down object. After this we can perform many of the operation exposed by the object. The methods supported by the drop down list is as follows:

close() closes the drop down list
dataItem() returns raw data record at the specified index
destroy() prepare for safe removal from DOM
enable(bool) enables/disables drop down list
open() opens the drop down list
refresh re-renders items in the list
search(string) selects item which starts with provided parameter
select(jquery|Number|function) selects item and sets the value & text
setDataSource(datasource) sets datasource and rebinds the drop down list
text(string) gets/sets the text of the drop down
toggle(bool) toggles between open & closed states
value(string) gets/sets the value of the drop down

Summary:

In this post we looked at one more commonly used controls – DropDownList. With the ASP.NET wrappers we saw how easy it is to instantiate a control, perform server side or ajax data binding and then how to work with the client side API. Hope you find this useful. Do give it a try i.e. download Kendo Complete and get started with Kendo Wrappers for ASP.NET MVC.

Revamping Web Applications: Software Architecture

Read part one- Revamping Web Applications Part-1 Overview

Read part two- Revamping Web Applications Part-2 Features

We have talked about the Event Networking web application. To start revamping we need to understand the architecture of the existing web application.The current implementation does not follow any architectural patterns like Separation of Concerns, Single Responsibility, Layered approach etc. No planning was done before building the application. We can say that top down approach was followed to develop the current web application. Top down means that the features were added as and when the developer thought it was required. The current application is like a forest of tangled codes.

The current architecture of the application is shown below. The architecture may look like 3 tier in the beginning but really is a 2 tier due to the absence of the Business Objects.

clip_image002[5]

The layers are defines as follows:

1. Presentation Layer: A user can directly access this layer. It comprises of the ASP.Net Web Forms files i.e. aspx. The look and feel and user interface of the web application is also built here.

2. Business Access Layer: BAL encapsulates the business rules and data validation. All the code behind files which we have in our project along with the WCF Data Service are included in this layer. It comprises of the aspx.cs files.

3. Data Access Layer: DAL is the layer to access external data and interact with it. It executes as per the need of the BAL. This layer is the interface between the user and the real Data. The ORMs here include Entity Framework and Linq to SQL.

4. Data: The last layer represents the physical data with which the application interacts. We use SQL Database here. Both Linq and Entity Framework stores and retrieves the data from SQL.

A distinguishing feature of the application is the presence of the WCF Data Service. The Data Service serves to expose the application data to external clients e.g. mobile devices. The Data Service is a read only service and operates independently of the web application. However, it still uses the same database for its data.

The web application doesn’t have the critical functionality of logging, local storage, monitoring and caching.

Conclusion

In this post we have understood the existing architecture. Next, we will perform a web test and discuss various counters and results of the test.

Read- Revamping Web Applications Part-4 : Performance Test

Step by Step Creating WCF Data Service using Telerik Open Access ORM

In this post we will learn step by step to create WCF Data Service using Telerik Open Access ORM. We will create data model of data from SQL Server and further exposed that as WCF Data Service using Telerik Open Access ORM.

Learn more about Open Access ORM here

We are going to follow step by step approach. To create WCF Data Service follow the steps given below,

Step 1: Create Telerik Web Access Web Application project

After installation of Telerik Open Access ORM you will get Telerik Web Access Web Application project template while creating a new project. Go ahead and create a project selecting Telerik Web Access Web Application project template from Web group

image

Step 2: Create Domain Model

Next you will be prompted to create Domain Model. Open Access ORM allows you to create domain model from any of the following type of database. If required you can create Empty Domain Model as well.

image

Let us go ahead and create data model from Microsoft SQL Server. Choose Microsoft SQL Server from drop down and click on the Next.

Step 3: Setup Database connection

In this step you need to set up Database connection. Either you can provide Connection String manually or can create a New Connection. To create new connection click on Add New Connection. You will get window to add new connection. In this window provide database server name and choose database from the dropdown. To test the connection click on Test Connection and after successful testing click on Ok to add a new connection.

image

Step 4: Setup Database Connection

In this step you need to setup database connection. If you want you can change connection string name. Let us leave it to default and click on the Next.

Step 5: Choose Database Items

In this step you need to choose

  • Schemas
  • Tables
  • Views
  • Stored Procedure to create data model.

Let us say we are choosing only one table to create data model. After choosing items click on the next .

image

 

Step 6: Define Naming Rules

In this step you can define naming rules of Classes, Fields and Properties if required. Let us leave to default and click on next to proceed further

Step 7: Code Generation Settings

In this step you can configure Code Generation Settings. Let us leave settings to default and click on Finish to generate data model.

Once Data Model is created you will find *.rlinq file added in the project. Click on *.rlinq file to view the data model.

image

Step 8: Add Open Access Service

By step 7 you have created data model. Now let us go ahead and add WCF Data Service on the created Data Model. For this right click on the project and select Add Open Acccess Service. You will be prompted with Add Open Access Service Wizard. Before adding Open Access Service make sure that once you have built the project.

You need to choose

  • Context : Select Context from the drop down
  • Project : Use the existing project

image

Click on the Next after selecting Context and Project.

Step 9: Select Service Type

In this step you need to choose type of Service you want to create. Since we want to create WCF Data Service, let us choose that from the option and click on the next.

image

Step 10: Choose Entity to expose a part of the Service

In this step we need to choose entity to expose as part of service. Since there is only one entity choose that and click on the Next

image

In last step you can preview various References being added and changes to config files. Click on Finish to create Service. After WCF Data Service being created you can test that in browser. Run the application and browse to *.svc to test the service in browser.

You should get data of People in browser as below after successful creation of the service.

image

Conclusion

In this post we learnt to create WCF Data Service using Open Access ORM. I hope you find this post useful. Thanks for reading.

How to apply filter in creating Kendo UI Data Source from OData

I was working on an application and there was a requirement in which I had to apply filter while fetching data from the server using ODATA. I had two choice to achieve this

  1. Construct ODATA URL with filter applied
  2. Apply filter in Kendo UI Data Source

In this post we will discuss how we could apply filter while creating Kendo UI DataSource reading OData feed.

We can create data source reading ODATA feed as following. Below we are creating data source reading ODATA feed of Netflix


var movieTitleData;
movieTitleData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
batch: false,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt&$top=10",
dataType: "jsonp",

data: {
Accept: "application/json"
}
}
}

});

On inspecting request URL you will find that URL to fetch data is getting constructed as following. We are fetching top 10 movies title from Netflix

image

Now assume there is a requirement to fetch information of a particular movie with given Id. We can do that by applying filter while creating the KendoUI DataSource. We can apply filter to fetch movie of particular id as given below.

image

While applying filter we need to make sure that serverFiltering is set to true.

image

In Filter,

  1. Id is the column on which filter is being applied
  2. eq is operator to apply filter
  3. value is filter value

Kendo UI data source with filter applied can be created as following.


var moviedetailData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
serverFiltering: true,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt,AverageRating,ReleaseYear,Synopsis",
dataType: "jsonp",

data: {
Accept: "application/json"
}

}
},
filter: { filters: [{ field: "Id", operator: "eq", value: query }] }

});

While creating above KendoUI data source

  1. Data is fetched from Odata feed of Netflix
  2. Filter is applied on Id column of Netflix data source
  3. To apply filter at server side serverFiltering attribute is set to true

On inspecting request URL you will find that URL to fetch selected movie is getting constructed as following. We are fetching a particular movie on given id of the movie.

image

You will find that URL being constructed to fetch Odata feed is containing the filter query. In this way we can apply filter while creating Kendo UI DataSource reading an OData feed. I hope you find this post useful. Thanks for reading.