Questions on Kendo UI for jQuery Forum

8 answers

119 views

Mobile tabstrips apprear to be broken in 2012.1.515

This release broke my tabstrips completely.

I tried to run the example from the web site using this release and going from tab to tab doesn't display the new tab contests correctly.

As far as I can see tabstrips just aren't working.

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          <ul>
            <li>
              <h2>
                Carine <span>Callahan</span>
              </h2>
            </li>
            <li>
              Weekly average sales <span class="sales-up">$ 8,250</span>
            </li>
            <li>
              Monthly average sales <span class="sales-up">$ 32,000</span>
            </li>
          </ul>
        </li>
        <li>
          Languages
          <ul>
            <li>
              English <span class="value">Native</span>
            </li>
            <li>
              Hungarian <span class="value">Advanced</span>
            </li>
            <li>
              French <span class="value">Advanced</span>
            </li>
            <li>
              Chinese <span class="value">Beginner</span>
            </li>
          </ul>
        </li>
        <li>
          Sales commodity
          <ul>
            <li>Beverages</li>
            <li>Condiments</li>
            <li>Confections</li>
            <li>Diary Products</li>
            <li>Grains/Cereals</li>
            <li>Meat/Poultry</li>
            <li>Produce</li>
            <li>Seafood</li>
          </ul>
        </li>
        <li>
          PC Skills
          <ul>
            <li>MS Word</li>
            <li>MS Excel</li>
            <li>MS Outlook</li>
            <li>MS PowerPoint</li>
            <li>MS Project</li>
            <li>Windows (XP, Vista)</li>
            <li>Internet</li>
            <li>SAP - Sales and Marketing Module</li>
            <li>MS Visual Studio</li>
            <li>Adobe Acrobat</li>
            <li>CorelDraw</li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Sales 2011
          <ul>
            <li>
              January <span class="sales-up">↑ $ 35,000</span>
            </li>
            <li>
              February <span class="sales-down">↓ $ 25,000</span>
            </li>
            <li>
              March <span class="sales-down">↓ $ 23,000</span>
            </li>
            <li>
              April <span class="sales-up">↑ $ 30,000</span>
            </li>
            <li>
              May <span class="sales-up">↑ $ 31,000</span>
            </li>
            <li>
              June <span class="sales-down">↓ $ 29,000</span>
            </li>
            <li>
              July <span class="sales-up">↑ $ 35,000</span>
            </li>
            <li>
              August <span class="sales-up">↑ $ 37,000</span>
            </li>
            <li>
              September <span class="sales-hold">→ $ 37,000</span>
            </li>
            <li>
              October <span class="sales-hold">→ $ 37,000</span>
            </li>
            <li>
              November <span class="sales-up">↑ $ 38,000</span>
            </li>
            <li>
              December <span class="sales-up">↑ $ 40,000</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Sales Representatives
          <ul>
            <li data-icon="toprated">1. Andrew Fuller</li>
            <li data-icon="toprated">2. Janet Leverling</li>
            <li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>
            <li data-icon="toprated">4. Margaret Johnson</li>
            <li data-icon="toprated">5. Steve Collins</li>
            <li data-icon="toprated">6. Maria Steward</li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
      <ul data-role="listview" data-style="inset" data-type="group">
        <li>
          Carine Callahan
          <ul>
            <li>
              Notify when online
              <input type="checkbox" data-role="switch" checked>
            </li>
            <li>
              Administrator
              <input type="checkbox" data-role="switch">
            </li>
            <li>
              Access to stats
              <input type="checkbox" data-role="switch" checked>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div data-role="layout" data-id="mobile-tabstrip">
      <header data-role="header">
        <div data-role="navbar">
          
          <span data-role="view-title"></span>
          <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
      </header>

      <p>TabStrip</p>

      <div data-role="footer">
        <div data-role="tabstrip">
          <a href="#tabstrip-profile" data-icon="contacts">Profile</a>
          <a href="#tabstrip-sales" data-icon="history">Sales</a>
          <a href="#tabstrip-rating" data-icon="favorites">Rating</a>
          <a href="#tabstrip-settings" data-icon="settings">Settings</a>
        </div>
      </div>
    </div>

