Questions on Kendo UI for jQuery Forum

7 answers

415 views

Hello Forum,

I try to add some text to a horrizontal Splittbar of my Splitter. Background is, that if the User of my site collapse the filter pane, the entered filter should be displayed in a short form in the splittbar.

I tried the following code (without luck yet):

$(document).ready(function ()

{

var allHorizontalSplitterElements = $(".k-splitbar.k-state-default.k-splitbar-vertical");

var splitter = $("#filterMaster").find(allHorizontalSplitterElements);

var splittbar = splitter.get(0);

var child = createInfoDiv();

splittbar.appendChild(child);

});

function createInfoDiv()

{

var infoDiv = document.createElement("div");

infoDiv.className = "infoDiv";

infoDiv.innerHTML = "Filter:";

return infoDiv;

}

All works without any error, but the div is not added to the splittbar. If I check in IE Developer Tools, the Splittbar div only contains the div for the collapse icon.

That I got the right div in my variable splittbar I checked by appending an additional css style. That was working, but not the appendChild function.

In hope for help,

Thomas

Splitter

answered on 01 Aug 2014

12 answers

555 views

[Solved] angularjs $dirty not firing when using kendo-drop-down-list

Hi everyone,

after upgrade from angular-kendo 1.0.1 and kendo v2014.1.416 to the new all in one kendo v2014.2.716 the selected value is not passed anymore to the underlying property using ng-model. After changed ng-model by using k-ng-model (that holds the typed value) form $dirty and friends not firing.

Ex:

<form name="modelForm" ng-submit="save(model)" novalidate>
...
<select kendo-drop-down-list
k-data-text-field="'DisplayName'"
k-data-value-field="'Id'"
k-data-source="roles"
k-ng-model="model.SupplierContactRoleId"
name="SupplierContactRoleId"></select>
...
<button type="submit" class="btn green" ng-disabled="modelForm.$invalid || modelForm.$pristine"><i class="icon-ok"></i> Save</button>
...
</form>

DropDownList

answered on 31 Jul 2014

1 answer

172 views

Bug? Toolbar 100% width triggers horizontal scrollbar

In the sample below (also attached), the toolbar has an extra 2px in Google, FF and Safari (not in IE - latest versions on win 8.1) which triggers the display of an horizontal scrollbar at teh bottom of the window. Bug? Workaround?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<link rel="icon" href="//getbootstrap.com/favicon.ico">

<title>Sticky Footer Navbar Template for Bootstrap</title>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">

<script src="//getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>

<script src="//getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<style>

#toolbar {

position: absolute;

top: 50px;

width: 100%;

}

</style>

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Project name</a>

</div>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li class="dropdown-header">Nav header</li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</div>

<div id="toolbar"></div>

<div class="container">

<div class="page-header">

<h1>Sticky footer with fixed navbar</h1>

</div>

<p class="lead"

>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <

code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>

<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>

</div>

<div class="footer">

<div class="container">

<p class="text-muted">Place sticky footer content here.</p>

</div>

<!-- Bootstrap core JavaScript

================================================== -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

<script>

$(document).ready(function() {

$('#toolbar').kendoToolBar({

items: [

{

type: 'splitButton',

text: 'splitButton',

menuButtons: [

{ id: 'foo', text: 'Foo' },

{ id: 'bar', text: 'Bar' }

],

overflow: 'never'

},

{

type: 'button',

text: 'Button',

overflow: 'auto'

},

{

type: 'buttonGroup',

buttons: [

{ text: 'Option 1', togglable: true },

{ text: 'Option 2', togglable: true },

{ text: 'Option 3', togglable: true }

],

overflow: 'always'

}

]

});

</script>

</body>

</html>

Toolbar

answered on 31 Jul 2014

4 answers

233 views

Customize grid filter

A grid filter is defined in FilterMenu does not support customization as it always uses a hardcoded template.
More than that, the template contains an english text:

'<select name="logic" class="k-filter-and">'+
'<option value="and">And</option>'+
'<option value="or">Or</option>'+
'</select>'+

This complicates localization.
I suggest to:
1. Localize text.
2. Allow to provide a custom template.

Grid

answered on 31 Jul 2014

3 answers

298 views

Multiple Charts Alignment

Hello,

We have multiple charts dynamically added to the page which are vertically stacked. We have a problem with the alignment of the charts - see attached image. The alignment issue is due to the varied character length of the categories displayed in the category axis.

One workaround we've tried to implement is to truncate the category text. This almost works but the graphs are still slightly out of line; we also need to have a tooltip displayed when the users hover their cursor above the category axis labels.

1) How may we add a tooltip for the the category axis labels?
2) Can you suggest how we may align the charts more accurately?

Kendo version: Kendo 2014 Q1.

Many thanks,

Andy

Charts

answered on 31 Jul 2014

3 answers

824 views

NumericTextBox - invalid border color

Hi, I'm trying to have the numeric textbox display with a red border if invalid value. The below styling is setting the border red on some hidden textbox and not the wrapper. Any ideas? Hacks? Work-arounds?

input.input-validation-error {

border: thin solid red !important; /*!important forces override of borders set on kendo controls*/

}

NumericTextBox

answered on 31 Jul 2014

1 answer

233 views

IE Compatibility Mode Issue w\DatePickers

I'm having trouble adding a second datepicker to any screen. It looks fine & works in Chrome, Firefox, or IE outside of compatibility mode. However, in IE 10 in compatibility mode, the second datepicker becomes a text box. It looses its style and doesn't have the calendar selector button. The error that I get is "Unhandled exception at line 3, column 23238 in http://localhost:60914/Scripts/kendo/2013.1.514/jquery.min.js".

I can reproduce the issue with the .cshtml code in the demo - http://demos.telerik.com/aspnet-mvc/datepicker/rangeselection.

My layout page contain the following references.
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.dataviz.blueopal.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.1.514/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Skynet.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-migrate-1.2.0.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

DatePicker

answered on 31 Jul 2014

8 answers

1.5K+ views

How to entirely prevent rounding?

I've tried a few ways of approaching this, but in every case I get weird results. Here's a fiddle that demos a couple of them:

http://jsfiddle.net/GSpjW/2/

In both test cases, the rounding is in error. I'd like to be able to turn off rounding entirely, for any length of input. Is this possible?

NumericTextBox

answered on 31 Jul 2014

4 answers

291 views

Row Hierarchy

Hi,
We are looking at the new PivotGrid in order to display hierarchical data that has values that need to be aggregated when collapsed and the PivotGrid seems to do exactly what we want, but I am trying to get this to work for local data rather then from an xmla service.

The problem I am having is in defining the hierarchy structure in my rows such that it will expand to multiple levels.

Do you have any examples of using local data and defining a row hierarchy? This is not adding multiple fields to the rows, just having a single field and the underlying object has child element.

PivotGrid

answered on 31 Jul 2014

3 answers

243 views

Grid filter row weird behaviour

I'm trying to add the new filter row to my grids. I'm using the MVC wrappers and ajax data sources.
The filter row displays fine. However, when I enter a value in one of the filters, all the other filters in the row also get this value (see screen snippet), and no filtering actually happens (no data source request).

In the page source I can see that all filter inputs have a MVVM value data binding to the same property. This may explain why they all get the same value when one of them changes, although this does not seem to be a problem in the online demo's.
My application is a single page application and I use MVVM on most pages. The grids are not in the scope of an MVVM binding though.

Does somebody have an idea in which direction I should be looking for a solution?

Grid

answered on 31 Jul 2014