Telerik Forums
Kendo UI for jQuery Forum
1 answer
138 views
<div id="wms-app"></div>
 
<script>
  var router, layout;
   
    var loginView = new kendo.View("view-login", { show: function(e){
                                                        alert("login");
                                                        $('input').keypress(function(event) {
                                                            if(event.which == 10 || event.which == 13) {
                                                                event.preventDefault();
                                                                window.location = document.getElementById('textButton').href;
                                                            }
                                                        });
                                                   }, wrap: false });  
     
    // setup layout
    layout = new kendo.Layout("layout-template1", { show: function(e){
                                                        alert("temp");
                                                        var pN = document.getElementById("wms-content").parentNode;
                                                        pN.style = "height:100%";
                                                    } });
   
    layout.render("#wms-app");
 
    // define a default view
    layout.showIn("#wms-content", loginView);
     
    // define a router with a basic routes
    router = new kendo.Router();
</script>
   
<script id="view-login" type="text/x-kendo-template">
    <div id="loginBox">
        <div id="login-header">
            LAPS
        </div>
 
        <input id='inputuser' class="k-textbox one-edge-shadow" placeholder="Username"></input>
        <input id='inputpasswd' type="password" class="k-textbox one-edge-shadow" placeholder="Password"></input>
         
        <a id="textButton" class="k-button one-edge-shadow" href="#/main">LOGIN</a>
    </div>
</script>
   
<script id="layout-template1" type="text/x-kendo-template">
    <div id="wms-content"></div>
</script>

 

 The alert for the layout gets triggerd but the alert for the view not! why??

 

Thank you

Petyo
Telerik team
 answered on 10 Apr 2015
1 answer
189 views

Hi,

