Questions on Kendo UI for jQuery Forum

1 answer

193 views

Style question - keep parent style when selecting child item

I have a demo my problem online -- as you can see, I have a problem when selecting a child under Secondary Reviews or Primary Reviews.

I want the child items to remain as they are when you mouse over them or to just set text-decoration to underline. When you click on a child item, the parent should remain unchanged and the text of the child item should turn blue.

All styles are inline in the index.html page.

I know I'm missing something obvious here but just can't figure out how to change that child style without that change affecting the parent tem's style.

Thanks for any help!

Joel

PanelBar

answered on 24 Dec 2013

3 answers

268 views

grid rendering issue when located on panelBar bottom panel (initially inactive / collapsed)

I want to put together a jsBin project to demonstrate a problem I'm having with the kendo grid on a panelBar, but the problem only manifests itself when the grid contains a large amount of data, i.e. a thousand rows or more. Is there a Northwind or other URL that returns a large dataset I can use?

Here's the scenario, in the meantime.

Top panel (active panel) contains a Google map.
Bottom panel (collapsed) contains kendo grid.

User clicks on the map, and the latitude/longitude is used to fetch data from our database via AJAX.
Kendo grid is populated with the data while the bottom panel is still collapsed.
User clicks on the bottom panel to expand it and see the query results.

This works perfectly -- but only on the first query.

When the user re-opens the top map panel to click on a different location, I destroy() the existing grid, reconfigure the grid, and repopulate the grid's dataSource with the new data from the second query. Although the dataSource data object contains the full dataset from the XHR, the grid renders only the first row, and the height of the grid is truncated from 600px to 100px.

PanelBar

answered on 24 Dec 2013

3 answers

889 views

ComboBox refresh method selects an item

I have a question about some code inside the refresh() method of the ComboBox widget. Specifically, the following lines:

if (state !== STATE_FILTER && !that._fetch) {

that._selectItem();

}

In my application, the dataSource of a combobox needs to change based on the user making various choices. In this case, we use ComboBox.setDataSource() to update the combo. When the user clicks the dropdown button to open the popup, the combo does a refresh which causes the above code to run. That code selects the first item in the data, even though "suggest" and "highlightFirst" are both false. Moreover, the "change" event is not fired, so the combo shows a selection, but our application code is not notified.

Why does refresh() select an item? Shouldn't it just rebuild the options list but keep other state in the control unchanged?

Thanks,
AHG

ComboBox

answered on 23 Dec 2013

2 answers

79 views

SPA drop down list from view template not working on re-render

Running build v2013.3.1119. The drop down list functions normally when it is first displayed, but after switching out views with a re-render of the view the drop down list becomes disabled and cannot be clicked on or accessed. I also noticed that a submit button loses its click event hander when the template is re-rendered.

Here is a jsfiddle example that replicates the issues: http://jsfiddle.net/markm1/x5q24/

I have tried different ways of creating the drop down, including using mvvm and the results are the same. Any ideas?

Here is the html:
<script id="index1" type="text/x-kendo-template">
    <select id="ddMatter1" name="ddMatter" >
        <option>Select 1...</option>
        <option value="type-1">1</option>
        <option value="type-2">2</option>
    </select>
<input id="search" name="search" type="submit" value="Search"/>
</script>
<div id="app"></div>
<br/><br/><br/>
<p>click render to break things</p>
<input id="render" type="submit" value="Render"/>

And here is the script:
var index1 = new kendo.View('index1');
$("#app").html(index1.render());
$("#ddMatter1").kendoDropDownList();
$("#search").click(function () { alert('search'); });
// render the view again to break things
$("#render").click(function () { $("#app").html(index1.render());
alert("Now the drop down does not work and the search button is no longer wired up")});

SPA

answered on 23 Dec 2013

4 answers

439 views

Template does not fully update

(I am NOT saying this is a bug, What I am saying is my brain needs training :-) )

I have a TABLE that is DataBound to an ObservableArray (called vm.ServerData).

<div id="ServerTable" class="row Block InfoTable ">

<table>

<thead>

<tr>

<th>ACTION</th>

<th>Type</th>

<th>Class</th>

<th>Status</th>

<th>Size</th>

</tr>

</thead>

<tbody data-bind="source: ServerData"

data-template="serverTemplate"></tbody>

</table>

</div>

The body of the table is bound to the values in the Array via the data-template as follows:

01.<script type="text/x-kendo-template" id="serverTemplate">

02. <tr data-path="${Path}"

03. data-filecount="${FileCount}"

04. data-maxzoom="${MaxZoom}"

05. data-date="${Date}"

06. data-type="${Type}">

07. #if(Newer == "NEW") { #

08. <td><div class="button radial Center ButtonText">Download</div></td>

09. #} else { #

10. <td title="Already Downloaded"><img src="../images/pushPin.png" style="width: 32px; height: 32px;" /></td>

11. #}#

