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,
});
});
Related
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.
Is it possible to use the Kendo-Dataviz pie chart as a button control. I want every piece to be a different control.
I could not find anything like that in the documentation.
You might define a seriesClick event. Something like:
$("#chart").kendoChart({
series: [
{
type: "pie",
categoryField: "type",
data: [
{ value: 1, type: "Category 1" },
{ value: 2, type: "Category 2" }
]
}
],
seriesClick : function (e) {
alert("You clicked on: " + JSON.stringify(e.dataItem));
}
});
See it running here : http://jsfiddle.net/rS3T4/
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.
I'm using Durandal and Kendo UI. My current problem is the edit popup event on my grid. I cannot seem to set the selected value on my dropdown.
I can debug and inspect, and I indeed do see the correct value of e.model.InstrumentName nicely populated.
How can I set the value/text of those dropdowns in edit mode ?
Here's my grid init:
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
columnMenu: false,
{
field: "portfolioName", title: "Portfolio Name",
editor: portfolioDropDownEditor, template: "#=portfolioName#"
},
{
field: "InstrumentName",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=InstrumentName#",
},
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
var portfDropDown = $('#portfolioName').data("kendoDropDownList");
instrDropDown.list.width(350); // let's widen the INSTRUMENT dropdown list
if (!e.model.isNew()) { // set to current valuet
//instrDropDown.text(e.model.InstrumentName); // not working...
instrDropDown.select(1);
//portfDropDown.text();
}
},
filterable: true,
sortable: true,
pageable: true,
editable: "popup",
});
Here's my Editor Template for the dropdown:
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="InstrumentName" name="InstrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
select: onSelect,
change: function () { },
optionLabel: "Choose an instrument"
}).appendTo(container);
}
thanks a lot
Bob
Your editor configuration is bit unlucky for grid, anyway i have updated my ans on provided code avoiding manual selections:
Assumptions: Instrument dropdown editor only (leaving other fields as strings), Dummy data for grid
<div id="positGrid"></div>
<script>
$(document).ready(function () {
$("#positGrid").kendoGrid({
dataSource: {
data: [
{ PositionId: 1, Portfolio: "Jane Doe", Instrument: { IID: 3, IName: "Auth2" }, NumOfContracts: 30, BuySell: "sfsf" },
{ PositionId: 2, Portfolio: "John Doe", Instrument: { IID: 2, IName: "Auth1" }, NumOfContracts: 33, BuySell: "sfsf" }
],
schema: {
model: {
id: "PositionId",
fields: {
"PositionId": { type: "number" },
Portfolio: { validation: { required: true } },
Instrument: { validation: { required: true } },
NumOfContracts: { type: "number", validation: { required: true, min: 1 } },
BuySell: { validation: { required: true } }
}
}
}
},
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [
{ field: "PositionId" },
{ field: "Portfolio" },
{ field: "Instrument", width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument.IName#" },
{ field: "NumOfContracts" },
{ field: "BuySell" },
{ command: [ "edit", "destroy" ]
},
],
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
instrDropDown.list.width(400); // let's widen the INSTRUMENT dropdown list
},
//sortable: true,
editable: "popup",
});
});
function instrumentsDropDownEditor(container, options) {
$('<input id="InstrumentName" required data-text-field="IName" data-value-field="IID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
type: "json",
transport: {
read: "../Home/GetMl"
}
},
optionLabel:"Choose an instrument"
});
}
</script>
Action fetching json for dropddown in Home controller:
public JsonResult GetMl()
{
return Json(new[] { new { IName = "Auth", IID = 1 }, new { IName = "Auth1", IID = 2 }, new { IName = "Auth2", IID = 3 } },
JsonRequestBehavior.AllowGet);
}
I'm using kendoTabStrip as is shown on KendoUI Page. In my case in each div I have rendered partial view. In a few of my partial views I have additionaly kendoGrid.
Problem
When I reload page in any tab and go to tab which contain kendoGrid then it do not work correctly. For example: I'm on tab#0 and go for tab#3 which contain kendoGrid with pagination, then pagination is not display. But when I reload it then pagination works fine.
What can I do to my Grids works inside TabStrip?
Any help would be appreciated.
UPDATE
My implementation of tabstrip
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
var tabStrip = $('#tabStrip').data('kendoTabStrip');
var tabId = 0;
var scheduledId = 0;
if (document.location.hash.match(/tab-/) == 'tab-') {
tabId = document.location.hash.substr(5);
}
if (document.location.hash.match(/scheduled-/) == 'scheduled-') {
tabId = 1;
scheduledId = document.location.hash.substr(11);
editSchedule('/admin/Course/Scheduled/' + scheduledId + '/Edit/' );
}
tabStrip.select(tabStrip.tabGroup.children('li').eq(tabId));
So I need it to make some rewrites from controller.
To fix this problem we must change :
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
}
});
for:
$("#tabStrip").kendoTabStrip({
animation: { open: { effects: false} },
select: function (e) {
document.location.hash = 'tab-' + $(e.item).index();
},
activate: function(e) {
$(e.contentElement).find('.k-state-active [data-role="grid"]').each(function() {
$(this).data("kendoGrid").refresh();
});
}
});
Event activate is 'Triggered just after a tab is being made visible, but before the end of the animation'. So we must refresh our grids then becouse js counts widths of hidden elements wrong.
I put together an example of Grids working inside of a TabStrip: http://jsfiddle.net/dpeaep/SJ85S/. Maybe, I am missing part of what you are asking in your question. If so, you can modify the jsfiddle to clarify what the problem is.
HTML
<div id="tabstrip">
<ul>
<li>Grid 1</li>
<li>Grid 2</li>
<li>Grid 3</li>
</ul>
<div><div id="grid1"></div></div>
<div><div id="grid2"></div></div>
<div><div id="grid3"></div></div>
</div>
Javascript
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(0);
$("#grid1").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
}
});
$("#grid2").kendoGrid({
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" }
],
dataSource: {
data: [
{ FirstName: "Betty", LastName: "Lakna" },
{ FirstName: "Fumitaka", LastName: "Yamamoto" },
{ FirstName: "Fred", LastName: "Stevenson" }
]
}
});
$("#grid3").kendoGrid({
columns: [
{ field: "Title", title: "Title" },
{ field: "Year", title: "Year" }
],
dataSource: {
data: [
{ Title: "Lost in Domtar", Year: "2012" },
{ Title: "Evergreen", Year: "2012" },
{ Title: "Fields of Yellow", Year: "2010" },
{ Title: "Where the Whistle Blows", Year: "2008" }
]
}
});