I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}
Related
I have a grid and a multiselect ,i want to filter the grid by the multiselect according to what i select ,and when i de select,the grid should be filterd accordingly,here is my grid:
$("#grid").kendoGrid({
dataSource: ds2,
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{ field: "name",
title: "Name",width:"50px"},
{ field: "Description",
title: "Description", width: "80px"
},
{ field: "WindSpeed",
title: "Wind Speed", width: "40px"
},
{ field: "RPM",
title: "RPM", width: "40px"
},
{ field: "Power",
title: "Power", width: "40px"
}
]
});
the data which bind the datasource:
var ds1 = new kendo.data.DataSource({
data: rsturn_f.EventNames
});
var ds2 = new kendo.data.DataSource({
data: rsturn_f.Data
});
and here is the multi select:
$("#evnts").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "Nme",
dataValueField: "Nme",
//autoBind: false,
select: onSelect,
deselect: onDeselect,
dataSource: ds1
});
by onselect i do this:
function onSelect(e) {
ds2.filter({ field: "Description", operator: "startswith", value: e.dataItem });
}
now if i want to filter on multiple value and un filter by removing the values from multiselect i dont know what should i do,any idea?
You have to use change event of the Multiselect. You can directly use a function in the operation attribute which is passed to the dataSource filter API.
function onChange(e) {
ds2.filter({ field: "Description", value: this.value(),
operator: function(currentValue, filterValues){
if(filterValues.length===0){
return true;
}
if(filterValues.indexOf(currentValue)!==-1){
return true;
}
return false;
}
});
}
I'm trying to have a kendo grid column extremely thin, basically like a line. Reducing the width property below 10px or 10 doesn't seem to have any effect.
Here's what I'm doing:
let mainGridOptions = {
dataSource: myData,
columns: [{
field: "color",
title: " ",
width: '5px' // tried even without px, just 5
}]
};
Anyone know what's happening?
I am not able to reproduce it I please try with the below code snippet or look in this demo.
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: '5px'
}]
});
});
</script>
If you will set the column width to '5px' then you could not see anything into column because some default spacing(Margin/padding) applied to the columns.
I have the sample codes as follows:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}]
});
function whenSorting(){
//// DO SOMETIME......
}
});
Now what I want is when I do sorting of any field the function "whenSorting" will be called. How to do that?
You have local sorting enabled "sortable: true," , for this you can capture it with databound event
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}],
dataBound: function(e) {
whenSorting();
}
});
function whenSorting(){
//// DO SOMETIME......
}
});
IF you are using server sorting you can handle it in the server read .
Hope this helps
You may bind Change function and check whether sorting exist or not on every grid change
$('#grid').data('kendoGrid').dataSource.bind('change',function(){
// Get the grid object
var grid = $("#grid").data("kendoGrid");
// Get the datasource bound to the grid
var ds = grid.dataSource;
// Get current sorting
var sort = ds.sort();
// Display sorting fields and direction
if (sort) {
for (var i = 0; i < sort.length; i++) {
alert ("Field:" + sort[i].field + " direction:" + sort[i].dir);
}
} else {
alert("no sorting");
}
});
i hope this will help you
You could define a custom sort function for each of your columns and fire your whenSorting event from there, like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200,
sortable { compare: whenSorting }
}, {
field: "ContactTitle",
title: "Contact Title",
sortable { compare: whenSorting }
}, {
field: "CompanyName",
title: "Company Name",
sortable { compare: whenSorting }
}]
});
function whenSorting(a, b){
//// DO SOMETIME......
return a == b
? 0
: a > b
? 1
: -1;
}
});
I was using jQuery to hide columns, I was not able to use kendo's hideColumn and showColumn functions. When sorting I would end up with a column I wanted hidden showing up after the sort event was fired. I found that using the above mentioned block then writing a function using jQuery to show or hide the column worked like I intended things to.
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: getData(),
height: 550,
sortable: true,
pageable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}],
dataBound: function(e) {
whenSorting();
}
});
function whenSorting(){
if(_checkBox.is(':checked'){
grid.find("table th").eq(4).show();
grid.children("div:eq(1)").find("table").find("tr").each(function () {
$(this).children("td:eq(4)").show();
});
}
});
Might want to check your formatting with this one too.
I have a kendo grid and I want to add a footerTemplate, but the value for the footerTemplate will be dynamic (other computations will be involved.) My question now, how to use the computed value to the footherTemplate?
Below is my sample code.
var computedValue= compute();
$("#grid").kendoGrid({
dataSource: {
data: setData(),
pageSize: 10
},
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "UnitPrice", title: "Unit Price",
footerTemplate: "Price : #=computedValue#"
},
{ field: "UnitsOnOrder", title: "Units On Order"},
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
as you can see, the value for the footerTemplate is from a "var computedValue", now when I do that nothing happens. What is the correct way in order to show the value?
Thanks
Simply use a function for the footer template. Then, your function will be called each time the grid updates its contents.
footerTemplate: function(data) {
return "Price: " + compute();
}
You can use your function like this.
Kendo grid
$("#grid").kendoGrid({
dataSource: window.ds,
scrollable: false,
pageable: true,
editable: true,
columns: [
{ field: "Name", title: "Name" },
{ field: "Value", title: "Value",
footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>" }
]
});
Javasript Function
<script>
function calc() {
// assume this to be dynamically determined
var field = "Value";
// assume this to be dynamically determined
var dataSource = window.ds;
// some custom calc logic
var newValue = 0;
$.each(dataSource.data(), function(index, model) {
newValue += model.get(field);
});
return newValue;
}
</script>
Refrence Link
I would like to disable DiscountPercentageMRC/NRC/Usage columns for certain CatalogProductId's. Please find below javascript for the grid. Any help would be greatly appreciated.
<h2>Kendo Grid bound to ASP.NET MVC action methods</h2>
#* The DIV where the Kendo grid will be initialized *#
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
columns: [
{ field: "CompanyId"},
{ field: "CompanyName" },
{ field: "DiscountPercentageMRC" },
{ field: "CatalogProductId"},
{ field: "DiscountPercentageMRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageNRC" },
{ field: "DiscountPercentageUsage"}
],
height: 400,
editable: true, // enable editing
pageable: true,
sortable: true,
filterable: true,
toolbar: ["create", "save", "cancel","edit"], // specify toolbar commands
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
batch: true,
editable: "inline",
transport: {
read: {
url: "#Url.Action("ResellerDiscountsGet", "AccountDetail", new { BusOrdId = #ViewBag.Message })",
type: "POST",
}
}
},
selectable: true
});
});
</script>
You would use the Edit event to enable/disable cells. I created a working example here: http://jsfiddle.net/Eh8GL/151/
function OnEdit(e) {
// Make sure it's not a new entry
if (!e.model.isNew()) {
var catalogproductid = e.container.find("input[name=CatalogProductId]").data("kendoNumericTextBox").value();
// Disable DiscountPercentageMRC if catalog productid = 100
if (catalogproductid == 100) {
var disableField = e.container.find("input[name=DiscountPercentageMRC]").data("kendoNumericTextBox");
disableField.enable(false);
}
}
}