My dataSource data object is a collection of items (500+):
{
var oftype; // can be 1, 2, 3 etc.
var value; // string value of variable length
}
when displaying it in Kendo grid I am showing "value" but, instead of "oftype" values of 1,2,3 etc I'd like to display description of "oftype". I have a function
getDescription (oftype); that returns a string.
Question:
how can I define kendo grid so it uses function getDescription to populate column "oftype"?
Thank you.
Use template in the column, like:
template: "#: getDescription(oftype) #"
Demo
Related
I have many grids in my application. some of the columns are numeric ones.
I want to apply a specific css style (direction: ltr) for all numeric columns without specifying is for each one. Is their a way to apply the style on all numeric columns?
Thanks a lot!
Kendo grid has a dataBound event that will be fired once the grid has finished rendering the cells. From this event, you'll be able to loop into the grid's view and column and set each cell css individually.
Note that the type is part of the model, not the column itself.
$.each(kendoGrid.columns, function (index, column) {
//Get the type from the model
var type = kendoGrid.dataSource.options.schema.model.fields[column.field].type;
var jqTd;
//Extra logic to handle locked columns
//nth-child is 1-base
if (columnScan.locked) {
lockCount++;
jqTd = kendoGrid.lockedContent.find("tbody>tr>td:nth-child({0})".formatWith(index + 1));
} else {
jqTd = kendoGrid.tbody.find(">tr>td:nth-child({0})".formatWith(index + 1 - lockCount));
}
if (type == "number") {
jqTd.css("background-color", "red");
}
});
I'd like to update a label on change event of the Kendo Multi Select. But the value() just gives the Id. Do you have any idea about accessing other fields of the selected value?
This is the JavaScript handler:
function change(e) {
if (e.sender.value()[0])
$("#Label").text(e.sender.value()[0]);
else
$("#Label").text('');
}
Use var value = this.dataItems(); instead, it will give you all information you need about the current selected value, and do note because it's multi select it's value may more than 1.
function onChange(e) {
var value = this.dataItems();
console.log(value[0].text);
if (value[0]){
$("#Label").text(value[0].text);
}else{
$("#Label").text('');
}
}
DEMO
I want to fetch dropdown values or IDs. I am using a dropdown control in an inline editing kendo grid. I'm trying to obtain the values using the change function. My demo code is:
function gridEdit(e)
{
griddata = $('#CodeConfiguration').data("kendoGrid");
codeType = e.container.find(":input[name=CodeType_032]");
fixedCode = e.container.find(":input[name=FixedCode]");
alert(codeType.id);
codeType.change(function()
{
if(codeType.val() == 273)
{
fixedCode.attr('disabled',true);
}
});
}
I want to fetch CodeType dropdown values. Please suggest an appropriate solution.
Basically if your DropDownList is bound to field from the Grid model, then you can directly get the value from the Model.
e.g.
function onEdit(e) {
var codetype = e.model.CodeType;
}
I am using kendo ui treeview. I am loading the treeview dynamically from the database. But my issue is i am getting the expand error if there are no child's to display. How can i remove the expand arrow.
Regards,
Sri
There is a configuration field of the HierarchicalDataSource schema.model object called hasChildren you can add a boolean property to your model which indicates if the your model has items.
This way when the TreeView creates its elements it will check that property (or call the function - you could for example return if the items.leght is greater than zero) and if the returned value is false it wont create the expand arrow in front of the item.
Check this demo.
for an example, I have declared my function like this in my Kendo Ui TreeView :
var inline = new kendo.data.HierarchicalDataSource({
data: #Html.Raw(dataSource),
schema: {
model: {
children: "Children",
hasChildren: function(e) {
var test = e.Children.length;
return test > 0;
}
}
}
});
And for my, it works perfectly !
I can see how to create a jqGrid link using:
colModel: [ {name:'myname',
formatter:'showlink',
formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}
This creates a request like /someurl.php?id=XX&action=edit and the display text will be the value of myname.
But in our case we don't need the myname text - our display text will be hard coded. We don't want to have to pass any additional data down in our JSON request - but it seems you need a JSON attribute for each column. How can we have a link without the add'l JSON column?
The formatter 'showlink' like all other formatter are used to format the data loaded in jqGrid from server or from the local data. So in case of your example you will not have 'myname' text (the column name) in the link but the cell value from the grid.
So if you want to use predefined formatter 'showlink' you have to fill the column data with the text which want to see in the link. You can do this either inside of your JSON data or filling/overwriting the text after the page are loaded for example inside of loadComplete event handle:
loadComplete: function() {
var grid = $("list");
var ids = grid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
grid.setCell(id, 'myname', 'My text for link');
}
}
You can use also custom formatter and custom unformatter instead of 'showlink' predefined formatter. Then you can define the text of link like you want without filling any data in the grid.