Telerik Forums
Kendo UI for jQuery Forum
2 answers
75 views
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")}); 
Z
Top achievements
Rank 1
 answered on 23 Dec 2013
4 answers
420 views
(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?




Dr.YSG
Top achievements
Rank 2
 answered on 23 Dec 2013
5 answers
95 views
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
Daniel
Top achievements
Rank 1
 answered on 23 Dec 2013
3 answers
251 views
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.
Dimo
Telerik team
 answered on 23 Dec 2013
10 answers
327 views
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?
giord
Top achievements
Rank 1
 answered on 23 Dec 2013
1 answer
360 views
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?
Iliana Dyankova
Telerik team
 answered on 23 Dec 2013
13 answers
100 views
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>
                <a data-click="closeModalViewAdditionalInfo" data-role="button" data-align="right">Close</a>
            </div>
        </div>
 
        <div data-role="scroller">
            <p id="additionalInfo"></p>
        </div>
    </div>
 
<ul data-role="listview" data-type="group" data-click="equipmentListViewClick">
...
</ul>
Alexander Valchev
Telerik team
 answered on 23 Dec 2013
1 answer
248 views
How can I create a treeview layout using checkboxes similar to the example below:

[ ] Country A
        [ ] Region A
                [ ] Territory 1
        [X] Region B
                [X] Territory 2
                [X] Territory 7
[ ] Country B
        [ ] Region C
                [ ] Territory 3
                [ ] Territory 4

I am using the MVC helpers and would like to load the data in one call to the controller i.e. NO on-demand loading.

I've been trying to use the following example: http://demos.kendoui.com/web/treeview/remote-data.html - but I 
don't understand how I should construct the JSON object to include children etc.

Similar post here? - http://www.kendoui.com/forums/kendo-ui-framework/hierarchical-data-source/good-way-to-populate-entire-hierarchical-datasource-with-one-data-call.aspx 

Any examples would be great.

Thanks,
Beau
Alex Gyoshev
Telerik team
 answered on 23 Dec 2013
6 answers
1.0K+ views
Hello All:

I wrote fiddle http://jsfiddle.net/RichardAD/QfDd9/ to demonstrate how a portion of a node text value can be highlighted when it matches a search term. Could also be tweaked to hide non-matching nodes.

I'm looking for feedback on the technique and improvements.

Thanks,
Richard
Matt
Top achievements
Rank 1
 answered on 23 Dec 2013
2 answers
94 views
I am trying put dropdownlist under treeview but it is not appearing properly on click and also not able to select due to same reason. I have tried putting contents on JsFiddle with dropdownlist under treeview and without treeview. It is working fine without treeview but having problem if we put under treeview.
Please have a look on http://jsfiddle.net/dN2PK/8/
Vikash
Top achievements
Rank 1
 answered on 21 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?