I have created columns dynamically in the kendo ui grid. The data displayed in the columns could be date , string integer, hyperlinks or any other type.
Data in the column can be integer/hyperlink at the same time. Means for a particular record the data in column can be integer. For next record same column can have a hyperlink value.
I have created fields and added that in the grid.
How can I do this.
You can always set a function against the template of the column you wish to format and conditionally return the content of what you want to appear.
This could look something like this:
var dataSource = new kendo.data.DataSource({
data: [
{ Id:1, val: "value" },
{ Id:"http://google.com", val: "another value" }
]
});
$(function () {
$("#grid").kendoGrid({
columns: [
{
field: "Id",
template: function (dataItem) {
if (typeof dataItem.Id == "string") {
return "" + dataItem.Id + "";
} else {
return dataItem.Id;
}
}
}],
dataSource: dataSource
});
});
Related
I have a kendo grid with a button column. When the button is clicked, I want it to call a javascript function with the row's data as parameters. Here's what I have so far
$(grd).kendoGrid({
dataSource: ds,
detailInit: detailInit,
columns: [ {field: "foo", title: "bar" },
{field: "Y" },
{command: { text: "MyButton", click: doStuff } } ]
});
function doStuff(e)
{
//e is click events but I want to pass in data from the row instead
//following is code I found here but item is null for me
var row = $(this).closest("tr");
var item = $(grd).data("kendoGrid").dataItem(row);
}
This will give you the data pertaining to the row which the button was clicked.
function doStuff(e) {
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var item = this.dataItem(tr); // get the date of this row
alert(item.PropertyName);
}
I have a master-child setup and in my child grid rows, I have a multi-select that uses a list of strings as datasource. When I click to add/remove entries, the already selected items disappear completely and I can only see the drop down with all the values.
Here is the grid column definition in the child grid:
field: "Teams",
title: "Team",
editor: ChildItemEditor,
Here is the editor function that creates the multi-select:
...
var dataSource = ["Item A" , "Item B"];
...
function ChildItemEditor(container, options)
{
$('<select multiselect="multiselect" id="ddlItems" name="childItems" data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoMultiSelect({
autoBind: false,
dataSource: dataSource,
select: function (e) {
var dataItem = this.dataItem(e.item.index());
var selectedItem = this.gridMasterData.dataItem(this.gridMasterData.select());
if (selectedItem == null) {
return false;
}
options.model.Items = this.value();
$(selectedItem.Items).each(function (i, cItem) {
if (options.model.Id == cItem.Id) {
cItem.Items= options.model.Items;
selectedItem.dirty = true
}
});
},
});
}
Found the issue: When reading back data, the second field had a leading space and Multiselect did not automatically Trim the field to bind to it.
i have a div defined for my listview like this:
<div id="carrierList"></div>
Here is my script that defines the listview and its datasource ;
<script type="text/javascript">
$(document).ready(function () {
var t94StragglerCarriers = new kendo.data.DataSource({
transport: {
read: {
url: "/MenuTrain/T94StragglerCarriers",
dataType: "json"
},
schema: {
fields: {
id: { type: "string" },
val: { type: "string" }
}
},
pageSize: 5,
serverPaging : true
}
});
var carriers = $("#carrierList").kendoListView({
dataSource: t94StragglerCarriers,
selectable: true,
pageable : true ,
change: onChange,
template : kendo.template($("#carrierTemplate").html())
}).data("kendoListView");
function onChange() {
var index = carriers.select().index();
var item = carriers.dataSource.view()[index];
console.log("Item " + index + " selected. Guid = " + item.id);
}
});
Here is the template definition for my listview :
<script type="text/x-kendo-tmpl" id="carrierTemplate">
<div id='carrierListVal_#=val#_#=id#' class='k-textbox'>#=val#</div>
<br/>
Here is the action method on my controller :
public JsonResult T94StragglerCarriers( [DataSourceRequest] DataSourceRequest request)
{
return Json(t94RailcarRepository.CarriersWithStragglers(), JsonRequestBehavior.AllowGet);
}
Here is the json string returned by the server :
[{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"CHTT"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"CMO "},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"CTCX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"DBUX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"GATX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"MWCX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"NDYX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"PLMX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"TAEX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"TCIX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"TEIX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"TILX"},{"id":"10eac72a-d62d-434f-8505-4869cdb27b04","val":"UP "},{"id":"ffbcdb6c-4d3a-45f6-8ef6-ada5f28ba44b","val":"MDXx"}]
My problem is that from the onChange event handler, when i try to get the index of the selected listview item, like so :
var index = carriers.select().index();
it is returned a value as if each field in the json string is an element. For example , the first object's id field would be index 0 , and it's val fiedl would be index 1. and so on. Can anyone see what i am doing wrong to get the index of the selected listview item? or is there something wrong with the json string i don't see?
I have added onchange event for kendo-ui grid.
In that I am trying to get the ID value for that particular row. I have added an image column as first column in the grid. What I want is when the image is clicked, I want to open a image url.
So, basically what I want is that when I click the row, I want to get the clicked row index and also I want to get the clicked cell Index in that row.
So based on the row clicked and if it is not the first cell clicked, I want to display alert. If I the first cell is clicked I want to open image.
How can I get this index.
I have set selectable : row in the kendo-ui grid
Please help me on this.
Please try with below code snippet.
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).on("click", "td", function (e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
alert(rowIdx + '-' + colIdx);
});
}
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
<div id="Grid"></div>
If all you need is knowing the row and column index in the table you can do:
$(grid.tbody).on("click", "td", function(e) {
var row = $(this).closest("tr");
var rowIdx = $("tr", grid.tbody).index(row);
var colIdx = $("td", row).index(this);
console.log("row:", rowIdx, "cell:", colIdx);
});
Where I set a click handler for clicking in the cells of the grid.
Then I find to which row (<tr>) that cell belongs to using jQuery closest.
Next use jQuery index for finding the index of that row in the table.
Do the same for finding the cell index inside the row.
But maybe there are simpler ways as detecting if the user clicked on an image, or set some CSS class in the image and then check if the clicked cell has that class,...
EDIT If in addition you want to retrieve the original item inside the click handler. Add
var item = grid.dataItem(row);
From there, you can get id or any other field for validation.
Example here : http://jsfiddle.net/OnaBai/MuDX7/
Kendo has introduced frozen columns since the question has been answered so I think it deserved a little update to deal with that feature.
When you have a frozen column, the grid will create new header / content tables to manage the frozen columns. If you freeze a column, it will move item linked to this column from the regular grid's tbody / thead to the lockedContent / lockedHeader (the opposite is also true).
If you get the index using the accepted answer, you'll get the index of the cell within the tbody (or -1 if the cell is frozen). The real question is what do you want to do with the column index? If you really want an index number, you may have to adjust the value by adding the number of columns in the lockedContent depending on your needs. However, if your final goal is to get the grid's column object, this can be done by using the th element:
var row = cell.closest("tr");
var body;
var header;
if (cell.closest(grid.lockedContent).length) {
body = grid.lockedContent;
header = grid.lockedContent;
} else {
body = grid.tbody;
header = grid.thead;
}
var rowIndex = $("tr", body).index(row);
var columnIndex = $("td", row).index(cell);
var columnField = header.find("th").eq(columnIndex).attr("data-field");
var column;
$.each(grid.columns, function () {
if (this.field === columnField) {
column = this;
return false;
}
});
Disclaimer: just to add a level of complexity, you should also consider that kendo has also introduced a multiple column header feature that may invalidate my code above.
For the cell index, kendo grid has a method cellIndex(cell)
var cell = $("#grid td:eq(1)");
console.log(grid.cellIndex(cell));
I have a grid with 4 columns name, age, collection, profit. But when I try to set a number column it's not reflecting on grid.
schema:
{
model:{
fields:{
name:{type:"string"},
age:{type:"number"},
collection: { type:"number", defaultValue:0.00},
profit: { type:"number", defaultValue:0.00}
}
}
}
This code works perfectly:
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0);
data.set("name", "John Doe");
But I want to update numeric column:
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.at(0);
var collectionVal = 50000;
data.set("collection", collectionVal);
And it's not updating because the column is of type "number".
UPDATE:
pageable:
{
refresh : true,
pageSizes: true
},
edit: function(e)
{
$('input[name="age"]').blur(function()
{
mygrid = $("#grid").data("kendoGrid");
selectedRow = mygrid.select();
dataItem = mygrid.dataItem(selectedRow);
dataItem.collection = dataItem.age * dataItem.profit;
dataItem.set("collection", dataItem.collection);
});
}
Instead of updating collection in a blur handler defined in the edit, define a save event handler in your grid as follow:
pageable : {
refresh : true,
pageSizes: true
},
save : function (e) {
var profit = e.values.profit || e.model.profit;
var age = e.values.age || e.model.age;
this.dataSource.getByUid(e.model.uid).set("collection", age * profit);
}