Thanks to the templating is easy to have a template for the drop-down items. The sample demonstrates the power quite well: http://demos.telerik.com/kendo-ui/dropdownlist/template
But if I want the user to select one of 100 icons and display each icon with a size of 32x32 the list gets quite long while very thin. Can I arrange this in (let's say) 6 columns so the width is 192px and I only get 17 rows of icons. That would be much more compact.
Hello
By disabling animation on kendoTabStrip it is still active if you switch tabs programmatically. I have created a demo with two buttons, which switch between tabs programmatically. If you click directly on Tab1 or Tab2 there is no animation and the tabs are displayed right away.
If you use the switch buttons you see a slide up/down animation effect. Example based on your document code:
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>Kendo UI Snippet</title>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"
/>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"
/>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"
/>
<script src=
"http://code.jquery.com/jquery-1.12.4.min.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"
></script>
</head>
<body>
<div id=
"tabstrip"
>
<ul>
<li id=
"tab1"
>Tab 1</li>
<li id=
"tab2"
>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>
<button id=
"switch1"
type=
"button"
>Switch to Tab1</button>
<button id=
"switch2"
type=
"button"
>Switch to Tab2</button>
<script>
$(
"#tabstrip"
).kendoTabStrip({
animation:
false
});
$(document).on(
"click"
,
"#switch1"
,
function
(e) {
var
tabToActivate = $(
"#tab1"
);
$(
"#tabstrip"
).kendoTabStrip().data(
"kendoTabStrip"
).activateTab(tabToActivate);
});
$(document).on(
"click"
,
"#switch2"
,
function
(e) {
var
tabToActivate = $(
"#tab2"
);
$(
"#tabstrip"
).kendoTabStrip().data(
"kendoTabStrip"
).activateTab(tabToActivate);
});
</script>
</body>
</html>
Shouldn't the animation also be disabled on using activateTab() function?
Weird behaviour: On disabled animation (animation: false) there is a case where tabstrip content wont be displayed anymore. You can use the demo above to reproduce this:
1. Start the demo
2. Click on tab "Tab 1"
3. Click on button "Switch to Tab2"
4. Click again on "Tab 1" -> content is not displayed (grey)
It also works the other way around so Tab2 is not showing content. This weird effect is only reproducible on "animation: false". So I guess its a problem with the animation itself.
Regards
Hi,
How can I update a column template based on a selected option from my context menu?
So when I select a row in my grid and right click the mouse to open the context menu I would like to update the status column with the selected option from my context menu.
so far the I build this exampl: http://dojo.telerik.com/@Ricardo%20Coelho/AyeVUz/11
Could someone help me with thins?
Thanks.
Hello
I checked the remove functions of the Upload Widget. As far as I understand: Any remove functionality reacts only on files "inside" the Upload widget. The widget itself is not persistent: You can upload files by the widget to get files into that list. You then can delete/remove them right away. After reload the page this file list is empty. The usual business case I know is: Customer do upload files on a day and want to delete it any other day or just later. I have such a case and create a unique ID for each uploaded file. I wonder if and how it is possible to use the Upload widget by sending this ID and triggering the removeURL handler. I've found some very old entries, one with trigger the remove event by "$(".k-delete").parent().click();" but nothing happens doing that.
The most simple way would be to add a file to be deleted on that file list and then call the removeURL handler.
Is there an easy way to do that or is it better to use a separate AJAX call?
Regards
I'm updating my dropdown's datasource by calling DDL.data("kendoDropDownList").dataSource.read();
This partially works, it executes the server side read event, but it does not execute the JS function which should dynamically get the parameters for the server side read event. The function assigned in .Data [see below] (GetAllDescriptorsData) only executes once - when the page loads, it does not re-execute when . call read() [see above].
My question is, How can I force a read and get new parameters?
@(Html.Kendo().DropDownList()
.Name(YearDescriptorID)
.DataSource(source =>
{
source.Read(read =>
{
var IsSpouse = Model.IsSpouse ? "1" : "0";
read.Action("GetAllDescriptors", "Income").Data("GetAllDescriptorsData("+ Model.PersonalKey + "," + IsSpouse + ")");
})
.ServerFiltering(true);
})
.AutoBind(false)
.DataTextField("DisplayText")
.DataValueField("IncomeKey")
.Events(e =>
{
e.Change("onChangeYearDescriptor");
e.DataBound("onDataboundYearDescriptor");
})
)
Assuming I have the following HTML element
<div id="grid" />
the following script works:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
I would like the following to work instead (and it doesn't):
$("#grid").kendoGrid({
columns: [
{ field: 0 },
{ field: 1 }
],
dataSource: [
[ "Jane Doe", 30 ],
[ "John Doe", 33 ]
]
});
I can make it work using a workaround like the sample below, but this is an ugly workaround - any chance this could be placed into the framework?
The reason is that JSON that contains array or arrays cost much less to transfer then a JSON with array of objects with named fields
function
convertArrayToObjects(arrayOfArrays) {
if
(!Array.isArray(arrayOfArrays))
return
arrayOfArrays;
var
arrayOfObjects = [];
arrayOfArrays.forEach(
function
(arr) {
if
(!Array.isArray(arr))
arrayOfObjects.push(arr);
else
{
// need to convert array to object
var
obj = {};
var
hasOwnProp = Object.prototype.hasOwnProperty;
for
(
var
k
in
arr) {
if
(+k === (k & 0x7fffffff) && hasOwnProp.call(arr, k)) {
obj[
'_'
+k] = arr[k];
}
}
arrayOfObjects.push(obj);
}
});
return
arrayOfObjects;
}
$(
"#grid"
).kendoGrid({
columns: [
{ field:
"_0"
},
{ field:
"_1"
}
],
dataSource: convertArrayToObjects([
[
"Jane Doe"
, 30],
[
"John Doe"
, 33]
])
});
Is it possibile to add a context menu to cell.
The idea is add a right click on cell, header, footer to format it.
Any other options/idea is appreciated