Questions on Kendo UI for jQuery Forum

1 answer

193 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

136 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

271 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

189 views

[Solved] 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

124 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

158 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

72 views

[Solved] 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

146 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

7 answers

269 views

[Solved] Error on Empty Tab Strip

Clicking on a tab strip without any tabs results in an error in Kendo UI code!

It also appears that dynamically appending a new tab to the tab strip does not work if
the tab strip is empty (No Tabs, only a UL tag without any LIs).

My code works when appending (or using insert before) to a tab strip with at least one tab

Thanks

PM

TabStrip

answered on 27 Feb 2013

4 answers

102 views

Grid's pager should apply a hover state

The grid's pager currently is not applied a k-state-hover class, when the mouse is over the "first, previous, next, last page" buttons.This should be done so the background image is extracted correctly from the sprite.

Please try...