In my SPA using backbone.marionette I am trying to render a CompositeView inside tab of an other CompositeView.
I have successfully rendered the control but events are not being registered in DOM
Here is my code sample:
MainView: view.js (that received the subView and render it inside tab)
define(["marionette", "backbone", "kendo", "../SubView/view"],
function (Marionette, Backbone, kendo, subView) {
var View = Marionette.CompositeView.extend({
template: "MainView/template.t",
onRender: function () {
var tabStrip = this.$("#tabStrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({
text: "Sub View",
content: new subView().render().$el.html()
});
},
onShow: function () {
//Set Default Active Tab
var tabStrip = $('#tabStrip').data().kendoTabStrip;
tabStrip.select(0);
},
});
return View;
MainView: template.t
<div id="tabStrip"></div>
SubView: view.js
define(["marionette", "backbone", "kendo"],
function (Marionette, Backbone, kendo) {
var View = Marionette.CompositeView.extend({
template: "SubView/template.t",
},
onRender: function () {
var data = [{ Description: "Test 1", ID: 1 }, { Description: "Test 2", ID: 2 }]
this.$("#ddlTest").kendoDropDownList({
dataSource: data,
dataTextField: "Description",
dataValueField: "ID",
});
return this;
},
});
return View;
});
SubView: template.t
<input id="ddlTest"/>
Any help will be highly appreciated.
Related
)
I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.
So I specify that I want to see the alert is triggered only if the IFRAME is active
Here is my code :
<button id="refresh" class="k-button k-primary" title="START">START</button>
<div id="messageDialog"></div>
<script>
var isClosed = false;
$("#refresh").click(function(e) {
e.preventDefault();
var id = "target_iframe";
var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
title: "test",
close: function() { this.destroy() },
iframe: true,
close: function(e) {
if(!isClosed) {
$("#messageDialog").kendoDialog({
title: "test",
content: "Exit ?",
visible: false,
show: function() {
e.preventDefault();
},
actions: [{
text: "Exit",
action: function(e){
setTimeout(function() {
isClosed = true;
$("#target_iframe").data("kendoWindow").close();
}, 200);
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open();
}
},
deactivate: function() {
isClosed = false;
}
});
dialog.data("kendoWindow").center().open();
$("<form />", {
action: "https://www.mywebsite.com/",
method: "post",
target: id
})
.hide().appendTo("body")
// add any data
.append("<input name='foo' />").find("[name=foo]").val("bar").end()
.submit().remove();
});
</script>
Thank you in advance :)
I tried to bind the 'deselect' event to the KendoUI multiselect control using jquery. But seems like it is not firing: Here is the code:
$(document).ready(function () {
function multiselect_deselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
}
var multiselectCtrl = $("#enterFeedbackForm_" + '#ContextId' + " #FeedbackCategoryList_" + '#ContextId').data("kendoMultiSelect");
multiselectCtrl.bind("deselect", multiselect_deselect);
});
the debugger point does not hit. We're using Kendo UI Kendo UI v2015.2.703
I think kendo-ui has a bound property for this already. If you take a look at the event documentation, it shows you how to bind the events on initialization of kendo ui multiselect:
$(document).ready(function() {
function onDeselect(e) {
debugger;
if (e.item.context.localName == 'li') {
e.preventDefault();
}
};
var data = [
{ text: "Africa", value:"1" },
{ text: "Europe", value:"2" },
{ text: "Asia", value:"3" },
{ text: "North America", value:"4" },
{ text: "South America", value:"5" },
{ text: "Antarctica", value:"6" },
{ text: "Australia", value:"7" }
];
$("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
deselect: onDeselect,
});
});
I want to hide delete button in some rows with certain conditions. I have checked the following link but it is still not working well.
http://www.telerik.com/forums/hide-edit-and-delete-button-based-on-the-status-of-each-record
Their code like this:
function onEdit() {
$(".k-grid-cancel").on("click", function () {
setTimeout(function () {
console.log("trigger");
$("#Grid").data("kendoGrid").trigger("dataBound");
});
})
}
The problem is when you changed any items in the popup edit window, the delete button will show up on the original gray out area. Although you click the cancel button, it will disappear. But if you click the right up corner [x] to close the popup edit window, the delete button will stay there.
Any body know there is any new update for the kendo grid conditional button?
Thanks
First add an event in the grid as
.Events(ev =>
{
ev.Cancel("onEditCancel");
})
And then on js
function onEditCancel(e) {
e.sender.cancelChanges();
e.preventDefault();
}
It will work.
You can achieve this requirement by using onDataBinding event of KendoGrid.
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
function onDataBound(arg) {
console.log(arg);
console.log("Grid data bound");
}
function onDataBinding(arg) {
console.log(arg);
console.log("Grid data binding");
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 350,
change: onChange,
dataBound: onDataBound,
dataBinding: onDataBinding,
selectable: "multiple cell",
pageable: true,
sortable: true,
columns: [
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
}
]
});
});
Check this link http://jsfiddle.net/HuTpj/68/ and see the console for events trigger while loading the grid.
I want to show my Kendo UI TreeView expanded at all time, but it will only show collapsed. When reloading the datasource, I can see a flash of the expanded tree, but then it collapses.
var locationTreeView = $("#treeViewLocations").kendoTreeView({
checkboxes: {
checkChildren: false,
template: "# if(item.showCheckbox){# <input type='checkbox' name='selectedLocations' value='#= item.value #' />#}#"
},
dataTextField: "text",
dataSource: {
transport: {
read: {
url: window.location.origin + "/api/v1/bookingrequestlocation",
dataType: "json",
type: "GET",
data: { bookingSeasonPeriodId: bookingSeasonPeriod.value() },
}
},
schema: {
model: {
id: "value",
children: "items",
hasChildren: "hasChildren",
}
}
}}).data("kendoTreeView");
expandTreeView();
function changeSeason() {
locationTreeView.dataSource.read();
expandTreeView();}
function expandTreeView() {
locationTreeView.expand(".k-item");}
Fire expandTreeView() function in databound event
It's Working For Me...Thanks...I have added A DataBound Event Like this
.Events(e => e.DataBound("ExpandAllTree"))
and In that Method
function ExpandAllTree() {
var treeview = $("#TreeView").data("kendoTreeView");
treeview.collapse(".k-item");
}
and It's Working Perfectly...
Add the following code right after creating the treeview
var tree = $("#TREEVIEWID").data("kendoTreeView");
function expandTreeNodes() {
if ($('.k-item').length) {
var expandedLength = $('.k-item').length;
tree.expand(".k-item");
if (expandedLength < $('.k-item').length) {
expandTreeNodes();
}
}
}
i have used kendoui grid like;
<script>
$(function(){
$("#grid").kendoGrid({
dataSource:{
transport: {
read: "<?php echo base_url() ?>index.php/user_management/manage_users/list_view/"
},
schema:{
data: "data"
}
},
columns: [
{
field: "UserID",
hidden:true
},
{
field: "Username",
title:"Username"
},
{ field: "FirstName",
title:"First Name"
},
{field:"MiddleNames"},
{field:"LastName"},
{field:"City"},
{field:"Email"},
{field:"Actions"},
{command: { text: "View", click: showDetails }, title: " ", width: "140px"}
]
});
});
function showDetails(e) {
e.preventDefault();
//i want to get the id of the clicked row and pass that id to the next(redirected) page;
}
</script>
How do I get the current clicked row id i.e UserId column value and pass that id(redirect) to the next page?
From the event that you receive, you get the row that it belongs to:
var row = $(e.target).closest("tr");
And then you get the item using dataItem:
var item = $("#grid").data("kendoGrid").dataItem(row);
So it would be:
function showDetails(e) {
var row = $(e.target).closest("tr");
var item = $("#grid").data("kendoGrid").dataItem(row);
alert("UserId is:" + item.UserId);
}