2 answers

245 views

Get the numeric pad when focused on the numeric field + IPAD

Hi,

Is it possible to get the numeric pad when user clicks on a kendo numeric text field? like <input type="number"> in HTML5.
even I set the input field to be type number, when I wrap it with kendo numeric field it converts to type text.

Regards
Shivanka

NumericTextBox

answered on 01 Mar 2013

2 answers

202 views

How to select??

The kendo listview documentation says that you can pass in a selector or an array. An array of what?

I have a complex kendo grid that is using inline custom editors based on information in the row. This all works great, EXCEPT for the listview I'm adding.

Given something like this (I'm using underscore js by the way), how do I select the list items using javascript?

function createListViewEditor(container, options) {

var list = _.find(_viewModel.model.LookupListCollection, function(x) {

return (x.Id == options.model.StagingControlStageAttributeLookupCollectionId);

});

var listItems = [];

_.forEach(list.LookupValues, function(x) {

listItems.push({ text: x.CustomName, value: x.Id });

});

var lvSource = new kendo.data.DataSource({

data: listItems

});

var listView = $('<div />')

.appendTo(container)

.kendoListView({

dataSource: lvSource,

selectable: "multiple",

template: kendo.template($('#multiselecttemplate').html())

}).data("kendoListView");

var indices = multiListSelectionHelper(listView.dataSource.data(), options.model.AttributeFieldValue.split(','));

listView.select(indices);

listView.bind("change", function(e) {

var data = e.sender.dataSource.view(),

selected = $.map(e.sender.select(), function(item) {

return data[$(item).index()].value;

});

options.model.AttributeFieldValue = selected.join();

});

}

function multiListSelectionHelper(options, current) {

var items = [];

_.forEach(options, function (x) {

_.forEach(current, function(y) {

if (x.value == parseInt(y)) {

items.push(x);

}

});

return items;

}

ListView

answered on 28 Feb 2013

6 answers

867 views

DataSource JSONP random callback function name

I write only super high performance RESTful services that support both If-Modified-Since and If-None-Match request headers for data services. Your randomization of the JSONP callback function name is killing my performance because it's making each subsequent request to the service random rather than static. I don't see a way via configuration to make the JSONP call static and/or programmable. Any suggestions?

Data Source

answered on 28 Feb 2013

1 answer

228 views

Treeview Static Root Node

I'm trying to create a tree with a static root node that has all children populated from an ASP.NET WebMethod.

I saw a similar example when I searched the forums, but I can't get it to work at all. Below is the code I'm testing with. Any help is appreciated. Thanks!

ds = new kendo.data.HierarchicalDataSource({

data: [

{ FolderName: 'Documents', hasChildren: true, expanded: true }

],

schema: {

data: 'd',

model: {

id: 'FolderID',

hasChildren: 'HasChildren',

children: {

transport: {

read: {

url: 'Home.aspx/GetTreeNodes',

type: 'POST',

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

},

parameterMap: function(data, operation) {

return JSON.stringify({ RootFolder: 'Documents' })

}

});

TreeView

answered on 28 Feb 2013

1 answer

105 views

Cascading with dropdownlist

Hi.

I have reviewed the documentation dropdownlist and I have not been able to resolve the following situation:

My web service returns me a JSON object of the form as shown in the image. As you can see is what companies have branches and my json object already has reinforced that. But I tried to do with the dropdownlist and yet I can not. Only companies achieving load but not the children belonging to them. This is my code:

HTML

<div id="selectMenu" data-role="view" data-title="Emp-Suc" data-init="selectInit">

<div data-role="header">

<div data-role="navbar">

<a data-role="backbutton" href="#:back" data-align="left">Atras</a>

Emp-Suc

</div>

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

<li>

Compañia

<select id="company">

</select>

</li>

<li>

<select id="branch">

</select>

Sucursal

</li>

</ul>

</div>

javascript

function selectInit(){

$("#company").kendoDropDownList({

dataSource: selectMenu_model.getUserBranch(selection_view_model),

dataTextField: "Company",

dataValueField: "CompanyId"

});

$("#branch").kendoDropDownList({

cascadeFrom: "company",

dataTextField: "Branch.Name",

dataValueField: "Branch.BranchId",

dataSource: selectMenu_model.getUserBranch(selection_view_model),

autoBind: false

});

}

Clarified that the datasource has the answer as show in the picture !

I would appreciate a response. Thanks

ComboBox

answered on 28 Feb 2013

1 answer

174 views

Kendo Tree view- Maintaining scroll position with Load on Demand

I am using Kendo Tree View in Windows 7 and IE-8 inside Kendo Splitter control. We have load on demand implemented which will load data/child nodes on expanding each node.

The issue is whenever one expands any node the vertical scroll bar resets to top most position. Is it an embedded issue with Kendo or am I missing something. If not can you help me with a solution/workaround of this scroll position issue.

TreeView

answered on 28 Feb 2013

2 answers

121 views

Gauge Demo on iOS

Hi,

I'm new to Kendo UI and I'm having trouble getting a gauge to run for a proof of concept on a page running on iOS. I've tried to convert the example for mobile UI, but currently it does not run and I get "Uncaught RangeError: Maximum call stack size exceeded"
Also, is there any documentation on blending the mobile UI and dataviz?

<link href="kendo/examples-offline.css" rel="stylesheet">
<link href="kendo/kendo.dataviz.min.css" rel="stylesheet">
<link href="kendo/kendo.mobile.all.min.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script>
<script type="text/javascript" charset="utf-8" src="kendo/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" id="gauge-container" title="mainGauge" data-init="createGauge">
<div id="gauge"></div>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
function createGauge(labelPosition) {
setTimeout(function () {
$("#gauge").kendoRadialGauge({
theme: $(document).data("kendoSkin") || "default",

pointer: {
value: 65
},

scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180,
labels: {
position: labelPosition || "inside"
},
ranges: [
{
from: 80,
to: 120,
color: "#ffc700"
}, {
from: 120,
to: 150,
color: "#ff7a00"
}, {
from: 150,
to: 180,
color: "#c20000"
}
]
}
});
}, 400)
};

function refresh() {
var gauge = $("#gauge").data("kendoRadialGauge"),
showLabels = $("#labels").prop("checked"),
showRanges = $("#ranges").prop("checked"),
positionInputs = $("input[name='labels-position']"),
labelsPosition = positionInputs.filter(":checked").val(),
options = gauge.options;

options.transitions = false;
options.scale.labels.visible = showLabels;
options.scale.labels.position = labelsPosition;
options.scale.ranges = showRanges ? window.configuredRanges : [];

gauge.redraw();
}
</script>

<style scoped>
#gauge-container {
background: transparent url("images/gauge-container.png") no-repeat 50% 50%;
width: 404px;
height: 404px;
text-align: center;
margin: 0 0 30px 50px;
}

#gauge {
width: 330px;
height: 330px;
margin: 0 auto 0;
}
</style>

</body>
</html>

LinearGauge

answered on 28 Feb 2013

3 answers

249 views

Tabstrip and URL Parameters

This is probably something simple, but I was unable to find an answer to this.

I copied the code from the Tabstrip Basic Usage demo. Everything functions fine, but the issue I am having is that I can not figure out a way to prevent tab clicking to add parameters to the url.

By examining html I noticed that the tabstrip has the following code:

<a class="k-link" href="#tabstrip-1">Profile</a>

Clicking on the tab adds #tabstrip-1 to the yrl.

The demo does not have the href attribute therefore does not tack on the parameter.

How do I prevent this?

Thank you for assistance,
Aleks

TabStrip

answered on 28 Feb 2013

3 answers

167 views

parseFormat 'M/d/yyyy' not converted to format 'M/d/yy' properly

Look at my sample code here:
http://jsfiddle.net/CXcky/

In the second datepicker, if you manually enter 12/3/2012 and then tab out it gets truncated to 12/3/20.
I expect this to truncate it to 12/3/12.

DatePicker

answered on 28 Feb 2013

1 answer

95 views

Replacement grid filter

Hello,

I need to customize default filter view on kendo grid. Can I replace filter destination after columns definition before grid data (it may look like grid toolbar)?

Thanks.

Grid

answered on 28 Feb 2013