ListView

How to fix ButtonGroup at the top in KendoUI Mobile View

Posted by

3

Learn more about Kendo UI here

Recently, I was working on one of the requirement in which I had following widgets in same mobile view.

  1. Kendo UI Mobile ListView
  2. Kendo UI Mobile ButtonGroup

I had to fix position of ButtonGroup always on the top. To explain it more let us suppose there are a ListView and ButtonGroup as given in below image,

image

I have created above view with following code


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>

 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

Only problem in above implementation is that, ButtonGroup is not fixed and when you scroll ListView it will scroll with ListView.

Fixing this or rather achieving this is quite simpler, what all you need to do is to put ButtonGroup inside a header. Essentially you need to do following,

image

Now I have modified implementation as below to achieve ButtonGroup at fixed position


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <div data-role="header">
 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>
 </div>
 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

On running application ButtonGroup is fixed at the top.

clip_image002

I hope you find this post useful. Thanks for reading.

Three steps of working with JavaScript Array and Kendo UI Mobile ListView

Posted by

1

In this post we will learn working with JavaScript array and KendoUI Mobile ListView in three simple steps.

Step 1: Create Data Source

Very first you need to create data source. Application can read data from various sources. Some of the source can be as following

  • Reading data from remote data source
  • Reading data from local memory
  • Reading static data from local array.

Let us create a data source by reading data from local array.


var speakers = [
{

SpeakerName: "Chris Sells",
SpeakerTitle: "Author, Ex- Microsoft and ardent community contributor",
SpeakerPhoto: "speakerimages/cs.jpg"

},
{

SpeakerName: "Steve Smith",
SpeakerTitle: "Speaker, Author, Microsoft Regional Director and MVP",
SpeakerPhoto: "speakerimages/ss.JPG"

},
{

SpeakerName: "Dr.Michelle Smith",
SpeakerTitle: "Enterprise Consultant",
SpeakerPhoto: "speakerimages/ms.jpg"

},
{

SpeakerName: "Gaurav Mantri",
SpeakerTitle: "Founder Cerebrata & Windows Azure MVP",
SpeakerPhoto: "speakerimages/gm.JPG"

}

];

Step 2: Create Template

Template is the way to tell the platform the way you want to display data. You already have data and next you need to decide the way you want to display or render data. In Kendo UI Mobile you can create template as following,


<script type= "text/x-kendo-template" id="speakersTemplate">
<div>
<img src=#=SpeakerPhoto# alt="#= SpeakerName #" />
#= SpeakerName #</br>
<span>
#=SpeakerTitle#
</span>
</div>
</script>

To create Kendo Template, You need to create a script with type text/x-kendo-template. Values from data source will be rendered by putting property name as following

image

In above case source of an image can be set as following. SpeakerPhoto and SpeakerName are properties of data array.

image

To make data rendering more immersive you need to set the style of data in CSS. You will notice in above template that we are setting class attribute of img and span tag. These classes are defines in CSS as following,


.pullImage {
width: 64px;
height: 64px;
border-radius: 3px;
float: left;
margin-right: 10px;
}

.listTime
{
font-size: .8em;
font-weight: 100;
}

Step 3: Create ListView

By step 2 you have created data source and template. Next you need to create ListView. Creating ListView is very simple and can be created as following,


<div data-role="view" id="dataview" data-title="Data">

<div>
<ul id="speakerslist"
data-template="speakersTemplate"
data-source="speakers"
data-endlessScroll="true"
data-role="listview"
data-style="inset">
</ul>
</div>

</div>

To create ListView you need to set data-role attribute of <ul> element as listview. To define how data should be displayed in the ListView set data-template attribute and data source can defined by setting data-source attribute.

Note: if we have put speaker’s photos locally in spakerimages folder. Since we are setting speaker photo attribute in Speaker JavaScript array.

Running the Application

On running of the application you should get ListView with speaker’s details as following

image

In this way you can work with data from JavaScript array and Kendo UI mobile ListView. I hope you find this post useful. Thanks for reading.

How to fetch data of selected item in KendoUI Mobile ListView

Posted by

1

In this post we will take a look on how to read data value of selected item in KendoUI Mobile ListView. Let us say you have a ListView as given in following image,