<style scoped>
    #tabstrip-profile h2
    {
      display: inline-block;
      font-size: 1.1em;
      margin: 1.5em 0 0 1em;
    }
    #tabstrip-profile h2 span
    {
      display: block;
      clear: both;
      font-size: 2em;
      margin: .2em 0 0 0;
    }
    #tabstrip-profile img
    {
      width: 5em;
      height: 5em;
      float: left;
      margin: 1em;
      -webkit-box-shadow: 0 1px 3px #333;
      box-shadow: 0 1px 3px #333;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }
    .sales-down,
    .sales-hold,
    .sales-up,
    .value
    {
      float: right;
    }
    .sales-up { color: green; }
    .sales-down { color: red; }
    .sales-hold { color: blue; }
    .value { color: #bbb; }
</style>

<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

TabStrip (Mobile)

answered on 28 May 2012

3 answers

399 views

How can I change a property of the slider after it has been initialized?

I need to update the smallStep property based on user actions.

I tried:

var slider = $("#sliderHours").data("kendoSlider");

slider.smallStep = "1";

but it had no impact. The first line did access the slider, but 'slider.smallStep' is undefined. I tried to re-initialize the slider but that also had no impact.

Slider

answered on 28 May 2012

1 answer

71 views

Access to the thumb selector through JQuery...

Hi,
I'm trying to hide the thumb selector in code, and I can obviously find it using

$('.k-draghandle').hide();

but what is a 'correct' way of doing so if I want to ensure only the specified one is hidden?

For example:

$('#slider .k-draghandle').hide();

doesn't work.

Am I missing something obvious? Do I have to add my own <div id='whatever'> around the slider?

Cheers,
Jason

Slider

answered on 28 May 2012

1 answer

291 views

[Solved] Page with two view models -

Hi,

I have an app that has a menu using MVVM which is created on the layout page (asp.net mvc 3)

The "center" part of my app, is actually a specific UI to get something done, that also uses MVVM.

So my page has 2 view models at the same time, always.

I have noticed that depending on the order in which I do kendo.bind(), it may break the MVVM functionality for events.

The change event of my grid, get's the wrong viewmodel sent as an argument.

This is the actual error :

Uncaught TypeError: undefined is not a function kendo.web.js:7038
1. binders.widget.events.Binder.extend.refresh.handlers.(anonymous function)kendo.web.js:7038
2. Class.extend.triggerkendo.web.js:156
3. Widget.extend._selectable.that.selectable.kendo.ui.Selectable.changekendo.web.js:18322
4. Class.extend.triggerkendo.web.js:156
5. Widget.extend.valuekendo.web.js:10465
6. Widget.extend._upkendo.web.js:10448
7. e.extend.proxy.gjquery-1.7.2.min.js:2
8. f.event.dispatchjquery-1.7.2.min.js:3
9. f.event.add.h.handle.ijquery-1.7.2.min.js:3

I have also created a JsFiddle that shows the exact same error.

Is this an actual error, or am I doing something really wrong ?

Thanks,

Alvaro Oliveira.

MVVM

answered on 28 May 2012

1 answer

205 views

listview scrolling question

I'm trying to design a view with a full screen google map and a scrolling listview pinned to the right side. Items in the listview would correspond to locations on the map.

I can't seem to accomplish this without the map scrolling in tandem with the listview.

1. is it possible to have multiple elements inside a view that scroll independently?
2. is it possible to have more than one view on the screen at the same time?

Thank you!
-Adam

ListView (Mobile)

answered on 28 May 2012

10 answers

287 views

[Solved] invalid label "d" : {

I'm trying to bind the KendoDS to a simple oData method

[WebInvoke(Method = "GET")]

[WebGet]

public string HelloGET() {

return "Hi THere from GET";

}

var helloDS = new kendo.data.DataSource({

transport: {

read: {

// the remote service URL

type: "GET",

url: oDataBasePath + "/USDA.svc/HelloGET?$format=json",

dataType: "jsonp",

contentType: "application/json; charset=utf-8",

}

},

change: function () {

alert("Change");

},

error: function(){

alert("error");

}

});

helloDS.fetch();

So I see the GET works, I get my JSON back

{

"d" : {

"Hello": "Hi THere"

}

But Firebug throws the error:

invalid label

"d" : {

This is the callback from Firebug

http:

//odata.gourmetsleuth.com/USDA.svc/HelloGET?$format=json&callback=jQuery17106241045930093632_1323571371269&_=1323573597895

So I'm getting my callback method

What am I doing wrong here? Shouldn't the odata method be returning that callback ID in the result?

Data Source

answered on 28 May 2012

3 answers

429 views

Row selection across pages

Hi,

I have a kendo grid, where i have enabled multiple row selection. Right now, i can select rows by using shift key and clicking on the rows in a page. But, when i move to other page, rows that were selected in last page does not remain selected. I want them to remain selected and also, that the user should be able to select new rows across the pages. Is it possible?

Regards,
Khushali

Grid

answered on 28 May 2012

0 answers

144 views

Problem with Grid Hierarchy

I am using kendo grid and populating hierarchical data. On grid load the first row is already expanded. Is it possible that if i open 1 row other collapse automatically? Basically I want only one row to expand at a single instance. Normally in Grid we can expand multiple row at a time.

Grid

asked on 28 May 2012

1 answer

116 views

show scrool in main view

should not appear a horizontal scrool but i see and use horizontal scrool why use scrool?

I have written the code below

<div id="main" data-role="view" >
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span> <a data-align="right"
data-role="button" class="nav-button" href="#"
onclick="closeApp();">Close</a>
</div>
</header>
<div class="ustBaslik">
ESS
</div>
<div class="link">
<a href="#frmFotolar">
<img src="images/fotolar.png"/>
<div>Photo</div>
</a>
</div>
<div class="link">
<a href="#frmMail">
<img src="images/eposta.png"/>
<div>EMail</div>
</a>
</div>
<div class="link">
<a href="#frmTakvim">
<img src="images/takvim.png"/>
<div>Calculater</div>
</a>
</div>
</div>

Application

answered on 28 May 2012

1 answer

138 views

Wrap input tags inside a form tag to see input-specific keyboards

I noticed that the demo, 'mobile form inputs' wasn't showing input type-specific keyboards that I'd expect on my iPad, and went looking for a solution.

The solution is to use a <form> tag.

Now, for instance, my <input type='search' ....> tag renders an input box with an associated search keyboard with a 'Search' button in place of the 'Return' button.

Application

answered on 28 May 2012