I need to trigger the built in kendo-ui grid "add" action to this custom button in my template. only examples i can find are triggering custom functions. thanks
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label>Mock Text:</label>
<a class="k-button" onclick="trigger dataSource.change.add">Add Product</a>
</div>
</script>
You can add event for that button with jQuery, you can select it either by ID or its class and call addRow method of grid.
$("#btnAdd").click(function() {
var grid = $("#grid").getKendoGrid();
grid.addRow();
});
Related
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
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();
};
Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
Please find below my code:
Template of customer search form
<script type="text/x-kendoui-template" id="customer-search-view-template">
<div class="searchform" id="searchCustomer">
<form class="frmSearch">
<input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
<button class="k-button" data-bind="click: searchClicked">Search</button>
<button class="k-button" data-bind="click: newClicked">New</button>
</form>
</div>
</script>
customer-search.js where loading above template and creating viewmodel object
$(function(){
var views = {};
templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");
var layout = new kendo.Layout($('#customer-search-view-template').html());
layout.render($("#main"));
// Create an observable view model object.
var customer = kendo.observable({
customerName: "John",
searchClicked: function() {
this.set("customerName", "Search clicked");
},
newClicked: function() {
this.set("customerName", "New clicked");
}
});
// Bind the view model to the personFields element.
kendo.bind($('#searchCustomer'), customer);
});
When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.
May I know why this button click refresh the page and how do I stop refreshing the page on button click ???
I would try and place the attribute 'type' for each like so:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.
The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.
I would like to know how to modify the example grouped listview that comes with kendo mobile.
The list view shows both flat view and grouped view. How do you make the items in the list view clickable so they will navigate to a different web page when clicked?
I've tried creating a template with an anchor tag and href and it works in IE but does nothing when clicked on the android phone.
//The Template
<script type="text/x-kendo-tmpl" id="template">
<div class="myclass">
#:name#
</div>
</script>
//The data binding
function mobileListViewDataBindInitGrouped() {
$("#grouped-listview").kendoMobileListView({
dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),
template: kendo.template($("#template").html()),
fixedHeaders: true
});
}
Thanks
After some trial and error I have found that if i remove the div tag in the template, the anchor tags work correctly. Not sure if this is a bug or by design.
Thanks Whizkid747 for your help.
//Updated Template (removed <div>)
<script type="text/x-kendo-tmpl" id="template">
#:name#
</script>