We using angular and kendo tab datasource to create kendotabstrip in HTML. Is there a way to select a default tab on load from k-data events. We can do it using jquery but looking for a way to select default tab using k-data-bind?
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-tab-strip k-content-urls="[ null, null]" k-data-source="tabData" k-data-text-field="'text'" k-data-value-field="'id'" k-options="configOptions">
<!-- tab list -->
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.hello = "Hello from Controller!";
$scope.tabData = [{id:'1', text:'tab 1'}, {id:'2', text:'tab 2'}];
$scope.configOptions={select:function(e){console.log(e);}}
})
</script>
Fiddle for reference.
http://jsfiddle.net/6dgxvqvb/
Related
I have a for that will create a component for each index.
In this component, I have a child div containing edit, add, minus buttons.
I would like it to be displayed on the component mouseover.
How do I achieve this dynamically without having to play with indexes ?
Thank you kindly.
Post component
<template>
<div v-on:mouseleave.native="showOperations = false"
v-on:mouseover.native="showOperations = true">
<!-- post data -->
<div v-if="showOperations">
<!-- operations -->
</div>
</div>
</template>
<script>
export default {
...
data () {
return {
showOperations: false
}
},
...
</script>
List of post
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
This pattern works for me and I think it works for you as well
I want to create a Kendo DatePicker in Kendo template. Here is my Kendo template.
<script id="popup-doc-details" type="text/x-kendo-template">
<input id="DateTesting" style="width: 180px">
</script>
How can I init Kendo DatePicker. For more info this template is part of a popup and shown when something choose from Kendo DropDown and DatePicker number will be dynamically changed with providing data. DropDown data is like.
[{name:"test1", tags:[{name:"datename",type:"date"},{name:"datename",type:"date"}]}, {name:"test2", tags:[{name:"datename",type:"date"}]}]
Example: If I choose test1 from DropDown, Kendo template will load DatePicker according to tags.
I know I can achieve this using loop in Kendo template. but my question is how can I init Kendo DatePicker dynamically.
You can create datepicker in template using MVVM style like this
<input name="selectedDate" type="date"
data-bind="value: selectedDate"
data-format="dd MMMM yyyy"
data-role="datepicker" />
For Angular2/4:
HTML
<!-- Calendar Icon -->
<span #anchor (click)="onToggle()" class="k-icon k-i-calendar"></span>
<!-- Kendo Popup with calendar inside -->
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
<kendo-calendar class="pointer" [(value)]="examDate" (valueChange)="calendarFunc($event)"></kendo-calendar>
</kendo-popup>
JS/TS
public onToggle(): void {
this.show = !this.show;
}
I use a show variable to display the popup.
For Jquery / Knockout:
Popup Info
Calendar Info
HTML
<!-- Anchor Position with calendar Icon iside -->
<div class="datepicker-anchor">
<span class="k-icon k-i-calendar" data-bind="click: onToggle.bind($data)" ></span>
</div>
<!-- Popup with calendar inside -->
<div id="popup">
<div id="calendar"></div>
</div>
JS/TS
private popup: any;
constructor() {
function onChangeCalendar() {
var date = this.value();
self.onToggle();
}
$("#calendar").kendoCalendar({
change: onChangeCalendar
});
this.popup = $("#popup").kendoPopup({
anchor: $(".datepicker-anchor")
}).data("kendoPopup");
this.popup.close();
}
onToggle = (): void => {
this.show = !this.show;
if(this.show)
this.popup.open();
else
this.popup.close();
};
I have a kendo tabstrip which load 3 tab. the first tab loads a kendo panelbar the code is like this
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Transactions")
.LoadContentFrom("getgridpanel", "Grid").Selected(true);
tabstrip.Add().Text("Payments").Encoded(false)
.Content(#<text><div class="dr_detail row">
<br>
<br>
</div></text>);
tabstrip.Add().Text("Browse").Encoded(false).HtmlAttributes(new { style = "float:right !important" })
.Content(#<text><div class="dr_detail row">
<br>
<br>
<br>
<br>
</div></text>);
})
)
and the panel inside the first tab is like this:
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%" })
.Items(panelbar =>
{
panelbar.Add().Text("Invoice Details")
.Content(#<text><div class="col-md-2 dr">
<dl>
<dt class="text-left ">Invoice #:</dt>
<dd class="text-left ">
<input class="form-control input-sm" type="text" placeholder="Small Input">
</dd>
</dl>
</div></text>);
panelbar.Add().Text("Payment & Discount");
panelbar.Add().Text("Item Details")
.LoadContentFrom("GetGrid", "Grid", new { grid = Awesome.Web.WebConstants.L_GRID_AGENT });
})
)
when the code is like that it works fine... it renders right but when i try to create a kendo masked textbox in the panelbar like this:
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%" })
.Items(panelbar =>
{
panelbar.Add().Text("Invoice Details")
.Content(#<text><div class="col-md-2 dr">
<dl>
<dt class="text-left ">Invoice #:</dt>
<dd class="text-left ">
#(Html.Kendo().MaskedTextBox()
.Name("Invoice")
.Mask("0000000")
)
</dd>
</dl>
</div></text>);
panelbar.Add().Text("Payment & Discount");
panelbar.Add().Text("Item Details")
.LoadContentFrom("GetGrid", "Grid", new { grid = Awesome.Web.WebConstants.L_GRID_AGENT });
})
)
this code gives me a javascript error: "TypeError: undefined is not a function in /Grid/getgridpanel"
both the tabstrip and the panel are partial views
any help?? is this possibly a bug or conflict of Kendo UI.???
You can not have nested templates inside your mvc helper method-call. The code where you have your MaskedtextBox is causing the problem. What I have done in the past is create an html helper that returns a kendo control, then added the remainder of my kendo markup that includes the nested items, in the main page, like so:
<div>
#MyHelper(parameters).Items(...your code for panel bar here)
</div>
Your help method should return type KendoPanelBar. If you need further clarification, let me know. Good luck.
I have a kendo grid. I am using an add and custom button in the toolbar as the following code:
toolbar: ["create", {
text: "Print record",
className: "k-grid-custom",
imageClass: "k-add"
}],
I also want to add a custom toolbar (dropdown menu) as this example
I used similar code in the demo like
toolbar: kendo.template($("#toolbarIsExpire").html()),
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
</script>
I want to show in the toolbar the add button and my custom button and the dropdown menu (IsExpired)
How to mix between the two toolbar in order to have both of them ?
Extend your template:
<script type="text/x-kendo-template" id="toolbarIsExpire">
<div class="toolbar">
<label for="is_expired">Is Expired ?</label>
<input type="search" id="is_expired" style="width: 75px;"/>
</div>
<a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"> </span>Add new record</a>
</script>
I have two tabs generated by jquery-ui. I do something in the Tab1 and on a button click, there is an AJAX call which displays the results in Tab2.
So I want to change the active tab on button click ( after the ajax call finishes ). Can I do so?
I've created a jsFiddle here
I tried onclick='$("#tabs-2").trigger("click")
'> but it didn't do anything.
As info (in case someone stumbles upon this later and gets an error on the select method) - In jQuery-UI 1.9+, the select method was deprecated.
(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)
Use the option method, example:
$("#tabs").tabs("option", "active", 2);
Use onclick='$("#tabs").tabs( "select", "tabs-2" )'
http://jqueryui.com/demos/tabs/#method-select
js fiddle
http://jsfiddle.net/maheshvemuri/M7Fdu/
Here is JS part of the code:
$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
Here are the "a href" tags to be added in your tabs div
Example:
<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
You have to make the trigger call to "a" inside the "li", not direct to the tab "div" like it's done.
<div id="tabs">
<ul>
<li><a id="lnk1" href="#tabs-1">tab1</a></li>
<li><a id="lnk2" href="#tabs-2">tab2</a></li>
</ul>
<div id="tabs-1">
<button type="button" id="clicktab2" onclick='$("#lnk2").trigger("click");'>
go to tab2
</button>
</div>
<div id="tabs-2">
tab2 content
</div>
</div>
Example:
http://jsfiddle.net/Tf9sc/152/
Also you can try
$(window).load(function(){
$('#tabs-2').trigger('click');
});
that's because you cannot trigger call the tabs() in ready mode. document.ready is executed earlier than window.load.