Questions on Kendo UI for jQuery Forum

1 answer

244 views

NumericTextbox not showing decimal numbers correctly

Hi

I have a NumericTextbox bound to a model variable in MVC. I'm reading a decimal value from a database (123.50) , but it is displayed as 123.00. I included the relevant Kendo culture file kendo.culture.en-ZA.min.js , and initialized the correct culture with

$(function () {
kendo.culture("en-ZA");
});

Any idea why the places after the decimal point are not showed?

NumericTextBox

answered on 13 Sep 2013

1 answer

817 views

How would i highlight the grid row/cell that contained an element with a server side validation error in a kendo grid with incell and batch editing

I need to do some server side validation of data that is being updated on a large grid and wanted to give the user an idea of where any validation errors occurred in the grid. Ideally it would be by highlighting the row/cell and having a mouse over or other error message associated.

What I have done so far is:
Controller:

ModelState.AddModelError(Item.Id, "this value is outside of the valid range");

JavaScript grid error handler

01.function error_handler(e) {

02. var data = e.sender._data;

03. if (e.errors) {

04. $.each(e.errors, function (key, value) {

05. highlightError(data, key, value);

06. });

07. }

08.}

09.

10.function highlightError(data, key, value) {

11. var grid = GetGrid("grid");

12. for (var i = 0; i < data.length; i++) {

13. var row = data[i];

14.

15. if (row.id == key) {

16. var hasError = $('[data-uid="' + row.uid + '"]');

17. hasError.addClass('kendo-error-row'); //this seems to be working, but it doesn't survive the whole process.

18. hasError[0].mouseover = function () { alert(errors[error].value); };

19. }

20. }

21.}

It seems like the code is working, but it doesn't seem to stick around until the end and if I use the IE developer tools it doesn't show the new class or have the mouseover. What am I missing?

Thanks!

Grid

answered on 13 Sep 2013

3 answers

270 views

Get current view of pane

Hi,

I am using a splitview with 2 panes, and throughout my mobile app would like to access the name of the view in the pane with ID "right-pane".

A simplified structure of my splitview can be seen below:

<div data-role="splitview">

<div data-role="pane" id="left-pane" data-layout="side-default" data-transition="slide">

<div data-role="layout" data-id="side-default" data-show="toggleBackButton">

</div>

<div data-role="view" id="lp_index" data-title="Smith & Co">

</div>

<div data-role="pane" id="right-pane" data-layout="main-default" data-navigate="onNavigate">

<div data-role="layout" data-id="main-default">

</div>

<div data-role="view" >

</div>

As you can see, the right-pane has a data-navigate property set to onNavigate, which is hooked up correctly. The contents of that function is as follows:

<script>

var app = new kendo.mobile.Application(document.body);

function onNavigate(e) {

alert($("#right-pane").data("kendoMobilePane").view());

}

</script>

When navigating around I get 2 alert boxes saying: "null" and "[object Object]".

I've probably been staring at the code too long and need a fresh pair of eyes to point out a silly mistake!

Thanks in advance.

SplitView

answered on 13 Sep 2013

3 answers

192 views

text/x-kendo-tmpl +angularjs

our single page app using angularjs is near completion.

One ng-view screen is attached - using kendo controls since there is benefit for this screen to make use of DataSourceRequest, listview/pager

I've integrated with kendo using directives - that is the screen you see.

When trying to add interaction with angularjs using ng-click - it doesn't work. Probably since this dom was added outside of angularjs's dom manipulation.

<script type="text/x-kendo-tmpl" id="FilterByTypeItemTemplate">