I followed this demo(http://demos.telerik.com/kendo-ui/sortable/integration-tabstrip) to integrated the sortable control to tabstrip,

because in our project the tab content contain iframe, every time after sort the tab, the tab content will reload, this is annoying.

My question is:
is there a way to just sort the tab not the tab content?
Every tab content wrapper has an id, i think there's no need to reorder it, this will introduce extra rendering for the browser.

 

Thanks,

Michael

Petyo
Telerik team
 answered on 10 Apr 2015
2 answers
200 views

Hi,

 I am trying to use Restangular with a Kendo grid. I have my datasource returning Restangular objects that are being displayed in the grid. The problem I am having is that the data object that is passed into the datasource `update`, and `destroy` methods is stripped of its Restangular prototype.  

Why is this happening and is there a way to prevent the overwriting of the prototype?

 

Thanks!

Zohar Jackson

Zohar
Top achievements
Rank 1
 answered on 10 Apr 2015
14 answers
844 views
I am converting an existing calendar system, to this much more robust method.

The problem I am having right now actually comes from the slightly different ways things work, in the other calendar I was using, when you wanted to delete something, I could get the ID, send that to the controllers, then to the stored procedures in SQL Server to delete that specific item. I would very much prefer to continue this line of coding.,

So as part of the demo:

transport: {
  read: {
    dataType: "jsonp"
  },
  update: {
    dataType: "jsonp"
  },
  create: {
    dataType: "jsonp"
  },
  destroy: {
    dataType: "jsonp"
  },
  parameterMap: function(options, operation) {
    if (operation !== "read" && options.models) {
      return {models: kendo.stringify(options.models)};
    }
So, I either need to get the ID of the event, that has been selected for deletion, and then pass that value to the DB... or?

I havent actually used a lot of the datasources for this kind of thing just yet, typically we'd actually just use the datasource to display data, then get the ID out of the data source, and do something with that (delete, edit, etc)

So, little help?
Eric
Top achievements
Rank 1
 answered on 10 Apr 2015
1 answer
224 views

I am trying to do a stacked bar chart. In the tooltip i want to show the running total of stacked bar. Is there any way i can do that ?

e.g. in the below example. First stack consist of two parts 4.83 and 0.09, i want to show in the tooltip (4.83+0.09=4.92) but could not find a way to do that. Which property should i use in the tooltip, currently its like that:

 template: "#= series.name # : #= series.data #"

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>
    <script>
        function createBarChart() {
        $("#chart").kendoChart({
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                name: "Target",
                stack: "Target & Stretch",
                data: [4.83]
            }, {
                name: "Stretch",
                stack: "Target & Stretch",
                data: [0.09]
            }, {

                name: "Actual",
                stack: "Actual",
                data: [4.92]
            }],
            seriesColors: ["#cd1533", "#000000", "#00ff00"],
            valueAxis: {
                min: 0,
                labels: {
                    template: "#= kendo.format('{0:N}', value ) # "
                },
                line: {
                    visible: true
                }
            },
            categoryAxis: {
                categories: ["Target & Actual"],
                labels:{
                    visible: false
                },
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name # : #= series.data #"
            }
        });
    }

        $(document).ready(createBarChart);
        $(document).bind("kendo:skinChange", createBarChart);
    </script>
</div>

Iliana Dyankova
Telerik team
 answered on 10 Apr 2015
2 answers
150 views

Is it possible to link multiple collapsible div containers together in operation so that only one can be open at a time?

Right now this is how I have it operating. It works, but I'm not sure if this is the best way to accomplish such a thing.

 

onCollapsibleExpand: function(e){
        var thisID = $(this.element).attr("id");
        $(".km-collapsible").each(function(k,v){ 
            // if not clicked item and is currently visible 
            if( ($(this).attr("id") != thisID) && $(this).is(":visible") ){
                $(this).data("kendoMobileCollapsible").collapse();
            }
        });
    },

David
Top achievements
Rank 2
 answered on 10 Apr 2015
1 answer
257 views

I have been tasked with adding a Login page to a Kendo UI Mobile project.  The Login page needs to appear first when the user opens the application.  I also need to make this application an SPA application, using the router (or not using the router is easier).

Here is the existing index.html:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>Global Client Dashboard</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            -->
             
            <!-- CSS -->
            <link rel="stylesheet" href="css/main.css">
            <link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />
             
            <!-- jQuery -->
            <!-- Using the jQuery in Kendo UI -->
            <script src="js/libs/kendoui/js/jquery.min.js"></script>
             
            <!-- Angular JS -->
            <script src="js/libs/kendoui/js/angular.min.js"></script>
             
            <!--  Kendo UI -->
            <script src="js/libs/kendoui/js/kendo.all.min.js"></script>
             
            <!-- application scripts -->
            <script src="js/app.js"></script>
             
        </head>
        <body style="display:none;" kendo-mobile-application k-hash-bang="true" ng-app="gcdApp">
             
            <!--application UI goes here-->
             
            <!--  Accounts -->
            <kendo-mobile-view id="accounts" k-title="'Customer Accounts'" k-layout="'default'" ng-controller="AccountsController">
                <kendo-mobile-list-view id="accountslist" class="item-list"
                    k-template="templates.accountsTemplate" k-data-source="gcdAccounts.accountsDataSource">
                </kendo-mobile-list-view>
            </kendo-mobile-view>
             
            <!--  Metrics - Historical Performance -->
            <kendo-mobile-view id="metrics" k-transition="'slide'" k-title="'Historical Performance'" k-layout="'default'" ng-controller="MetricsController" k-on-show="setCurrentItem(kendoEvent)">
                <kendo-mobile-header>
                    <kendo-mobile-nav-bar>
                        <kendo-mobile-back-button k-align="'left'">Accounts</kendo-mobile-back-button>
                        <kendo-view-title>Historical Performance</kendo-view-title>
                    </kendo-mobile-nav-bar>
                </kendo-mobile-header>
                <kendo-mobile-content>
                    <h2>{{gcdAccounts.currentItem.custname}}</h2>
                     
                    <!-- Client Experience Metric - Transaction -->
                    <div style="margin-left:5px;">
                        <div kendo-chart class="chart-halfwidth chart-left-top"
                             k-title="{ text: 'Client Experience Metric - Transaction' }"
                             k-legend="{ position: 'bottom' }"
                             k-series-defaults="{ type: 'column', stack: true, categoryField: 'month', labels: {visible: false} }"
                             k-series="[
                                             { field: 'q2avg', name: 'Avg', color: 'green' },
                                             { field: 'miss', name: 'Miss', color: 'red' }
                                         ]"
                             k-value-axis="{ min:0, max:10, plotBands: [{ from: 8.0, to: 8.05, color: 'black' }] }"
                             k-category-axis="{ labels:{ visible:true } }"
                             k-data-source="cexpDataSource"
                             k-series-click="transactionClicked" >
                        </div>
                    </div>
                     
                    <!-- Hardware Billing Accuracy -->
                    <div style="margin-left:5px;">
                        <div kendo-chart class="chart-halfwidth chart-right-top"
                             k-title="{ text: 'HW Billing Accuracy' }"
                             k-legend="{ position: 'bottom' }"
                             k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                             k-series="[
                                             { field: 'okcnt', name: 'Make', color: 'green' },
                                             { field: 'defects', name: 'Miss', color: 'red' }
                                         ]"
                             k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                             k-category-axis="{ labels:{ visible:true } }"
                             k-data-source="hwbillDataSource">
                        </div>
                    </div>
                     
                    <!-- Dispute Cycle Time -->
                    <div style="margin-left:5px;">
                        <div kendo-chart class="chart-halfwidth chart-left"
                             k-title="{ text: 'Dispute Cycle Time' }"
                             k-legend="{ position: 'bottom' }"
                             k-series-defaults="{ type: 'column', categoryField: 'month', labels: {visible: false} }"
                             k-series="[
                                             { field: 'cycletime', name: 'Cycle Time', color: 'green' }
                                         ]"
                             k-value-axis="{ min:0, max:60, plotBands: [{ from: 30, to: 30.3, color: 'black' }] }"
                             k-category-axis="{ labels:{ visible:true } }"
                             k-data-source="dctDataSource">
                        </div>
                    </div>
                     
                    <!-- On Time Delivery -->
                    <div style="margin-left:5px;">
                        <div kendo-chart class="chart-halfwidth chart-right"
                             k-title="{ text: 'On Time Delivery' }"
                             k-legend="{ position: 'bottom' }"
                             k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                             k-series="[
                                             { field: 'okcnt', name: 'Make', color: 'green' },
                                             { field: 'defects', name: 'Miss', color: 'red' }
                                         ]"
                             k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                             k-category-axis="{ labels:{ visible:true } }"
                             k-data-source="otdDataSource">
                        </div>
                    </div>
                     
                    <!-- Services Billing Accuracy -->
                    <div style="margin-left:5px;">
                        <div kendo-chart class="chart-halfwidth chart-left"
                             k-title="{ text: 'Services Billing Accuracy' }"
                             k-legend="{ position: 'bottom' }"
                             k-series-defaults="{ type: 'column', stack: { type: '100%' }, categoryField: 'month', labels: {visible: false} }"
                             k-series="[
                                             { field: 'okcnt', name: 'Make', color: 'green' },
                                             { field: 'defects', name: 'Miss', color: 'red' }
                                         ]"
                             k-value-axis="{ plotBands: [{ from: 0.95, to: 0.955, color: 'black' }] }"
                             k-category-axis="{ labels:{ visible:true } }"
                             k-data-source="svcbillDataSource">
                        </div>
                    </div>
                 
                </kendo-mobile-content>
            </kendo-mobile-view>
             
            <!-- Header and Footer -->
          <kendo-mobile-layout k-id="'default'">
            <kendo-mobile-header>
                <kendo-mobile-nav-bar>
                    <kendo-view-title></kendo-view-title>
