2 answers

199 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

862 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

225 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

102 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

167 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

119 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

241 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

162 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

92 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

1 answer

144 views

JSON and WCF ( CRUD) - Batch update mode (Kendo Grid)

Hi ,

I am trying to do a batch update mode on a kendo grid. I am finding some troubles retrieving the call back from the web service.
Actually when I set to batch: false , it passes no of row changes one by one to the web service.

this is the web service.

[OperationContract]
[WebGet(BodyStyle = WebMessageBodyStyle.Bare,
ResponseFormat = WebMessageFormat.Json,
RequestFormat = WebMessageFormat.Json,
UriTemplate = "Get/Update?ID={ID}&StdID={StdID}&Name={Name}"
)]
public void Update(int ID, int StdID, string Name)
{
ElementData.UpdateElement(ID, StdID, Name);
}

although this is webGet Method it is working for inline editing on the grid ( when batch: false)

But I really want to do a batch update and show a message to user that it has been successfully committed , or the error occurred.

this is how I call to web service for the inline update.

update: {
url: "../service/jsonservice.svc/Get/Update",
dataType: "jsonp"
},

my web config methods are as following :

<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="Retails.Service.JsonServiceAspNetAjaxBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
<services>
<service name="Retails.Service.JsonService">
<endpoint address="" behaviorConfiguration="Retails.Service.JsonServiceAspNetAjaxBehavior" binding="webHttpBinding" contract="Retails.Service.JsonService" />
</service>
</services>
</system.serviceModel>

Can you please help me how to do the batch update mode. I have gone through with a kendo telerik sample for crud methods. But here I can't use the web service like that. Because It has already been developed for some other functions.

Anyway can you please tell me way to write a method in web service and a method to call the update method to do a batch update .

And I want to show a feedback to the user saying it has been updated successfully .

Grid

answered on 28 Feb 2013