<li><a href="\##:Name #" ng-click="FilterByType('#:Name #')"><i class="icon-chevron-right pull-right"></i><em class="pull-right">(#:Count #)</em> #:Name # </a></li>

</script>

And this is the problem.... How do I get kendo template to work with angularjs?

I also don't see a datasourcechanged event on listview to notify me when the datasource underneath has been changed.

General Discussions

answered on 13 Sep 2013

2 answers

768 views

Change "Show items with value that:" in grid filter

How can i change the text "Show items with value that: "that is located in the grid filter widget.

Thanks

Grid

answered on 12 Sep 2013

0 answers

80 views

Support for jQuery 2.0 w/o the need to use migrate

Hi,

Today, I upgraded our web proejct to use jQuery 2.0.3 with Kendo UI 2013.2.717. I then brought in the debug version of the migrate plug-in and that is where I saw a lot of code within Kendo UI needs to be updated/changed to get on to use the jQuery 2.0.3 w/o requiring the migrate plug-in.

I am attaching a screen shot of what I saw in my Chrome console. This is just a few list of errors, but I see a lot more all over our application. I wanted to know when can I expect these to be addressed so our application can run on the latest jQuery version and not require migrate plug-in.

Thanks,
Taz.

General Discussions

asked on 12 Sep 2013

2 answers

113 views

MVVM data-bind with z-index

Hi,
I had a problem when trying to embed z-index databinding. Below is my DOM:

<div id="ItemContainer0" class="textItem ui-draggable" data-bind="style:

{height: Height + 10 + 'px', width: Width + 10 + 'px', top: Y - 6 + 'px', left:

X - 6 + 'px', 'z-index': Z}" index="0" style="height: 60px; width: 210px; top:

77px; left: 135px;">

The "width", "height", "top", "left" are rendered to "style" but z-index is not.
What is my mistake?
Please help me this problem. I searched google for a long time but I didn't see any answer.

Thank you.
John Vu

MVVM

answered on 12 Sep 2013

6 answers

400 views

tabstip with treeview: treeview breaking out of tabstrip

Hi

Does anybody have any experience with using a treeview in a tabstrip?

I am loading a dynamically loaded treeview in a tabstrip, but when I unfold an option in the treeview , the treeview breaks out of the tabstrip.
Is there a way to have a scroll bar in the tabstrip or in the treeview?

Thanks for helping me out!

Henk Jelt

TabStrip

answered on 12 Sep 2013

5 answers

513 views

Listview paging - Page change sending two requests

Hello,
I am attempting to use a Listview with serverPaging that has custom filtering applied to it. What I am seeing is when I apply a filter, the intial result set is coming back correct. When I attempt to change the page, I am seeing two dataSource requests. The first request has the correct querystring arguments passed, and the second has no arguments set.

How can I get the desired functionality without the extra datasource request? Code is below.

$("#user-Search").kendoDropDownList({

autobind: false,

enabled: true,

optionLabel: "All",

dataTextField: "text",

dataValueField: "value",

dataSource: userDataSource,

edit: function (e) {

var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');

if (ddl) {

ddl.open();

}

},

change: function () {

initGrid();

}

});

function initGrid() {

var ds = getDataSource();

var History = $("#listView").kendoListView({

dataSource: ds,

template: kendo.template($("#template").html()),

autoBind: false,

pageable: true

});

$("#pager").kendoPager({

dataSource: ds,

empty: "No Items to Display",

autoBind: false

});

}

function getDataSource() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/Services/TitleHistory.ashx?publishedid=" + $("#SearchHistory")[0].value + "&startDate=" + $("#datestart")[0].value + "&endDate=" + $("#dateend")[0].value + "&filterUser=" + $("#user-Search")[0].value,

dataType: "jsonp"

},

serverOperation:false

},

serverPaging: true,

schema: {

total: function (response) {

if (response[0]) {

return response[0].total;

}

else {

return 0;

}

},

model: {

id: "EventType",

fields: {

EventType: { editable: false, nullable: true },

Details: { editable: false, nullable: true },

Comment: { editable: false, validation: { required: true } },

User: { editable: false, validation: { required: true } },

EventDate: { validation: { required: true }, type: "date", format: "{0:MM-dd-yyyy}" }, editable: false,

Title: { editable: false, nullable: false },

UserId: { editable: false, nullable: false },

PublishedId: { editable: false, nullable: false, }

},

}

},

pageSize: 5

});

dataSource.fetch();

return dataSource;

}

ListView

answered on 12 Sep 2013

1 answer

136 views

Tooltip data-width not working with MVVM

Using the data-role attribute and setting the width option via html attributes doesn't seem to work.

The below code will not set the width option.
<span data-role="tooltip" data-width="200"></span>

I've found that this is because the width property is not set in the tooltip default options. I've temporarily fixed this using:
kendo.ui.Tooltip.fn.options.width = "";

This has been tested in v2013.2.716

ToolTip

answered on 12 Sep 2013