image

As you see that there is button in each ListView item and on click of the button you need to fetch the selected phone number to make a call.

Above ListView can be created as following,


<div data-role="view" id="policestationview">

<ul data-role="listview"
id="policestationlistview"
data-style="inset"
selectable="true"
data-source="somedata"
data-template="sometemplate"
data-click="somefunction">
</ul>

</div>

In above view

  • Data source is set to somedata
  • Data Template is set to sometemplate
  • Most importantly data-click is set to a JavaScript function

Now in function you can fetch selected item on click event of ListView as following,

image

In above code snippet phonenumber and name is properties of the array set as the data source of the listview. For your reference datasource is as following. You can see that name and phonenumber are properties of the array used to create datasource.


var dataarray = [

{ name: "Darya Ganj", phonenumber: " 01123274683", group: "CENTRAL" },
{ name: "Kamla Mkt", phonenumber: "01123233743", group: "CENTRAL" },
{ name: "I.P. Estate", phonenumber: "01123318474", group: "WEST" }

];

var somedatasource = new kendo.data.DataSource.create(
{
data: dataarray,
group: "group"
});

</script>

In this way you can fetch data of slecetd itm of KendoUI Mobile ListView. I hope you find this post useful. Thanks for reading.

Consuming JSON based WCF REST Service in Kendo UI Mobile

Posted by

25

In this post we will walkthrough on consuming WCF REST Service in Kendo UI Mobile. We may consider this post is divided in two parts. In part 1, we will see the way to create REST based WCF service and in part2 of this post we will consume that REST Service in Kendo UI mobile.

image

Creating WCF REST Service

If you are new to WCF and wondering how to create WCF REST Service .Please read many articles on WCF REST Service here .

To get it started quickly fire visual studio and create a new project. From WCF tab select WCF Service Application project template.

image

Delete all the codes generated from both the IService1.cs and Service1.svc.cs file.

Although in this post we are not going to fetch and data from database. We will return C sharp collection as data from WCF REST Service. However we can use any methodologies to create data model and expose data from data model as service. To make it simple we are going to work with following business object.


public class Bloggers
{
[DataMember]
public string BloggerID { get; set; }
[DataMember]
public string Name { get; set; }
[DataMember]
public string Technology { get; set; }

}

Define service as following


[ServiceContract]
 public interface IService1
 {

[OperationContract]
 [WebGet(UriTemplate = "/GetBloggers",
 ResponseFormat = WebMessageFormat.Json,
 RequestFormat = WebMessageFormat.Json)]
 List<Bloggers> GetBloggers();

 }

If you notice we have explicitly set the Request and Response message format as Json. Service is implemented as following. There is not much fancy about the service implementation, it is simply creating collection of business object and returning. 


using System.Collections.Generic;

namespace RESTServiceForKendo
{

 public class Service1 : IService1
 {

public List<Bloggers> GetBloggers()
 {
 List<Bloggers> lstBloggers = new List<Bloggers>()
 {
 new Bloggers { BloggerID = "1", Name= "Jesse Liberty ", Technology = "XAML"},
 new Bloggers { BloggerID = "2" , Name = "Michael Crump" , Technology = "XAML"},
 new Bloggers { BloggerID = "3" , Name = "Chris Eargel" , Technology = "C Sharp"},
 new Bloggers { BloggerID = "4" , Name = "Chris Sells" , Technology = "All"},
 new Bloggers { BloggerID = "5" , Name = "John Bristowe" , Technology = "Web"},
 new Bloggers { BloggerID = "6" , Name = "Todd Anglin " , Technology = "KendoUI"},
 new Bloggers { BloggerID = "7", Name= "John Papa ", Technology = "XAML"},
 new Bloggers { BloggerID = "8" , Name = "Glen Block" , Technology = "REST"},
 new Bloggers { BloggerID = "9" , Name = "Lohith " , Technology = "Telerik"},
 new Bloggers { BloggerID = "10" , Name = "Scott Hanselman " , Technology = "All"},
 new Bloggers { BloggerID = "11" , Name = "Debugmode" , Technology = "Kendo"},
 new Bloggers { BloggerID = "12" , Name = "Pinal Dave " , Technology = "SQL Server"},
 new Bloggers { BloggerID = "12" , Name = "Julie Lerman" , Technology = "Entity Framework"}

 };
 return lstBloggers;
 }
 }
}