12. <td><span data-bind="text: Type" /></td>

13. <td><span data-bind="text: Class" /></td>

14. <td><span data-bind="text: Newer" /></td>

15. <td><span data-bind="text: Size" /></td>

16. </tr>

17.</script>

Everything works fine the first time the page is entered. The issue is that the user can issue commands that update the ServerData[i[.Newer field.

They update is done in code as follows:

if ((dd.Type == sd.Type) && (dd.Date >= sd.Date)) {

vm.ServerData[i].set("Newer", "CURRENT");

}

What I observe, is that the TD (line #14) updates just fine. But the IF/THEN/ELSE condition (lines 7-11) is not getting executed. [What is odd is that lines #7-11 are executing properly the first time the page is updated. So it is clearly that the change from the text of "NEW" -> "CURRENT" in via SET() that is not firing a change in the template code.

OK,

I can do a crude force of the issue by adding line #4 below:

1. if ((dd.Type == sd.Type) && (dd.Date >= sd.Date)) {

2. vm.ServerData[i].set("Newer", "CURRENT");

3. }

4.kendo.bind($("#ServerTable"), vm.ServerData);

And this will force the IF/THEN/ELSE to execute and my page works. But I think I am doing something very brutal to the KENDO MVVM paradigm (actually,
I am violating the whole MVVM concept). So pray tell, What is the elegant way to do this?

MVVM

answered on 23 Dec 2013

5 answers

103 views

DataSource does not call create

Hi all!

I am very beginner in Kendo, so sorry if I ask stupid questions :)
I have the following code:

    var template = kendo.template($("#todo-template").html());

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "api/todos",
                dataType: "json"
            },
            create: function () {
                alert("DSA");
            }
        },
        schema: {
            model: { id: "TODOID" }
        },
        change: function () { // subscribe to the CHANGE event of the data source
            $("#todo-table tbody").html(kendo.render(template, this.view())); // populate the table
        }
    });
    dataSource.read();

    $("#add-button").click(function () {
        dataSource.add({
            "TODOID": 30,
            "TITLE": "asd",
            "PRIORITY": 3,
            "DEADLINE": "2013-02-02",
            "DONE": false
        });

        dataSource.sync();
    });

The problem is that the create event is never being called. The read is okay, the table is shown nicely. What would be the problem?

Sincerely,
Daniel

General Discussions

answered on 23 Dec 2013

3 answers

268 views

Menu close event problem

Hi,

var menu = $("#menu").kendoMenu({openOnClick: true }).data("kendoMenu");
menu.close("#Item1");

I am using above method to close the dropdown, it is working fine. But after closing also if i mouse over on the menu the dropdown gets opened.
My requirement is to open the dropdown only on click not on mouse over. could any body help me.

Regards,
Ramesh V.

Menu

answered on 23 Dec 2013

10 answers

354 views

NavBar Title Translation

I have a phonegap 3 application where I use kendo mobile.

For internationalization I use this:
https://github.com/plang/phonegap-l10n
It's pretty simple. I can add a class an the translation works.

My views:

<div data-role="view" id="tab-catalog" data-title="Catalog" data-layout="mobile-tabstrip">

....

</div>

<div data-role="view" id="tab-account" data-title="Account" data-layout="mobile-tabstrip">

....

</div>

My Layout:

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div id="navbar" data-role="navbar">

<a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title"></span>

<a id="scan" data-align="right" data-icon="camera" data-role="button"></a>

</div>

</header>

</div>

Works fine.. but I don't know how to translate the data-title attribute.
I know I can set the title with
$("#navbar").data("kendoMobileNavBar").title("foo");
I also could read the title of my view with kendo.view().title and make the translation, something like this:

$("#navbar").data("kendoMobileNavBar").title(Localization.for(kendo.view().title));

After I start the app is the title is translated, but if I change the view and come back the title is "Catalog" again.

How could I accomplish anything like this?

NavBar

answered on 23 Dec 2013

1 answer

391 views

How to make axis label shown in multiple lines

I would like to show each x axis label in two line, e.g., I want to show a date label
2013-12-23 14:59:00
as two lines formatting:
14:59:00
2013-12-23

if I just show x axis in one line, then the labels are too long and will overlap.
Anyone knows how to do that?

Charts

answered on 23 Dec 2013

13 answers

110 views

Android - Ghost Click - ModalView over ListView

Kendo Mobile version - 2012.3.1315. I am having issues on native Android devices with click events. I have a ListView and register to its data-click event. I then show a ModalView over the ListView. When I click the Close button of the ModalView, the underlying ListView click event fires as well (ghost click). I cannot recreate this scenario in the Icenium simulator. It only occurs on native devices.

Edit: I've also tested this scenario on 2013.1.703 and the same behavior occurs.

<div id="modalview-additional-info" style="width: 80%; height: 70%;">

<div data-role="header">

<div data-role="navbar">

<span>Info</span>