Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,705 questions
5 answers
122 views
Orientation change in iOS7.1 (iPhone 4) with minimal-ui meta-tag doe
Hi,

With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):

<meta name="viewport" content="minimal-ui" />

Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.

This won't occur if the app is loaded from a home screen web app shortcut (toolbars are hidden automatically).

Slightly modified example code from Telerik's demos below (attached too). 

Original: http://demos.telerik.com/kendo-ui/mobile/layout/index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimal-ui" />
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
</head>
<body>
    <div data-role="view" data-layout="layout" data-show="layoutShow" id="layoutView">
    <p>
        This examples shows the platform specific layouts. Change the OS to see how the header and footer changes.
    </p>
    <p>
        With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):
    </p>
    <p>
        <code><meta name="viewport" content="minimal-ui" /></code>
    </p>
    <p>
        Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.
    </p>
</div>
 
<div data-role="layout" data-id="layout" data-platform="ios">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            <span data-role="view-title">iOS Platform</span>
        </div>
    </header>
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="contacts">Profile
            </a><a data-icon="settings">Settings</a>
        </div>
    </footer>
</div>
 
<div data-role="layout" data-id="layout" data-platform="android">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title">Android Platform</span>
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
        </div>
    </header>
 
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="history">Sales</a>
            <a data-icon="settings">Settings</a>
        </div>
    </footer>
</div>
 
<div data-role="layout" data-id="layout" data-platform="blackberry">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            <span data-role="view-title">BlackBerry platform</span>
        </div>
    </header>
 
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="favorites">Rating</a>
            <a data-icon="settings">Settings</a>
        </div>
    </footer>
</div>
 
<div data-role="layout" data-id="layout" data-platform="wp">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            <span data-role="view-title">Windows Phone platform</span>
        </div>
    </header>
 
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a data-icon="home">Home</a>
            <a data-icon="globe">Global</a>
        </div>
    </footer>
</div>
 
<style scoped>
    #layoutView .km-view-title
    {
        visibility: inherit;
    }
 
    .km-android #layoutView .km-view-title
    {
        display: block;
        position: static;
    }
</style>
 
 
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>


General Discussions
Petyo
Telerik team
 answered on 10 Sep 2014
1 answer
293 views
Disable months in year view
Hi,

I need a month in the YEAR view to be visible but disabled. I.E I do not want to set the max date for the datepicker but want the month to have a CSS that shows it to be disabled (like background-color:lightgray)

This works nicely for MONTH view :

I tried with the below code but it did not work. Invalid template error.
Do we have any template for YEAR view to customize month display?

startpicker.setOptions({
     format: "MMMM, yyyy",
     value: startPickerValue.getMonth(),
     month: {
         content: "<div style='background-color:#= data.date < ($('#startDatePicker').data('kendoDatePicker').max()) >  ? 'cyan'  : 'lightgray' #'>#=data.value#</div>"
     }
 });



DatePicker
Georgi Krustev
Telerik team
 answered on 10 Sep 2014
1 answer
340 views
Double click cell edit in angularjs
Gday,

I've just started playing around with Kendo and I'm trying to enable cell edit on double click in Angularjs. 

I have got it working but I am using jquery event handlers and I was wondering whether there was a more 'Angular' way to do it via the templates for eg.

Also I saw some threads where people were using the delegate method - is that a better way to do this do you think?

Thanks,
Will