<!--                    <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> -->
                </kendo-mobile-nav-bar>
            </kendo-mobile-header>
         
            <kendo-mobile-footer>
                <kendo-mobile-tab-strip>
                    <a href="#!accounts" data-icon="home">Home</a>
                    <a href="views/about.html" data-icon="info">About</a>
                    <a href="#!" data-icon="more">More</a>
                </kendo-mobile-tab-strip>
            </kendo-mobile-footer>
        </kendo-mobile-layout>
         
        <!--  Templates -->
        <!-- k-on-click="gcdAccounts.addToCart(kendoEvent, dataItem)" -->
        <script id="accountsTemplate" type="text/x-kendo-template">
            <a class="details-link" data-role="listview-link" href="\#!metrics?id={{dataItem.id}}">
                {{ dataItem.custname }}
            </a>
        </script>
         
        <!-- Standard Worklight Stuff -->
        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
         
        <script type="text/javascript">
            WL.Logger.debug("Loading main page");
        </script>
         
        <!--  Controllers -->
        <script src="js/controllers/controllers.js"></script>
        <script src="js/controllers/accounts.js"></script>
        <script src="js/controllers/metrics.js"></script>
         
         
         
    </body>
</html>

I have a few questions:

1. What determines, in the above .html, the first page/view that will appear?

2. How do I add an existing login.html into this page?

3. If I am to use the router, how to I add this feature to the existing index.html?  Does each view become a template and how would I do that?

4. Once the login page is authenticated/passes, how do I open the Accounts view?  Does this need to be put into a router or not?

I have been reviewing examples online, but I don't see samples on how to accomplish what I need to do.

Thanks!
Dan

 

 

Petyo
Telerik team
 answered on 10 Apr 2015
2 answers
539 views

The example below is just your standard "Grid Batch editing" demo with the addition of "autoSync: true" to the dataSource.

    http://dojo.telerik.com/Epawa

If you edit any of the cells (and change the value) the active cell changes to the first cell (Chai).  This does not happen with "autoSync: false".

How can I keep the active cell on the one I am editing?

 

Thanks

Malcolm
Top achievements
Rank 1
 answered on 10 Apr 2015
14 answers
291 views
Attached are a couple of screen shots.

One shows a chart that appears crushed.  This was taking from IE7, however, I've experienced this problem on IE9.  This doesn't affect all our IE users, just some.

It's consistent on the affected machines.

Any help appreciated.

Thanks


Iliana Dyankova
Telerik team
 answered on 10 Apr 2015
1 answer
164 views
In the Scheduler, the Format of a Day Title is hardcoded in kendo.scheduler.dayview.js on line 33: DATA_HEADER_TEMPLATE = kendo.template("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd M/dd')#</span>"),

This format
is not very well suited for German-speaking people (ddd dd.MM was preferred).
Is there any way to change this in configuration or am I forced to change the
Source Code?

Thanks in advance
Plamen
Telerik team
 answered on 10 Apr 2015
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
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
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?