How to fix ButtonGroup at the top in KendoUI Mobile View

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.

Advertisements

3 thoughts on “How to fix ButtonGroup at the top in KendoUI Mobile View

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s