Telerik Forums
Kendo UI for jQuery Forum
1 answer
93 views
Hi,

I'm using version 2013.3.1119 to create a basic TreeView. Please refer to http://jsfiddle.net/fDrvP/

I've tried running this fiddle in Chrome 31/Firefox 25/IE 9 on Windows 7 with the same result.

When I try expanding Item 3 (clicking the arrow or double clicking the text), no child items are shown. If I inspect the li element, I can see some attributes changing to expanded="true" but no child items appended.

Is there something I've overlooked?
Alex Gyoshev
Telerik team
 answered on 04 Dec 2013
1 answer
191 views
Using Kendo UI's awesome kendoEditor, I am experiencing a bit of an annoying issue when coupling it with jQuery 2.0 or higher.

I have reproduced the problem here, using kendo's latest build; But basically, when you create an editor, if you try to use the indent functionality on the first line, you receive this error...

Uncaught TypeError: Cannot read property 'nodeName' of null


Is there anything I can do about this? It isn't completely 'breaking', but it sure is obnoxious.

Failing Test Available Here :  

jsBin

Kiril Nikolov
Telerik team
 answered on 04 Dec 2013
3 answers
877 views
I want to put TreeView in DropDownList, but I've no idea how to realize it. Does Kendo support it?
Kim
Top achievements
Rank 1
 answered on 04 Dec 2013
0 answers
171 views
Hi, when I switch locales in my app, I am still seeing the english text in the page control (i.e. 1 to 10 of 800 items).  How can I have that text be the {current locale} text?  Here is a JSFiddle demonstrating the problem.

Also, the text associated with the paging buttons (first, prev, next, last) is still in English as well.  Is there a way within the framework to update these as well?

I found this JSFiddle, where they are using a template hooked into dataBound to specify the details of the current page, but I would expect this to be part of the framework where I set the locale and it is localized for me.

I just found the Messages section in the docs.  Do I need to include my own translations for each of these?

Aha!  Here is the page I was looking for.

Thanks,
--Ed
Ed
Top achievements
Rank 1
 asked on 03 Dec 2013
4 answers
251 views
I'm not sure if this post would be better suited in the Grid forum or the Color Picker forum, so I apologize if I chose the wrong location.

Kendo UI Version: 2013.3.1119
I am using the ASP.NET MVC markup for the grid

I have a grid that is using batch editing which has a cell that has an editor template that is an HSV Color Picker.
When I select the cell for editing, the widget is fine in all browsers except IE 11.

In IE 11, the widget loads correctly and also opens correctly, but the issue comes when I attempt to change the color by clicking on the drag handler to move it around the canvas on the screen.  I've included images of the before and after, but basically, the drag handler loads in the correct location, but when it is clicked, it immediately 'jumps' to the far left side of the page and refuses to drag to the right unless I take the cursor way to the right of the widget.

Here is my grid code and my detail template information.  Please let me know if you need any more information.
<script type="text/javascript">
    function RefCarrierRank_ErrorHandler(e) {
    }
 
    function RefCarrierRankEdit(e) {
        if (e.container[0].cellIndex == 2) {
            $(".k-selected-color").css("width", "100%");
            $("#RankColor").data("kendoColorPicker").open();
        }
    }
</script>
 
