Telerik Forums
Kendo UI for jQuery Forum
6 answers
229 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
124 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.3K+ 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
2 answers
368 views
I am creating a fairly simple datasource, with at least two filters but possibly more depending on what the user has set up.  When I have two filters it is fine.  I set the datasource filter up as follows:

{
logic: "and",
filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" },
]
}

This works correctly when I fetch the data.  However if I have a 3rd filter I get the error: "Unable to cast object of type 'Kendo.Mvc.CompositeFilterDescriptor' to type 'Kendo.Mvc.FilterDescriptor'."

I have tried a few structures for the filter:
{
logic: "and",
filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" },
    { field: userName, operator: "eq", value: "JBLOGGS" }
]
}

{
logic: "and",
filters: [ {
    logic: "and",
    filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" }] },
    { field: userName, operator: "eq", value: "JBLOGGS" } ]
    }
]
}

And other variations, but all of them give the same error.

Any help would be appreciated.
Thanks in advance.
Karl
Top achievements
Rank 1
 answered on 03 Dec 2013
1 answer
93 views
Hi,
Please refer to my attached screen shot. As you can see when we enable checkboxes in the TreeView, the Tree Node's image become misaligned. It is not vertically centralized and it doesn't looks good.
We are using the latest Internal Release 2013.3.1127.
Please advise what can be done to fix this alignment issue?
Thank you.
Iliana Dyankova
Telerik team
 answered on 03 Dec 2013
2 answers
80 views
Hello,

I'm working on a web application using Kendo UI Web and I need to implement responsive design. I read that in release 2013.3 the UI widgets support responsive design. Does it mean that I don't need Bootstrap any more if I want to provide responsive behavior in my app?

Thanks.
Olivier
Top achievements
Rank 1
 answered on 02 Dec 2013
2 answers
138 views
Hello !

i'm currently running some test on kendo ui Class to get a clean code in one of my project but i'm getting some errors i don't know how to solve.

here is my simple sample of code : 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link href="styles/kendo.common.min.css" rel="stylesheet" />
  <link href="styles/kendo.default.min.css" rel="stylesheet" />
  <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
  <link href="styles/index.css" rel="stylesheet" />
</head>
<body onload="onBodyLoad()" style="height:100%; padding-bottom: 100%">
  <div data-role="view" id="test">
      <a href="#test" class="button" data-role="button" data-click="test.myAlert" data-att="attributeTest" data-icon="search">buttonTest</a>
  </div>
  <script src="lib/jquery.min.js"></script>
  <script src="lib/kendo.all.min.js"></script>
  <script src="init/cordovaInit.js"></script>
 
<script type="text/javascript">
  var Test = kendo.Class.extend({
 
    init: function() {
    }
 
    myAlert: function(e) {
      alert("test");
    }
});
</script>
 
    <script>
    var app = new kendo.mobile.Application($(document.body), { skin: "flat" });
    var test = new Test();
    test.myAlert();
    </script>
  </body>
  </html>
and here are the error i'm getting when i run it on chrome 

Uncaught SyntaxError: Unexpected identifier index.html:24
Uncaught ReferenceError: Test is not defined index.html:32
Uncaught TypeError: Cannot read property 'myAlert' of undefined
i really don't know how to get through that ..

my wish is to implement a class that does simple class's job like methods, attributes and so on. i want to combine that with data-clic properties and the data-attribute feature that kendo ui implements.

thank you for helping  and sorry if i'm posting in the wrong place but i haven't seen any section about kendo ui class .. :)
Morgan
Top achievements
Rank 1
 answered on 02 Dec 2013
2 answers
213 views
I have added to menu widgets the most right is vertical, each use the same dataSource.  The problem is the expand Icon point up on each of the Menus.  The vertical menu should point to the right, and the horizontal should point down.

I can find no way to configure this Icon direction?
Karl Mikesell
Top achievements
Rank 1
 answered on 02 Dec 2013
2 answers
707 views
Hi,

I am a experience developer but a completely Kendo newbie and doing some initial tests to see if this can be a platform for our application. I have gotten a grid to work loading data from my database. But, I cannot get sorting for function for the numeric column, it always sorts as a string. I have created a model where the data type is set as number, and according to my understanding this should now parse the json data into that model and then the grid should know that this is a number, but it stills sorts as a string. Data comes from json, one line looks like this:

{"orderId":"65-68455-0b0b7","transact":"414583245","id":"414583245","paytype":"VISA","amount":"7200.00","amountBase":720000,"currency":"NOK","currencyCode":578,"test":"1","time":"2011-03-03 21:53:15","cardnomask":"XXXXXXXXXXXX0000","cardcountry":null,"refunded":0,"refundable":720000,"pids":[68455],"receipt":{"68455":false},"persons":"KEtil Test"}

My code looks like this:
$(document).ready(function() {
 
var transactionModel = kendo.data.Model.define({
    fields: {
        id: "transact",
        persons: {
            editable: false
        },
        time: {
            editable: false,
            type: "date",
        },
        transact: {
            editable: false
        },
        amount: {
            editable: false,
            type: "number",
        },
    }
});
 
var dataSource = new kendo.data.DataSource({
transport : {
read : "/wwwdocs/ajax.php",
schema : {
data : transactionModel
},
},
}
);
 
$(function() {
$("#transactions").kendoGrid({
dataSource : dataSource,
columns : [ {
field : "persons",
title : "Navn",
width : 300
}, {
field : "time",
title : "Tid",
width : 160,
}, {
field : "transact",
title : "Transaksjons-id",
width : 160
}, {
field : "amount",
title : "Sum",
width : 160
}, ],
filterable : true,
sortable : true,
groupable: true,
});
});
});
Ketil
Top achievements
Rank 1
 answered on 02 Dec 2013
1 answer
415 views
Hi,
I am trying to get the functionality seen here:
http://www.jtable.org/
If you add or edit a row, there is some nice css that highlights the row.

What I have tried so far (using the MVC wrappers):
.Events(e => e
        .Save("onSave")
)

function onSave(e) {
        var grid = $("#grid").data("kendoGrid");
        var id = e.model.ID;
        var uid = grid.dataSource.get(id).uid;
        $("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("row-changed");
}

.row-changed {
        background-color: red;
 }

Nothing is happening :(
Thanks!
Iliana Dyankova
Telerik team
 answered on 02 Dec 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?