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 have a grid where i have Kendo Tabstrip in toolbar so outside this kendo tabstrip I want to add an export button that should work for all tabstrips. I have added a button but its not appearing in the grid. I am not sure what i am doing wrong. Please advise
So far I have tried this:
toolbar: [
{
template: kendo.template('<kendo-tabstrip><ul><li ng-class="{\'k-state-hover k-state-active\': defaultAllTab}">All</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultPendingTab}">Pending Review</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultReviewTab}">Reviewed</li></ul><kendo-tabstrip>')
},
{
template: ' <button class="k-grid-excel pull-right btn btn-default btn-sm">Export to Excel</button>'
}
],
excel: {
fileName: 'Subcategory.xlsx',
proxyURL: '/third-party-management/rest/xls/download',
allPages:true,
filterable: true
},
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/
My case is a search window with around 20 properties, in which the user can choose to specify search criteria. Each property has a corresponding checkbox which toggles if the prop is included in the search result or not. The search result is then displayed in a kendo grid.
Simplified code which should illustrate the issue (kendo ui complete ver. 2012.2.710):
<input type="checkbox" onclick="fnShowHide(1);" name="showSearchColumn" id="checkShowField1" />
<div id="example" class="k-content">
<div id="kendoGridTest"></div>
</div>
<script>
function fnShowHide( iCol )
{
$('#kendoGridTest').data("kendoGrid").options.columns[iCol].hidden = false;
$('#kendoGridTest').data("kendoGrid").refresh();
}
</script>
The MVC3-controller method returns data from search is of type JsonResult (given as jsonResultSearchResult below):
$('#kendoGridTest').kendoGrid({
dataSource: jsonResultSearchResult,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Address: { type: "string" }
}
}
},
sortable: true,
resizable: true,
columns: [{
field: "FirstName",
width: 90,
title: "First name"
},
{
field: "LastName",
width: 120,
hidden: true,
title: "Last name"
},
{
field: "Address",
width: 140,
title: "Adr"
}
]
});
After performing a search, the grid fills with the right data and LastName is indeed hidden. But if the user now checks the checkShowField1 control, I would like the grid to refresh with all three cols visible. It does not. fnShowHide() does not do the job.
I must admit I was looking for anything of a type of Columns collection in a QuickWatch window while debugging in VS. The collection in fnShowHide contains the right data from when the grid was initialized, and I'm able to manipulate the .hidden property, but the grid still does not display the column.
I'm still a bit confused whether dynamic hide/show of cols is supported but this accepted answer from a Telerik employee looked promising.
To hide a column on the client side with JavaScript you should use the hideColumn() and to show it you use the showColumn(). Both methods have several overloads - you either pass the index of the column or you pass the name of the field the column is bound to.
For example:
var grid = $('#GridID').data('kendoGrid');
grid.hideColumn(2);
//or show it
grid.showColumn("OrderDate") // lets say thats the field name of the same column
The post you linked shows how to Hide/Show column with the MVC Wrappers which is slightly different.