Questions on Kendo UI for jQuery Forum

1 answer

838 views

How to style the td in only one grid when my page have two grids?

My page have two grids called grid1,grid2,I only want to style the grid1,not grid2.I use the css style in the header like this,but it seems that both grid changed.
.k-grid td {
color:red;
padding: 0px;
   }
I try to write like this,but failed.
.GridTd {
color:red;
padding: 0px;
    }
$("#grid1 td").addClass("GridTd "); //failed,I debug with firebug and find that the td style is used by default style(.k-grid td),not GridTd Style.
$("#grid1 k-grid td").addClass("GridTd ");// faied

.k-grid td {    border-style: solid;    border-width: 0 0 0 1px;    line-height: 1.6em;    overflow: hidden;
padding: 0.4em 0.6em;   text-overflow: ellipsis;    vertical-align: middle;}.
GridTd {  color:red;   padding: 0;}

Grid

answered on 19 Sep 2013

1 answer

80 views

Image in Chart Title

Is it possible to add an image to the chart title?

/Jakob

Charts

answered on 19 Sep 2013

1 answer

284 views

Grid drag and drop selection behavior and touch devices

I'm using the Web kendo grid with the options: pageable, scrollable, filterable and sortable all set to true and selectable set to multiple, row (see below)
I've extended the grid with a checkbox selection column (through some event handling) which all works like a charm and improves the usability for touch devices by allot.

On desktop (mouse input) all works very nice. But on touch devices the instinct of people is to "Swipe to scroll" to browse through the grid. But since selectable is set to multiple, row (which i believes causes this behavior) this is no longer possible. A selection of displayed rows is made during a Swipe causing users to be forced to use the scrollbar (Very bad usability)

Is there a way to keep the multiple row selection option but without drag/swipe selection (through Ctrl/Shift clicks) so "Swipe to scroll" remains possible

grid = new kendo.ui.Grid(

gridContainer,

{

columns: columns,

dataSource: dataSource,

selectable: "multiple, row",

pageable: true,

scrollable: true,

filterable: true,

sortable: true,

change: function () {

// some code regarding selection column

},

dataBound: function() {

// some code regarding selection column

}

);

Grid

answered on 19 Sep 2013

1 answer

190 views

.kendoMobileModalView("open");

I am trying to open a modal dialog using $("#modalview-message").kendoMobileModalView("open"); it works on IE but not on chrome? Why is that happening?

ModalView

answered on 19 Sep 2013

3 answers

514 views

background image on view?

I have the following view:

<div data-role="view" style="background: green;" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">

content goes here

</div>

I've tried various things to get a background color on my view (actually want a background image), without any luck. I can put a div inside the view div and set it's height/width and apply a background to that, but that seems a bit unnecessary. Is there a way I can get a background on the view itself?

General Discussions

answered on 19 Sep 2013

1 answer

53 views

using function for pageSize: behaves unexpected

I am trying to set the pageSize dynamically. If i do:
localStorage.getItem('pageSize') || 10,

i do not have a problem.

But if i do:
pageSize: function () {
return parseInt(localStorage.getItem('pageSize')) || 10;
},

the data-source gets reloaded multiple times and NaN appears on the bottom of the grid - page NaN of 100 instead of 1 of 100

Thanks

Grid

answered on 19 Sep 2013

3 answers

73 views

Cursor gets inserted before Zero with IE, leads to _many_ user errors

When tabbing into a numeric text box, on the webkit browsers when you 'tab' into a numeric text box (with default value of 0), the cursor gets inserted after the 0. Given a table with 3 columns of numeric boxes 3-tab-4-tab-5 yields 3,4,5 as the leading zero just gets dropped. In IE, because the cursor goes after the zero, 3-tab-4-tab-5 yields 30,40,50. I have tried the latest release and stable, and the bug persists.

I know I can select the text when focusing the numeric box using the hack here. But is there a way to make IE behave like the other browsers without selecting the text?

NumericTextBox

answered on 19 Sep 2013

1 answer

173 views

Binding a grid to html table RAZOR syntax

Does anyone know how to bind a kendo grid to a html table using Razor syntax? I have seen

$("#grid").kendoGrid({
height: 430,
sortable: true
});

put nothing for the Razor syntax.

Grid

answered on 19 Sep 2013

1 answer

142 views

Unbounded callbacks

If I declare a view as

<div data-role="view"

data-title="Form Unexpected but nice"

data-init="ns.viewA.init"

data-before-show="ns.viewA.beforeShow"

data-show="ns.viewA.show"

data-model="ns.viewA.viewModel">

...

<select data-bind="source:options,value:underlying.optionId"

data-text-field="display"

data-value-field="id"></select>

...

</div>

Then declare the js as

01.(function($, kendo, ns){

02. var model = {

03. options: [],

04. underlying: null

05. };

06.

07. model.bind('change', function (e) {

08. var t;

09. console.info('field %s changed.', e.field);

10. if (e.field === 'underlying.optionId') {

11. t = viewModel.options.singleOrDefault('id', model.underlying.optionId);

12. viewModel.set('model.underlying.derivedValue', t.someValue);

13. }

14. });

15.

16. ns.viewA = {

17. init: function(){

18. // populate options

19. ...

20. },

21. beforeShow:function(){

22. },

23. show: function(){

24. model.set('underlying', {

25. optionId: null,

26. derivedValue: 'Not Set'

27. });

28. },

29. viewModel: model

30. };

31.}(jQuery, kendo, myApp));

I've two issues, One if I properly instantiate the viewModel in the view.init, then the select source binding barfs because the array is not set when the binding is invoked. What can I do to have the viewmodel late bound? I've tried using kendo.bind(e.view.element, model) but this has the undesirable side-effect of destroying my

1.<ul data-role='listview'><li>static option/information</li></ul>

Two, when using SPA every visit to this view invokes another repetition of the 'change' event handler. Thus, the first time I visit this view, the change handler is accurately invoked only once. The second visit invokes the change handler twice. Third view yields three executions and so on. I'm assuming this has to do with the binding engine retaining a hook to the previous underlying object. What can I do to ensure the change is only fired the one time for the current underlying regardless of the view count?

MVVM

answered on 19 Sep 2013

1 answer

188 views

Tab strip text or badge icon not displaing in android with phonegap in kendo mobile ui

This is my index page, i am just trying to use some tabstrip example for my application in phonegap with kendo mobile

<!DOCTYPE html>
<html>
<head>
<title>My App</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="customize.kendo.css" rel="stylesheet" />
</head>
<body>
<div id="home" data-role="view" data-layout="default">
Hello Mobile World!
</div>

<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>

<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home">Home</a>
<a href="about.html">About</a>
</div>
</footer>
</section>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>

I have use some css which i found in kendo forum to enable the tabstrip title, i have written this css inside my customize.kendo.css

.km-android .km-tabstrip a
{
color: #a8a8a8;
}

Application

answered on 19 Sep 2013