<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
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
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
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)}; }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>
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(); } }); },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
The example below is just your standard "Grid Batch editing" demo with the addition of "autoSync: true" to the dataSource.
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