Next we need to configure Endpoint. Rather than creating Endpoint we are going to use factory class. Class System.ServiceModel.Activation.WebServiceHostFactory enables REST Endpoint on WCF Service. To set factory class right click on Service1.svc and click on view markup. In markup add factory class as following.

image

After configuring factory class we are all set with WCF REST Service. To test the service, run the service in browser. We should be getting Bloggers information as JSON data in browser.

image

Once you get data in browser (if you are using IE then you will be prompted to save returned data), we are all set to consume this data in Kendo UI Mobile.

Consuming in Kendo UI Mobile

We will consume JSON data from WCF REST service step. If you are using Visual Studio for Kendo UI development then you may find below post useful

Setting Development Environment in Visual Studio 2010 using NuGet for KendoUI

To proceed with follow the following steps

Step 1

Very first add the required references to work with Kendo UI Mobile. You need to add reference in head section of the page. 

<head>
 <title></title>
 <meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

After adding references we need to initialize the mobile. To do this adds below script just before the closing body tag.


<script>
 var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
 </script>
</body>

You can see that layout and transition has been set. We will create layout in next step.

Step 2

After adding reference we need to create layout of the application. In layout we want two buttons in bottom tabstrip and a back button on the top. Layout can be created as following 


&nbsp;
<div data-role="layout" data-id="pageLayOut">
 <header data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">Back</a>
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">

<a href="#homeView" data-icon="home">Home</a>
 <a href="#bloggerView" data-icon="action">Bloggers</a>

</div>
 </div>
 </div>

Step 3

Next we need to create different views. As you notice from layout that we need to create two views. One is homeView and other bloggerView. In homeView we will display a message.

homeView is as following 


<div data-role="view" id="homeView" id="homeView" data-title="Bloggers">

<h1>Welcome!</h1>
 <p>
 In this App we will fetch Bloggers information from WCF REST Service
 </p>
 </div>

Step 4

Now we need to create bloggerView. In this view we will put a Kendo UI Mobile ListView control. All the data returned from service will be bind to this ListView.

<div data-role="view" id="bloggerView" data-title="Bloggers" data-show="showBloggers">

 <ul id="bloggerList"
 data-source="bloggersData"
 data-endlessScroll="true"
 data-template="bloggersTemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

There are couples of important points worth discussing about above code. In above listview we are setting data-source and data-template as following

clip_image001

So we need to

  • Create data-source bloggersData from the returned JSON data from the WCF REST Service (step5)
  • Create data-template bloggersTemplate (step4)

Step 4

Data Template allows us to render data as we want. It is used to format the displaying of data. A template can be created as following. We are creating a Kendo UI list view link button and displaying Name and Technology of the blogger. Id of this template is set as data-template property of list bloggerList. 

<script id="bloggersTemplate" type="text/x-kendo-template">

 <a href="\#BloggerDetailsView" class="km-listview-link" data-role="listview-link">
 <h2>#=data.Name#</h2>
 <h4>#=data.Technology#</h4>
 </a>

 </script>

Step 5

Now we need to create datasource. We are going to create Kendo UI DataSource reading JSON data from the service.

clip_image002

In Kendo UI DataSource configuration, read attribute has been set to the URL of the WCF REST Service. Since service is retuning JSON data hence Accept type is as application/json.

Finally in data-show method of view we will fetch data from the DataSource. If you notice data-show attribute of bloggerView is set to showBloggers.

clip_image003

Putting all the discussion together DataSource can be created and data from that can be fetched as shown in below code

 var bloggersData;

bloggersData = new kendo.data.DataSource(
 {
 transport: {
 read: {
 url: "http://localhost:56863/Service1.svc/getBloggers",

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

});

function showBloggers(e) {
 bloggersData.fetch();

Now we are all set to run the application. On running we should be getting Bloggers data as following

Home View

clip_image001[6]

Blogger View

clip_image002

In this way you can consumed a JSON based WCF REST Service in Kendo UI mobile. I hope you find this post useful. Thanks for reading.