<div id="RefCarrierRankContainer">
    <h3 style="margin:1px;">Rank Dictionary</h3>
 
    @(Html.Kendo().Grid(Model.AdminModel.GlobalDictionary.RefCarrierRankModels)
        .Name("RefCarrierRank")
        .Columns(columns =>
        {
            columns.Bound(item => item.Name);
            columns.Bound(item => item.Rank)
                .EditorTemplateName("RefCarrierRank/Rank");
            columns.Bound(item => item.RankColor)
                .ClientTemplate("<div class='k-textbox' style='background-color:#=RankColor#; width:80px; height:20px;'></div>")
                .EditorTemplateName("RefCarrierRank/RankColor").Width(100);
            columns.Command(command =>
            {
                command.Destroy();
            }).Width(100);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
        .Events(events =>
        {
            events.Edit("RefCarrierRankEdit");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
        .Navigatable(navigatable => navigatable.Enabled(true))
        .Pageable(pageAction =>
        {
            pageAction.PageSizes(new int[] { 5, Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Count });
        })
        .Sortable()
        .Scrollable()
        .Filterable()
        .Resizable(resize => resize.Columns(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events =>
            {
                events.Error("RefCarrierRank_ErrorHandler");
            })
            .Sort(sort =>
            {
                sort.Add("Rank").Ascending();
            })
            .Model(model =>
            {
                model.Id(i => i.RefCarrierRankID);
                model.Field(i => i.Rank).DefaultValue(Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Max(i => i.Rank) + 1);
                model.Field(i => i.RankColor).DefaultValue("#a8a8a8");
            })
            .Read(read => read.Action("GetRefCarrierRanks", "Dictionary"))
            .Create(create => create.Action("CreateRefCarrierRanks", "Dictionary"))
            .Update(update => update.Action("UpdateRefCarrierRanks", "Dictionary"))
            .Destroy(delete => delete.Action("DeleteRefCarrierRanks", "Dictionary"))
        )
    )
</div>
@(Html.Kendo().ColorPicker()
    .Name("RankColor")
    .Value("#=RankColor#")
    .Opacity(true)
)
Jark Monster
Top achievements
Rank 1
 answered on 03 Dec 2013
5 answers
180 views
is there a way to have a hyperlink open in a browser? not inside of the app, but external to the app?

I set:  data-rel="external" target="_blank", but that just still opens it up inside of the app.
Michael
Top achievements
Rank 1
 answered on 03 Dec 2013
4 answers
478 views
Hi! I'm using a custom template to make my listview. It seems that kendo ui does make the templates since i see them on screen but the whole thing just hangs with the loading animation in the middle running indefinetly.

Firebug shows this:
Timestamp: 3.12.2013 14:09:09
Error: TypeError: t.getAttribute is not a function
Source File: http://localhost:44112/Resources/scripts/vendor/kendoUI/js/kendo.all.min.js
Line: 9
This is my code (i'm using IIS express and Visual Studio 2012 for development, i dont want to use MVVM):
<!DOCTYPE html>
<html>
<head runat="server">
    <style>
        .gumb {
            display: inline-block;
        }
 
        .container-gumbi {
            float: right;
            margin-top: 5px;
        }
 
        .kocka {
            display: inline-block;
        }
 
        .kockaimg {
            display: inline-block;
            vertical-align: middle;
        }
 
        p.info-text {
            margin: auto;
            font-size: 10px;
        }
 
        p.date-text {
            margin-top: 5px;
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 0px;
        }
 
        p.opis-text {
            margin-top: 5px;
            font-size: 11px;
            font-weight: 500;
            margin-bottom: 0px;
        }
 
        p.denar-text {
            margin-top: 5px;
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 0px;
        }
    </style>
    <title></title>
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="/../../../Resources/scripts/vendor/kendoUI/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="/../../../Resources/scripts/vendor/kendoUI/js/jquery.min.js"></script>
    <script src="/../../../Resources/scripts/vendor/kendoUI/js/kendo.all.min.js"></script>
</head>
<body>
    <div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView">
    <div class="head"> </div
    <ul id="custom-listview"></ul>
</div>
 
<<script type="text/x-kendo-template" id="customListViewTemplate">
    <li>
                    <div class="kockaimg">
                        <img width="50" height="50" src="../../../clipart-generic-logo-d2f5.png" />
                    </div>
                    <div class="kocka">
                        <h4><span>#:nazivNarocnika#</span></h4>
                    </div>
                </li>
                <li>
                    <div class="kocka">
                        <p class="info-text">
                            Datum lansiranja:<br />
                        </p>
                        <p class="date-text">#:dtLansiranja#</p>
                    </div>
                    <div class="kocka">
                        <p class="info-text">
                            Datum pričetka:<br />
                        </p>
                        <p class="date-text">#:dtPricetka#</p>
                    </div>
                    <div class="kocka">
                        <p class="info-text">
                            Datum zaključka:<br />
                        </p>
                        <p class="date-text">#:dtZakljucka#</p>
                    </div>
                </li>
                <li>
                    <p class="info-text">
                        Opis:<br />
                    </p>
                    <p class="opis-text">#:opis#</p>
                </li>
                <li>
                    <div class="kocka">
                        <p class="info-text">
                            Trenutna ponudba:<br />
                        </p>
                        <p class="denar-text">#:cena# €</p>
                    </div>
                    <div class="container-gumbi">
                        <div class="gumb">
                            <a class="k-button" data-icon="add" style="font-size: 10px" data-role="button" href="">Dodaj ponudbo</a>
                        </div>
                        <div class="gumb">
                            <a class="k-button" data-icon="info" style="font-size: 10px" data-role="button" href="">Podrobno</a>
                        </div>
                    </div>
                </li>
            </script>
    <script>
        var groupedData = [
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" },
       { nazivNarocnika: "Narocnik d.d.", dtLansiranja: "18.5.2013", dtPricetka: "21.5.2013", dtZakljucka: "5.6.2013", opis: "Bla bla bla.", cena: "8.000,00" }
        ];
 
        function mobileListViewTemplatesInit() {
            $("#custom-listview").kendoMobileListView({
                dataSource: kendo.data.DataSource.create({ data: groupedData }),
                template: $("#customListViewTemplate").html(),
                headerTemplate: "Ime razpisa"
            });
        }
        var app = new kendo.mobile.Application($("#mjav"), {
            skin: 'flat'
        });
    </script>
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Any ideas?
Kiril Nikolov
Telerik team
 answered on 03 Dec 2013
6 answers
217 views
I have an index.html with the follwing

<!--Home-->
       <div data-role="view" id="view-home" data-layout="drawer-layout-home" data-title="ZUOL.CH APP">
           <div>
               <div data-role="content" class="view-content" >
                   <div id="home-vers-markus" class="boxshadow">
                       <h4 >
                           Klicken Sie oben links auf das Icon um die Navigation zu öffnen
                       </h4>
                       <h5>Firmen, Vereine, Gemeinden, Links und vielese mehr.</h5>
                   </div>
               </div>
           </div>
       </div>
<!-- Drawer Home-->
       <div data-role="drawer" id="my-drawer-home" style="width: 270px" data-views="['/', 'view-home', 'view-home','view-witz', 'view-bild', 'view-wort']">
           <h1>ZUOL.CH App</h1>
           <ul data-role="listview" data-type="group" class="nobackground">
               <li>
                   <ul>
                       <li data-icon="home" id="dl-firmen" class="dl-firmen">
                           <a href="firmen.html#firmen-home" data-transition="none">Firmen</a>
                       </li>
                       <li data-icon="contacts" id="dl-vereine" class="dl-verein">
                           <a href="#view-vereine" data-transition="none">Vereine</a>
                       </li>
                       <li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">
                           <a href="#view-gemeinden" data-transition="none">Gemeinden</a>
                       </li>
                       <li data-icon="settings" id="dl-links" class="dl-links">
                           <a href="#view-links" data-transition="none">Links</a>
                       </li>
                       <li data-icon="settings" id="dl-links" class="dl-bild">
                           <a href="#view-bild" data-transition="none">Bild des Tages</a>
                       </li>
                       <li data-icon="settings" id="dl-links" class="dl-witz">
                           <a href="#view-witz" data-transition="none">Witz des Tages</a>
                       </li>
                       <li data-icon="settings" id="dl-links" class="dl-links">
                           <a href="#view-wort" data-transition="none">Wort zum Tag</a>
                       </li>
                   </ul>
               </li>
               <li>
                   <ul>
                       <li data-icon="about">
                           <a href="#drawer-about" data-transition="none">Über ZUOL.CH</a>
                       </li>
                       <li data-icon="globe">
                           <a href="#drawer-web" data-transition="none" >www.zuol.ch</a>
                       </li>
                   </ul>
               </li>
               <li>
                   <ul>
                       <li data-icon="action" id="dl-log-out">
                           <a id="bt_exit" onclick="exitFromApp()" data-icon="history">
                               Exit
                           </a>
                       </li>
                   </ul>
               </li>
           </ul>
       </div>
        
        
 
        <!-- Layout Home-->
       <div data-role="layout" data-id="drawer-layout-home">
           <header data-role="header">
               <div data-role="navbar">
                   <a data-role="button" data-rel="drawer" href="#my-drawer-home" data-icon="drawer-button" data-align="left"></a>
                   <span data-role="view-title">ZUOL.CH</span>
 
               </div>
           </header>
       </div>

now I have an firmen.html with the following

<!-- Firmen -->
       <div data-role="view" id="view-firmen-home" data-layout="drawer-layout-home" data-title="Firmen" >
           <div>
               <div data-role="content" class="view-content" >
           
                       <h2>Suchen nach</h2>
                       <ul data-role="listview" data-style="inset" data-type="group">
                           <li>
 
                               <ul>
                                   <li >
                                       <a href="#view-firmen-branchen">Branche</a>
                                   </li>
 
                               </ul>
                           </li>
                       </ul>
                       <ul data-role="listview" data-style="inset" data-type="group">
                           <li>
 
                               <ul>
 
                                   <li>
                                       <a href="#view-firmen-ort">Ort</a>
                                   </li>
 
                               </ul>
                           </li>
                       </ul>
                       <ul data-role="listview" data-style="inset" data-type="group">
                           <li>
 
                               <ul>
 
                                   <li>
                                       <a href="#view-firmen-a-z">Alphabet</a>
                                   </li>
                               </ul>
                           </li>
                       </ul>
                   </div>
 
               </div>
           </div>
   
 
       <!-- Branchen -->
       <div data-role="view" id="view-firmen-branchen" data-init="getBranchen" data-layout="drawer-layout-firmen" data-title="Firmen nach Branche"    >
            
               <div data-role="content" class="view-content" >
                   <ul id="filterable-branchen" class="listen"></ul>
               </div>
           
           <script type="text/x-kendo-tmpl" id="firmen-branchen-template">
               <div class="km-listview-link">
                   <a href="javascript:getFirmen('branche','#:User_branche#')">
                       <span>#:User_branche#</span>
                   </a>
               </div>
           </script>
       </div>
I want to have two use two different drawers

index.html#view-home -> data-layout-home -> #my-drawer-home
firmen.html#view-firmen-home  > data-layout-home -> #my-drawer-home
firmen.hmlt#view-firmen-branche -> data-layout-firmen -> #my-drawaer-firmen

I have not been able to get this to work.

Tried: put the code below in index.html not working
Tried: put the code in firmen.html not working either

The buttons do either nothing (console shows no error) or I get an error Uncaught TypeError: Cannot call method 'enable' of undefined

How should it be done.

If you split the mobile up in different .html files and want a drawer to be access from these different files how should it be done?

Kind Regards 

Markus





<!-- Drawer Firmen-->
        <div data-role="drawer" id="my-drawer-firmen" style="width: 270px" data-views="['/', 'view-firmen-branche','view-firmen-ort']">
            <h1>ZUOL.CH App</h1>
            <ul data-role="listview" data-type="group" class="nobackground">
                <li>
                    <ul>
                        <li data-icon="home" id="dl-home" class="dl-home">
                            <a href="#drawer-home" data-transition="none">Zurück</a>
                        </li>
                        <li data-icon="home" id="dl-firmen" class="dl-firmen">
                            <a href="firmen.html#view-firmen-branche" data-transition="none">Branch</a>
                        </li>
                        <li data-icon="contacts" id="dl-vereine" class="dl-verein">
                            <a href="firmen.html#view-firmen-ort" data-transition="none">Ort</a>
                        </li>
                        <li data-icon="bookmarks" id="dl-gemeinden" class="dl-gemeinden">
                            <a href="firmen.html#view-firmen-a-z" data-transition="none">A - Z</a>
                        </li>
 
                    </ul>
                </li>
 
            </ul>
 
        </div>
         
       <!-- Layout Firmen-->
        <div data-role="layout" data-id="drawer-layout-firmen">
            <header data-role="header">
                <div data-role="navbar">
                 <a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button"  data-align="left"></a><a data-role="button" data-rel="drawer" href="#my-drawer-firmen" data-icon="drawer-button"  data-align="left"></a>
                    <span data-role="view-title">ZUOL.CH - Firmen</span>
                </div>
            </header>
        </div>



Markus
Top achievements
Rank 2
 answered on 03 Dec 2013
11 answers
109 views
Hi,
I have a chart that uses a date axis and i wanted to plot recession shading based on its exact dates on the categoryaxis. I figured I use plotbands for this but I see that the "to" and "from" only takes numbers. Is there a workaround for using dates?

Thanks,
Tonih
Iliana Dyankova
Telerik team
 answered on 03 Dec 2013
3 answers
1.2K+ views
I want to create a column in the grid with hyperlink to "View" a popup for details of a record. I can easily create this as a button with

columns.Command(command =>
    {
        command.Custom("View").Click("showDetails");
    }

and then

    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();

However, what I'd like to do is something like 

columns.Template(@<text></text>).ClientTemplate(@"<a onclick=""showDetails(#= ID#)"" href=""javascript:void(0)"">View</a>");

Obviously this does not work as the parameter for showDetails(...) is not the id. I'm not able to figure out how to do this manually. Nor am I able to see if my proposed way of doing this is appropriate or perhaps there is a much better way to achieve this?

I have successfully done this for Edit and Delete like this:

columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-button-icontext k-grid-edit"" href=""\#"">Edit</a>").Width(30);
columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-button-icontext k-grid-delete"" href=""\#"">Delete</a>").Width(50);

but these are obviously a bit different beasts than the popup view function I want to implement.

I fail to find a solution for this in other forum posts. My apologies if this has been covered already.

Best regards,
Baldvin
Dimiter Madjarov
Telerik team
 answered on 03 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?