Questions on Kendo UI for jQuery Forum

1 answer

126 views

I am trying to create Kendo Menu like "Stores" menu in "Basic Usage" example (http://demos.kendoui.com/web/menu/index.html).

A little modification I have inside my "Stores" menu is a Kendo TabStrip.
Kendo TabStrip works great if it stands alone. But when put inside of a Kendo Menu, the styling mess up and the tab is not aligned horizontally anymore.

Is there an easy way to get around this?

Thanks!

TabStrip

answered on 09 Aug 2012

2 answers

246 views

"kendo.web.min.js" and "kendo.dataviz.min.js" can not be used in the same page?

i want to use dataviz and web controls in the same page,so i add
<script src="kendo.web.min.js"></script>
<script src="kendo.dataviz.min.js"></script>

in my html page.

when i creating kendogrid with datasource such as

var dataSource = new kendo.data.DataSource({
             transport: {
                 read: {
                     url: "getOperatorsByOrg.do?format=json&orgid=2",
                     dataType: "json"
                 }
             },
             batch: true,
             pageSize: 30,
             schema: {
             model: {
                   fields: {
                    userid: { editable: false, nullable: true },
                    operatorname: { editable: false },
                    password: { editable: false }
                   }
                 }
             }
         });

      $("#"+divname).kendoGrid({
          dataSource: dataSource,
          pageable: true,
          height: 300,
          toolbar: ["create"],
          columns: [
                 { field:"userid",title:"userid" },
                 { field: "operatorname",title:"operatorname", width: "150px" },
                 { field: "password", title:"password", width: "150px" }]
      });

a javascript error is showed:

message: 'undefined' is null or is not an object
row: 8
char: 45249
code: 0
URI: http://localhost:8080/reportproject/views/js/kendo/kendo.web.min.js

and the data in grid can't be showed

when i delete the "<script src="kendo.dataviz.min.js"></script>"
the data can be showed very good

how i can do?

Grid

answered on 09 Aug 2012

3 answers

194 views

Resizing a window when opening it again?

Hi,

I'm reopening a window with new content, but I can't figure out how to change the dimensions of it.

How do I accomplish this?

Window

answered on 09 Aug 2012

1 answer

515 views

Changing k-callout arrow and margin of validation messages?

Hey,

Is there an easy way to change the direction of the k-callout-n arrow on the validation message, or to remove it entirely?

Any help would be greatly appreciated!

Validation

answered on 09 Aug 2012

1 answer

85 views

html5, phone gap display

I have a basic example like the tap strip demo [ http://demos.kendoui.com/mobile/tabstrip/index.html ]

When I run it in eclipse with the simulator, it moves the tap strips to the top and content does not fit within the phone display.
There is about a 3-4 pixel white area around the application and has both a horizontal and vertical scrolling.

Thanks for any advice...

General Discussions

answered on 09 Aug 2012

1 answer

160 views

Problem with internal views render

Hi,

I'm facing a problem with the render of my internal views background, in a PhoneGap iOS application using Kendo. Here is a code demo of my problem:

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta charset="utf-8" />

<script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

<div data-role="view" id="loginView" data-title="Login">

<div id="form" >

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<label for="txtLogin">Login</label><br/>

<input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>

</li>

<li>

<a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>

</li>

</ul>

</div>

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

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title" data-bind="text: userName"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<span data-bind="text: userName"></span>

</li>

<li>

<span>Displayed?</span>

</li>

</ul>

</div>

<script>

var app = new kendo.mobile.Application($(document).body, {

transition: 'slide'

});

var viewModel = kendo.observable({

userName: null

});

$("#btnSubmit").click(function() {

viewModel.userName = $("#txtLogin").val();

app.navigate("#otherView");

kendo.bind($("#otherView"), viewModel);

});

</script>

</body>

</html>

In the "loginView", the view's background & control are correctly displayed.
But when you navigate to the view "otherView" (by entering a text in the textbox and clicking on the Submit button), the controls aren't visible...
And when I remove the <ul> & <li> tags from this second view, I lose the "iOS-like" background of the view naturally but the controls are visible, like in this second test:

<!DOCTYPE html>

<html>

<head>

<title>Test2</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta charset="utf-8" />

<script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

<div data-role="view" id="loginView" data-title="Login">

<div id="form" >

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<label for="txtLogin">Login</label><br/>

<input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>

</li>

<li>

<a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>

</li>

</ul>

</div>

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

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title" data-bind="text: userName"></span>

</div>

</header>

<span data-bind="text: userName"></span>

<span>Displayed?</span>

</div>

<script>

var app = new kendo.mobile.Application($(document).body, {

transition: 'slide'

});

var viewModel = kendo.observable({

userName: null

});

$("#btnSubmit").click(function() {

viewModel.userName = $("#txtLogin").val();

app.navigate("#otherView");

kendo.bind($("#otherView"), viewModel);

});

</script>

</body>

</html>

Does anyone know the reason of this problem please?

UPDATE: when I remove all things around the view-model binding in the code, there is no more problem, like with this test code:

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta charset="utf-8" />

<script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

<div data-role="view" id="otherView" data-title="other">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<span>Displayed?</span>

</li>

<li><a data-role="button" id="btnSubmit2" data-icon="globe">Connect</a></li>

</ul>

</div>

<div data-role="view" id="loginView" data-title="Login">

<div id="form" >

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<label for="txtLogin">Login</label><br/>

<input id="txtLogin" name="txtLogin" maxlength="20" type="text"/>

</li>

<li>

<a data-role="button" id="btnSubmit" data-icon="globe">Connect</a>

</li>

</ul>

</div>

<script>

var app = new kendo.mobile.Application($(document).body, {

transition: 'slide'

});

$("#btnSubmit").click(function() {

app.navigate("#otherView");

});

$("#btnSubmit2").click(function() {

app.navigate("#loginView");

});

</script>

</body>

</html>

It seems that view-model binding with content controls (the "kendo.bind(...)" instructions) breaks the content render of data-role="listview" data-style="inset" blocks :(

Application

answered on 09 Aug 2012

4 answers

253 views

What is the best way to expand a panel bar based on the header text

Hi All,
I have a panel bar that's populated with cities as the headers and different locations as the child elements (from JSON). What I want to do is expand the last selected header based off of the city name once the panel bar is repopulated with new data. I'm able to capture the last selected header and parse the city name from it however I cannot figure out how to use it to find the header I need and re-expand it. I hope this makes sense to someone.

Thanks,
Casey

PanelBar

answered on 09 Aug 2012

0 answers

126 views

Trigger the loading of Grid Data

Hi, i have the following MVVM bound grid:

<div id="grid" data-role="grid"

data-bind="source: contacts_Listing_ViewModel.grid_Datasource, visible: isListingVisible"

data-editable="false"

data-columns='["FirstName","LastName", "DepartmentName"]'

data-pageable="true"

data-autoBind="false"

style="height:100%;width:100%"></div>

How do I stop the datasource from loading data into the grid automatically (I think data-autobind = false did it)?

I want data to only be loaded into the grid when I do: contacts_Listing_ViewModel.grid_Datasource.read

Any ideas?

Thanks

Grid

asked on 08 Aug 2012

3 answers

197 views

How to use Grid with MVVM

I have successfully created a grid using the MVVM pattern. It works great. However, what I'm struggling with is how to use the Grid with a combination of MVVM and the configuration and api methods available from Kendo UI.

For example, I am trying to create a detail row from a master row. The examples don't allow me to do that. Should I be doing something different when coding with this paradigm?

Grid

answered on 08 Aug 2012

2 answers

358 views

Weird Issue on KendoUI MVC w/ DatePicker Value

Hey all,

I hit a confusion point recently when working with KendoUI controls inside of forms.

Lets say I have today's date in my ViewBag (e.g. ViewBag.startDate exists with a valid date).

I've generated this control with the ASP.NET MVC kendo UI:
@Html.Kendo().DatePicker().Name("startDate").Value(@ViewBag.startDate).Format("d")

On the initial form post, this works fine.

Lets say I submit a form, causing a postback that changes the value of "startDate" in my ViewBag (on the server side).
If I print the ViewBag's startDate and then below it, generate my DatePicker control in the same way fashioned above, I get 2 different dates. The printed one is whatever the server side changed it to, and the Kendo control has the first ViewBag.startDate.

As soon as I generate my control like this (e.g. without the "@" in front of ViewBag):
@Html.Kendo().DatePicker().Name("startDate").Value(ViewBag.startDate).Format("d")
everything seems to be fine between form posts.

This confused me for a good long while yesterday. Does anyone know why this is? I'm thinking it's some Razor knowledge that I may be lacking, but I'd think if it worked with or without the "@" on any attempt, it would work on every attempt.

Thanks for any help on why this is!

-Sig

Date/Time Pickers

answered on 08 Aug 2012