​var app = angular.module('myApp', ["kendo.directives"]);
app.controller('MyController', function ($scope) { 
 $scope.gridOptions = {
  // standard grid initialisation 
 }

 var grid = $("#grid");
 grid.on("dblclick", "tr.k-state-selected td", function () {
     var $this = $(this);
     grid.data("kendoGrid").editCell($this);
 
     $this.focusout(function(){
         // for input elements that use widgets they will lose focus when the widget is rendered
             // so we need to rebind the foucsout to the widget
         var $widget = $('.k-widget', $this);
         if ($widget.length == 0) {
             if(!$(".k-grid-edit-row input").hasClass("k-invalid")){
                 //console.log('focusout');
                 $("#grid").data("kendoGrid").closeCell();
             }
         }else{
             //console.log('widget editing');
             $widget.focusout(function() {
                 //console.log('widget focusout');
                 if(!$(".k-grid-edit-row input").hasClass("k-invalid")) {
                     $("#grid").data("kendoGrid").closeCell();
                     $widget.off('focusout');
                 }
             });
         }
 
     });
 });
}
Grid
Alexander Valchev
Telerik team
 answered on 10 Sep 2014
1 answer
544 views
[Solved] Refresh in Firefox and autoUpload:true
It seems that a refresh (F5) in Firefox automatically re-uploads a previously uploaded file. In other browsers a browser refresh resets the control to its initial state as expected.

You can reproduce it with the upload demo http://demos.telerik.com/kendo-ui/upload/events by selecting a file (uploaded) and hitting F5. You can see that the file is automatically remembered and uploaded.

Any way to avoid this?

Thanks
Upload
Dimiter Madjarov
Telerik team
 answered on 10 Sep 2014
3 answers
101 views
KendoWeb data-reorderable does not work when the the data-bind of the grid uses dataSource object
 I have a div with id="grid" which uses data-bind attribute, but when I add data-reorderable attribute it does not work at all.this is the div where I want to set data-reorderable="true"

<div id="grid" data-role="grid" data-sortable="true" data-editable="false"
data-navigatable="true" data-resizable="true" data-reorderable="true"
data-pageable="{numeric: true, buttonCount: 5, previousNext: true, info: true}" data-selectable="True"
data-columns='[{"field": "LoadDisplayId", "title": "Load Id", "width": "80px"}, {"field": "BeginDate", "title": "Start Date", "width": "80px", "format": "{0:MM/dd/yyyy}"}, {"field": "EndDate", "title": "End Date", "width": "80px", "format": "{0:MM/dd/yyyy}"},{"field": "RouteName", "title": "Route Identifier", "width": "100px"},{"field": "Origin", "title": "Origin", "width": "200px"},{"field": "Destination", "title": "Destination", "width": "200px"},{"field": "BillTo", "title": "BillTo", "width": "200px"},{"field": "Carrier", "title": "Carrier", "width": "200px"}]'
data-bind="source: gridSource, events: { change: change }">
</div>
the problem is in the data-bind="source: gridSource,... the gridSource comes from observable object (for clarity, I've substituted an array for my actual remote data):

viewModel = kendo.observable({
 
gridSource: new kendo.data.DataSource({
         data:[
                    {
                        LoadId: 125642,
                        LoadDisplayId: "L138094",
                        StatusId: 285,
                        Status: "Pending",
                        RouteName: "May200",
                        Origin: "A  Raymond Tinnerman Auto, INC ",
                        Destination: "B L Downey Company Inc.",
                        BillTo: "Behr Charleston",
                        Carrier: "AAA Cooper",
                        BeginDate: "04/01/2013",
                        EndDate: "04/01/2013",
                        NextActionDate: "04/01/2013",
                        NextAction: "Ready To Tender",
                        CheckCallException: false,
                        TenderException: false,
                        HasPendingCustomerRequest: null
                    },
                    {
                        LoadId: 125642,
                        LoadDisplayId: "L100004",
                        StatusId: 285,
                        Status: "Pending",
                        RouteName: "test",
                        Origin: "A  Raymond Tinnerman Auto, INC ",
                        Destination: "B L Downey Company Inc.",
                        BillTo: "Behr Charleston",
                        Carrier: "AAA Cooper",
                        BeginDate: "04/01/2013",
                        EndDate: "04/01/2013",
                        NextActionDate: "04/01/2013",
                        NextAction: "Ready To Tender",
                        CheckCallException: false,
                        TenderException: false,
                        HasPendingCustomerRequest: null
                    }
            ]
  })
 
});
the columnreordering property does not work on the Front End .... but if I use the array directly it works (not referencing kendo.data.DataSource):

gridSource: [
                    {
                        LoadId: 125642,
                        LoadDisplayId: "L138094",
                        StatusId: 285,
                        Status: "Pending",
                        RouteName: "May200",
                        Origin: "A  Raymond Tinnerman Auto, INC ",
                        Destination: "B L Downey Company Inc.",
                        BillTo: "Behr Charleston",
                        Carrier: "AAA Cooper",
                        BeginDate: "04/01/2013",
                        EndDate: "04/01/2013",
                        NextActionDate: "04/01/2013",
                        NextAction: "Ready To Tender",
                        CheckCallException: false,
                        TenderException: false,
                        HasPendingCustomerRequest: null
                    },
                    {
                        LoadId: 125642,
                        LoadDisplayId: "L100004",
                        StatusId: 285,
                        Status: "Pending",
                        RouteName: "test",
                        Origin: "A  Raymond Tinnerman Auto, INC ",
                        Destination: "B L Downey Company Inc.",
                        BillTo: "Behr Charleston",
                        Carrier: "AAA Cooper",
                        BeginDate: "04/01/2013",
                        EndDate: "04/01/2013",
                        NextActionDate: "04/01/2013",
                        NextAction: "Ready To Tender",
                        CheckCallException: false,
                        TenderException: false,
                        HasPendingCustomerRequest: null
                    }
            ]
The problem is that when I instantiate a new kendo.data.DataSource object,it creates a conflict. How can I solve/avoid that issue? .... (In my case I have to use new kendo.data.DataSource object )

Grid
Alexander Valchev
Telerik team
 answered on 10 Sep 2014
1 answer
129 views
Display problem with IE and Bootstrap theme
Hi,

I'm experiencing display problems with the DatePicker and Bootstrap theme in IE11. This also counts to the DateTimePicker and ComboBox widgets. It can be easily reproduced with the DatePicker demo. Attached to this post you will find a screenshot showing the Problem.

Thanks,
Holger
DatePicker
Iliana Dyankova
Telerik team
 answered on 10 Sep 2014
2 answers
133 views
Per File Meta-info in Async Mode with AutoUpload
Hi Guys
When the user drags a bunch of files into the upload widget, the files are being stored on the server and a logical file incl. a file version is being created
in the database backend assigning a unique ID to each uploaded file. I modified the widged in a way that the user can meanwhile edit some meta informations
like the name, the responsible person, whether a pdf view shall be generated and so on. This happens simultaneously while uploading on a "per file base". When all files are uploaded completely a button becomes active to commit all meta information. The problem is, that at this point (when the commit button is pressed after uploading all files), I need to know, which local "row" has which FileID on the server.

I didn't think this would be a problem in the first place as I realized, that a separate "upload" event and corresponding "save" request is being performed for each file (even when selecting multiple files at once). So I thought, I simply send the uid to the server by evt.data = {uid: file.uid) and the "save" handler on the server side returns a tuple (uid, FileID) which I can catch in the success event and assign the fileID to the matching DOM element containing the appropriate uid data attribute. What I didn't realize was, that it seems to be impossible to know for which file a "upload" event is being fired, so I don't know which uid to select as I always get the entire array of selected files.

Am I missing something here?

Best regards
Upload
Dimiter Madjarov
Telerik team
 answered on 10 Sep 2014
1 answer
243 views
DropDownList with Kendo Mobile - Selected Item is not visible when list opens
I'm using the DropDownList within a Kendo Mobile application targeting Android (Samsung S4 in particular). The scenario is that I have a drop down list with many items and one of the later items is selected. When the list  is 'opened', there are two many items to be visible at one time so scrolling is required. The normal behaviour for the widget (when run as a web widget on a desktop browser) is that when the drop down list is opened, the selected item is located in the visible portion of the opened widget. Is this a bug or am I missing something?

When viewed on an Android Samsung S4 (or using Chrome Developer tools to emulate this device), the opened drop down list does not scroll to the selected item.

I have created this Dojo Snippet Kendo Mobile use of DropDownList to illustrate the problem. Use this to view the behaviour http://runner.telerik.io/fullscreen/@martinho/oKAj/3
DropDownList
Kiril Nikolov
Telerik team
 answered on 10 Sep 2014
1 answer
126 views
Its a bug ?
<!DOCTYPE html>
<html>
<head>
    <title>Images</title>
    <meta charset="utf-8">
    <script src="client/js/jquery-1.11.1.min.js"></script>
     
    <link href="client/style/kendo.common.min.css" rel="stylesheet">
    <link href="client/style/kendo.metro.min.css" rel="stylesheet">
    <link href="client/style/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="client/style/kendo.dataviz.metro.min.css" rel="stylesheet" />
    <script src="client/js/kendo.all.min.js"></script>
</head>
<body>
    <a href='#' style='margin-left:10px;' onclick="start();">Start</a>
        
    <table class="orgaltdata">
        <thead>
            <tr>
                <th>Сайт</th>
                <th>Производитель</th>
                <th>Название</th>
                <th>Код</th>
                <th>Цена</th>
                <th>Склад</th>
                <th>Кор</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>favorit-auto.ru</td>
                <td>J+P Group</td>
                <td>Датчик износа тормозных колодок задний</td>
                <td>1397300500</td>
                <td>47,90</td>
                <td>46</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
 
<script>
 
    function start()
    {
        $(".orgaltdata").kendoGrid
            ({
                //height: 550,
                //sortable: true
            });
    }
 
</script>  
     
</body>
</html>

Ater press start button, the Grid not shown.
Grid
Kiril Nikolov
Telerik team
 answered on 10 Sep 2014
3 answers
314 views
Hyperlink to remote views not loading remote view within layout in Index.html
I can't figure out why if you have a hyperlink to a remote view as a drawer item, it will correctly render the remote view within the Index.html page and have all the copied elements from the layout...i.e. the header and script references, etc.

See link in drawer item below: "views/business.html?businessId=3".

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
 
    <script src="cordova.js"></script>
    <script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>
    <script src="scripts/app.js"></script>
 
</head>
<body id="body">
  
  <div data-role="layout" data-id="main">
    <div data-role="header">
      <div data-role="navbar">
        <span data-role="view-title"></span>
        <a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
      </div>
    </div>
 
    <!-- application views will be rendered here -->
     
  </div>
 
  <!-- application drawer and contents -->
  <div data-role="drawer" id="appDrawer" style="width: 200px" data-title="Navigation" data-position="left" data-swipe-to-open="false">
    <div data-role="header">
      <div data-role="navbar">
        <span data-role="view-title"></span>
      </div>
    </div>
    <ul data-role="listview">
      <li>
        <a href="views/home.html" data-icon="home">Home</a>
      </li>
      <li>
        <a href="views/map.html">Map</a>
      </li>
      <li>
        <a href="views/settings.html" data-icon="settings">Settings</a>
      </li>
      <li>
        <a href="views/contacts.html" data-icon="contacts">Contacts</a>
      </li>
        <li>
        <a href="views/business.html?businessId=3" data-icon="contacts">Business Test</a>
      </li>
    </ul>
  </div>      
 
</body>
</html>

But, if I put his same hyperlink in another view, it will navigate to that view, but it will NOT copy all the layout elements like the head section with the script references. I just get the html elements of the remote view....
<html><head></head><body><div id="businessDetail" data-role="view" data-title="Business Details" data-layout="main" data-model="APP.models.business" data-init="initBusinessDetails">
    <!--<label for="Name">Name:</label><input id="name" data-bind="value: data.name" />-->
    <img style="float:left;width:50px;margin-right:5px;" data-bind="attr: { src: data.image_url }">
    <div style="float:left;display:inline-block;">
        <span data-bind="text: data.name"></span><br>
        <span data-bind="text: data.address1"></span><br>
        <span data-bind="text: data.city"></span>, <span data-bind="text: data.postal_code"></span>
    </div>
</div>
</body></html>
View
Petyo
Telerik team
 answered on 10 Sep 2014
Narrow your results
Done
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
SmartPasteButton
PromptBox
SegmentedControl
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Learn how
1532 1533
1534
1535 1536
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how