I have an example of a KendoDropDownList jsFiddle
var ds = [
{label:"External Causes of Morbidity, Mortality"},
{label:"Cardiovascular"},
{label:"Circulatory System Diseases"},
{label:"Codes of Special Purposes"},
{label:"Congenital Anomalies"},
{label:"Digestive System Diseases"},
{label:"Easr and Mastoid Process Disease"},
{label:"Endocrine, Metabolic, Immunity"}];
$("#dropdownlist").kendoDropDownList({
dataTextField: 'label',
dataSource: ds
});
var ddl = $("#dropdownlist").data('kendoDropDownList').list.width("auto");
As you can see, I have the list's width set to "auto" but the first item in the list still word-wraps. I thought the "auto" value caused the window to fit to the correct size of the largest item in the list or do I have to just figure out the correct width needed and hard-code the width to prevent word-wrapping?
You just need to tell the listitems to not wrap text as well as setting the width to auto:
$("#dropdownlist").kendoDropDownList({
dataTextField: 'label',
dataSource: ds,
dataBound: function(e) {
e.sender.list.width("auto");
}
});
.k-list-container .k-list .k-item
{
padding-right: 25px;
white-space: nowrap;
}
Updated FIDDLE
If you prefer to do it all in code:
$("#dropdownlist").kendoDropDownList({
dataTextField: 'label',
dataSource: ds,
dataBound: function(e) {
e.sender.list.width("auto").find("li").css({"white-space": "nowrap", "padding-right": "25px"});
}
});
FIDDLE
NOTE: the right padding leaves space for the vertical scrollbar.
Related
I am adding new item in kendo multiselect dropdown which is a very big text.On typing that text it goes on making the width of kendo wider.I want the kendo width to be fixed and the cursor should be positioned next to the new skill after the skill is added.Please suggest a solution.
CODE:
$("#selects").kendoMultiSelect({
placeholder: "Skills",
dataTextField: 'text',
dataValueField: 'value',
dataSource: data,
dataBound: onDataBound,
filtering: onFiltering,
deselect: onDeselect,
select: onSelect,
change: onChange,
close: onClose,
open: onOpen,
filter: "startswith"
});
I am trying to add scrollbar to kendo witndow with fixed height but it is not worked.
Please help me , below are my code
var Employee= $('#EmpData');
Employee.kendoWindow(
{
title: "Employee Data",
width: "779px",
height: "700px",
animation: false,
resizable: false,
modal: true,
actions: [
"Minimize",
"Maximize",
"Close"
],
visible: true,
// scrollable: true
}).data('kendoWindow');
$('#EmpData').data('kendoWindow').center().open();
As if data is more than popup size then it cuts ,i need to show scrollbar to kendo window if data exceeds.
Please help me.
Thanks
I have one Kendo UI Grid in my view page (MVVM Concept). Bind the data from view model. When I reduce the page size.
Kendo UI grid change to Kendo UI Listview. See this image:
How can I do this?
Define one single DataSource for both Grid and ListView.
var ds = {
data : ...,
pageSize: 10,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
};
Then define both a DIV for the Grid and for the ListView:
<div id="grid"></div>
<div id="list"></div>
And initialize the Grid and the ListView:
$("#grid").kendoGrid({
dataSource: ds,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200 }
]
});
$("#list").kendoListView({
dataSource: ds,
template : $("#template").html()
});
Now, what you should do is display one or the other depending on the width:
// Display Grid (and hide ListView)
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
// Display ListView (and hide Grid)
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
Where CSS class ob-hidden is:
.ob-hidden {
display: none;
visibility: hidden;
width: 1px;
}
Now, the only remaining question is invoke one or the other depending on the width. You can user jQuery resize event for detecting changes.
So, enclose both ListView and Grid in a DIV with id container:
<div id="container">
<div id="grid"></div>
<div id="list" class="ob-hidden"></div>
</div>
and define the resize handler as:
$("window").on("resize", function(e) {
var width = $("#container").width();
console.log(width);
if (width < 300) {
console.log("list");
$("#grid").addClass("ob-hidden");
$("#list").removeClass("ob-hidden");
} else {
console.log("grid");
$("#grid").removeClass("ob-hidden");
$("#list").addClass("ob-hidden");
}
});
IMPORTANT: Whatever you do for getting this same result, please, don't create and destroy the Grid and the ListView each time there is a resize. This a computationally expensive operation.
See it in action here: http://jsfiddle.net/OnaBai/JYXzJ/3/
I have a checkbox for each row within a kendo grid. If the user sorts or filters the grid, the checkmarks are cleared from the checkboxes. How can I prevent the checkboxes from unchecking or re-check them after the sort or filter occurs? Please refer to the following js fiddle to observe the behavior during sorting:
http://jsfiddle.net/e6shF/33/
Here's the code on the jsfiddle for reference (...needed to ask this question):
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
columns:[
{
field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
basically the selection is cleared each time because the Grid is redrawn. You can store the check items in an array or object and when the Grid is redrawn (dataBound event) you can mark them again as checked.
To simplify things here is an updated version of you code. Also use the headerTemplate option to set header template - do not name your field like template instead.
var array = {};
$('#grid').kendoGrid({
dataSource: { data: [{id:3, test:'row check box will unchecked upon sorting'}]},
sortable: true,
dataBound:function(){
for(f in array){
if(array[f]){
$('#'+f).attr('checked','checked');
}
}
},
columns:[
{
headerTemplate:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>',
template: '<input id="${id}" type="checkbox" />',
filterable: false,
width: 33,
sortable: false // may want to make this sortable later. will need to build a custom sorter.
},
{field: 'test',
sortable: true}
]});
var grid = $('#grid').data().kendoGrid;
$('#grid tbody').on('click',':checkbox',function(){
var id = grid.dataItem($(this).closest('tr')).id;
if($(this).is(':checked')){
array[id] = true;
}else{
array[id] = false;
}
})
Link to the fiddle
If you are not too concerned about old browsers HTML5 storage might work for you
http://www.w3schools.com/html/html5_webstorage.asp
And of course jQuery comes with its own data storage capability.
I want to use qtip with jqgrid and show a different image depending on which row is selected within the jqgrid. The path of the image could be within the jqgrid as a hidden cell. I have looked around but can't find any documentation on if jqgrid has a relevant row selector that could be used. Does anyone know the selector I want or if I should be trying for a different approach altogether?
The only selector that worked so far is below but it is for the entire grid. I have tried a few things to specify the row but nothing has worked. Any help would be appreciated.
$('#gridtable').qtip({
content: 'Some text',
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
}
});
My solution was to place an icon within each row that had a wine image and assign it the id of the row. This meant that each row could be given a unique class to hover over. Not pretty but it worked.
if((gridRow['photo'] != "false"))
{
$("#gridtable2").jqGrid('setRowData',i+1,{wine:'<div class ="imageicon'+i+'">'+ret['wine']+' <img src=\"images/icon-wine.png\" height="16" width="13"/></div>'});
path = '<img src="images/winephotos/'
+ gridRow['id']
+'.jpg" width="350" height="450" alt="Wine Image"'
+' class="resize"/>';
$('.imageicon'+i).qtip({
content: $(path)
,
position: {
corner: {
target: 'topLeft',
tooltip: 'bottomLeft'
}
},
show: {
when: 'click',
//ready: true,
solo: true
},
hide: {
when: {
event: 'click',
event: 'mouseout'
}
},
style: {
width: { max: 280 },
name: 'dark'
}
});
}
gridRow=false;
}