Questions on Kendo UI for jQuery Forum

4 answers

121 views

what CSS settings would remove this outline rectangle from grid which has been put on a panelBar

The grid is on a panelBar. In configuration of the grid, grid height is set to 444px. PanelBar height is also set to 444px in its configuration:

When the grid is rendered, there is an outline rectangle in gray, and the grid's rows "spill over" it. Please see attached screen shots. I would like the outline either not to be visible or to be at the same location as the top of the grid footer rectangle.

What CSS settings do I need to change to fix that issue? How to set the grid's height so it occupies 100% of the panelBar's content pane?

Grid

answered on 10 Jul 2013

1 answer

215 views

Refresh all charts on-screen

Hi guys

As we know, there's a problem with Kendo UI charts (and gauges and other widgets) being rendered that are underneath tabs. On load, the chart is unable to detect the size of it's parent container and defaults to 600 width.

So as a workaround, I'd like to bind an event to my tabs (Bootstrap NavBar) that refreshes EVERY Kendo UI chart/gauge etc onscreen at once. This code will go into a controller that will control multiple dashboards with configurable charts - so it's impossible to know ahead of time the IDs of the charts, or the count. There may be no charts, or 50.

That means I need some method of retrieving all Kendo UI objects (or all charts, all gauges, whatever) on the screen at once, preferably as an array so that I can iterate through this array and call refresh() on them.

The pages are being generated by PHP, so I don't have any selectors available. I'd like to place this code onto the bottom of the template so it's a 'drop-in', if possible.

I tried looking at the common classes, such as k-chart, when but I pushed that into a jQuery selector I was unable to call refresh().

Does anyone have any ideas on how I might accomplish this?

Charts

answered on 10 Jul 2013

1 answer

47 views

ShowOn configurations breaks when AutoHide is set to "False"

When "AutoHide" is set to False, the ShowOn configuration only delays the display of the tooltip.

Expected functionality is that ShowOn will prevent the display of the tooltip until it has been hovered over for the specified interval.

How can I achieve the expected functionality?

ToolTip

answered on 10 Jul 2013

1 answer

81 views

Typo in CSS?

Hi,

I was creating a list with inset style and I realized the last element of the list hasn't bottom border. After checking the CSS (http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css) I saw this:

.km-meego .km-listgroupinset .km-list>li:last-child{border:1 ps solid rgba(0,0,0,0.2);

There is not any other ps in the CSS and I never have seen something like that, maybe is a typo? And if not, why there is not bottom border?

General Discussions

answered on 10 Jul 2013

7 answers

557 views

List View data-click event returns e with undefined dataItem properties

Hi,
I've been having trouble getting at the data associated with a list view item. In the event handler for the data-click event event I get an event parameter that doesn't seem to have any of the properties referenced in the sdk. Only the data-item property is undefined.

onLibraryItemClick e:[object Object]
06-26 13:01:29.439 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e:onLibraryItemClick e.item:[object Object]
06-26 13:01:29.459 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e.target:[object Object] at :2
06-26 13:01:29.459 1203-1203/com.verbum.wordhose.android I/Web Console: app: onLibraryItemClick e.dataItem:undefined at :2

The weird thing is that I am able to add new items to listview and they render correctly. So the template seems to be wired up correctly.

The related HTML is:

<div id="libraryPage" data-role="view" data-layout="appLayout" data-title="library" data-init="initLibraryListView">

<p id="wh_status">disconnected</p>

<div class="head">Wordhose Library</div>

<ul id="library-listview"

data-role="listview"

data-init="initLibraryListView"

data-click="onLibraryItemClick">

</ul>

<script type="text/x-kendo-template" id="libraryListViewTemplate">

<h3 class="item-title">${Title}</h3>

<p class="item-info">Text Status Data Here</p>

</script>

</div>

The click event JS is:

function onLibraryItemClick(e) {

console.log("app: onLibraryItemClick e:" + e);

console.log("app: onLibraryItemClick e.item:" + e.item);

console.log("app: onLibraryItemClick e.target:" + e.target);

console.log("app: onLibraryItemClick e.dataItem:" + e.dataItem);

//console.log("app: onLibraryItemClick e.target:" + JSON.stringify(e.target));

_CurrentTextData = e.dataItem;

//console.log("app: e.dataItem.Title=" + e.dataItem.Title);

};

And the code that adds the json item to the dataSource is:

_LibraryListViewDataSource.add(sampleText);

Like I said, items get added and rendered correctly in the listview itself, but there's no associated dataItem.

Help :) ?

Thanks.

ListView (Mobile)

answered on 10 Jul 2013

1 answer

189 views

Date Picker changing width on mouse hover, causing table contents to shift

I've got a simple table with text in the left column cells, and inputs in the right. The first time the mouse hovers over a Date Picker in the right column, all the contents of the left column shift to the left by a few pixels. It appears that the Date Picker is slightly changing its width on hover.

I've tried adding a margin and padding on the cell with the Date Picker, to no avail.

Date/Time Pickers

answered on 10 Jul 2013

1 answer

189 views

Delete listview item using rowdelete detail button, and change the icon style when rowdelete button is clicked

Hi

I would like to achieve similar UI behaviour as IPhone when delete a item from a list, and want to show different icon when rowdelete button is clicked, but not idea how to achieve this using kendo mobile. could someone please assist me? thanks.

<script id="wordListEditTemplate" type="text/x-kendo-template">

<a data-role="listview-link">
<span><a data-role="detailbutton" id="wordRowDelete" data-style="rowdelete" data-bind="click:delete"></a></span>
${name}
</a>
#= renderWordDefinitionsTemplate(data) #
</script>

in the above code snippet, I have binded the click event to a delete function. In the delete function, I want to show different icon, and also show the "Delete" button on the right position.

Cheers

ListView (Mobile)

answered on 10 Jul 2013

1 answer

86 views

PanelBar not working in IE9

Please load the following simple panelbar example page in IE with the browser mode set to IE 9 and the the document mode set to IE 9 Standards. Not that the panelbar renders incorrectly. Can you provide feedback on what is wrong?

https://www.angpcorp.com/view-1/pbar.html

PanelBar

answered on 10 Jul 2013

1 answer

98 views

How to connect to CCTV?

Hi,
is there anyway to see CCTV 's cam ? do i need to find other plug-ins for this ?

Thanks..

General Discussions

answered on 10 Jul 2013

2 answers

128 views

Scroll View with data template

I am trying to use a template to render pages in a scroll view and I have run into some issues ... I have a jsFiddle that shows what I am trying to do the group has a red header with 'why does this not work'. I have a bunch of examples of things using templates and I don't understand why the template with the scroll view does not behave like the rest, could someone explain what I am missing?

http://jsfiddle.net/6RuHQ/6/

In case you are curious I am probably going to wind up with the last approach with my application since in some occasions I will end up with only 1 page and it looks silly as a scroller with 1 page (I'd rather just render that single page by itself).

ScrollView (Mobile)

answered on 10 Jul 2013