1 answer

216 views

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

98 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

154 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

115 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>

Gauges

answered on 28 Feb 2013

3 answers

234 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

157 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.

Date/Time Pickers

answered on 28 Feb 2013

1 answer

88 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

138 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

1 answer

56 views

Editing boolean value in Safari 5.1.7, the windows version.

Hello,

See the following example http://jsfiddle.net/YpHtu/ . From the browser Safari 5.1.7, the windows version, I am unable to update the grid column 'Discontinued'. This column holds a boolean value. If I try to set the value the text is shown again. This same example is shown on the kendoUI demo website and there it is working. Can you help me find the problem?

Regards,
Marcel

Grid

answered on 28 Feb 2013

1 answer

110 views

Server Side data bound locally

HI all. I'm trying to figure out if Kendo UI Grid is suitable for my scenario. Basically, I'm pulling data from a REST API from a server product. I have to format that this data a bit on the client side a bit so I can't bind it directly to the grid using the server data binding mode. I also can't deploy any server side code so it all has to happen client side.

Basically, I want to retrieve the data myself and bind it to the grid. That part is pretty straight forward, but then i want to make additional server side requests when a user sorts or pages. Can I do this with Kendo UI grid? I've looked through the docs and found bits and pieces of what I need but I didn't really see a way to override these events.

Thanks,
Corey

Grid

answered on 27 Feb 2013