Please show me the way how to add tooltip for items which have a long length in kendo multi-select.
Add a picture for more specific.
Picture
Thanks.
Use the itemTemplate and/or tagTemplate and add a title attribute with the tooltip text:
$("#multiselect").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples", tooltip: "Apples tooltip text" },
{ id: 2, name: "Oranges", tooltip: "Oranges tooltip text" }
],
dataTextField: "name",
dataValueField: "id",
itemTemplate: '<span title="#: tooltip #">#: name #</span>',
tagTemplate: '<span title="#: tooltip #">#: name #</span>'
});
itemTemplate is item while selecting from the dropdown, while tagTemplate is the item once selected.
DEMO
NOTE: you can use the same value for both the text and tooltip.
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.
This is the grid view showing all records on grid here, but i don't want show in the grid all records?
When ever i click events like add,edit,view,in that time shows the all records...
Suppose showing' Total' in my grid ,,Total is showing only when i click add ,edit ,view
Not in the grid view
colModel:[
{name:'empId',index:'empId',width:3,editable:true,editoptions:{readonly:false,view:true},editrules:{required:false},key:true,formoptions:{rowpos:2,elmprefix:" " }},
{name:'empName',index:'empName',width:3,editable:true,editrules:{required:true},formoptions:{rowpos:3,elmprefix:" " }}]
jQuery("#taskDetails").jqGrid('navGrid','#pagernavTask',{add:true,edit:true,del:true,refresh:true,view:true,search:false})
This is my code...suppose if i add id,name (editable:true) it show dialogue box 2 feilds ..and also it shows in grid view also ,,but and don't want to display in the grid view displays ,it show only when i click edit,add,view (show in dialogue boxes)..Is it possible ????Please reply for this answer
Please any one give me the answer
Thanks in adavance
hiding a column can be done by using hidden: true in your colModel. Moreover by using beforeshowform in your add ,edit ,view u can customize ur own way of showing / hiding a column. For advance details Hidden Columns in jqGrid.
UPDATE
here i hide EmpId by using hidden:true in my colmodel. it can be shown in Add dialog by using beforeshowform event. Same way i have shown empName in Grid but hidden in edit dialog. hope u can understand now.
$(function() {
var grid = $('#MyJqGrid');
var mydata = [
{empId:"1",empName:"alpha",notes:"NA"},
{empId:"2",empName:"beta",notes:"Null"},
{empId:"3",empName:"gamma",notes:"N/A"},
{empId:"4",empName:"delta",notes:"Null"},
{empId:"5",empName:"theta",notes:"aaaa"},
];
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['empId','empName', 'Notes'],
colModel:[
{name:'empId',index:'empId',sortable:true, editable:true, hidden: true,}, // here field is hidden in grid
{name:'empName',index:'empName',editable:true, sortable: true, hidden: false,}, // here field is shown in grid
{name:'notes',index:'notes',editable:true, sortable: true,},
],
height: "auto",
width : "auto",
pager:'#Mypager',
viewrecords : true,
rowNum: 5,
sortname: "empId",
sortorder :"asc",
rowList:[2,3,5],
caption : "My JqGrid Test",
}).jqGrid('navGrid','#Mypager',{
edit: true,
add: true,
del: false,
search: false,
view: false,
},
{
//Edit Form
beforeShowForm: function(form){
$('#tr_empName',form).hide(); //In Edit form empName is Hidden, initially shown
}
},
{
//Add Form
beforeShowForm: function(form){
$('#tr_empId',form).show(); //In add form EmpId is shown, initially hidden
//$('#tr_empName',form).hide();
},
});
});
Has anyone else ran into this issue? setting index for the kendoDropDownList option is not working
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 2,
change: onChange
});
You can view on this fiddle http://jsfiddle.net/design48/E57J3/7/. It should select 3rd item for Gray for color drop down
The problem is not in your kendoDropDownList but the fact that you set the color multiple times.
You set it in Kendo DropDownList when you say:
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 2,
change: onChange
});
You do it again in:
color.select(0);
And once again in:
<input id="color" value="1" />
Try removing all but one and you get the right value.
Check it here http://jsfiddle.net/OnaBai/E57J3/8/
I am working with the Kendo UI Grid. This is my code:
<body>
<div id="myGrid"></div>
<script type="text/javascript">
$(function(){
var rows = [
{name: "name001", id: "001", group: "G1"},
{name: "name002", id: "002", group: "G1"},
{name: "name003", id: "003", group: "G2"},
{name: "name004", id: "004", group: "G2"},
];
var myDataSource =
new kendo.data.DataSource({
data: rows,
pageSize: 3,
});
myDataSource.read();
$("#myGrid").kendoGrid({
dataSource: myDataSource,
columns: [
{field:"name", title:"The Name"},
{field:"id", title:"The Id"},
{field:"group"},
{command:["edit", "destroy"]}
],
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable: true,
editable: "inline"
});
});
</Script>
</body>
But the edit is not working. Opening this grid in a browser gives me a grid that looks as expected with an Edit and a Delete button. I can delete rows with the Delete button. But clicking Edit changes the row into edit mode (with input fields in cells) but changing a value and pressing the Update button does nothing. The row remains in edit mode and the Update button doesn't switch back to "Edit" as it's supposed to.
Can you tell me what's missing? Do I have to configure my datasource somehow?
Yes you missed to configure your Grid's dataSource to know how to update the records. I assume that you want to edit the records only locally (on the client) - without sending them to the server. To actually close the Grid and apply the changes you can use the save event of the Grid and the refresh method.
Here is a jsbin with your case.
If you want to save these changes to the server I suggest you to start with the demos.