I want to pass column value to the delete confirmation. Are you sure you want to delete "Column Value" ? How can I do this ?
I found the question related to my question in the below link. I want extension to this answer.
How to change the text on Kendo UI Grid destroy or delete command action?
You can use a function instead of a hard coded string for the confirmation message
$("#grid").kendoGrid(
{
dataSource: dataSource,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: {
mode: "inline",
confirmation: function(e){
return "Are you sure that you want to delete record for " + e.ProductName + "?";
}
}
});
Example here
Related
I have one kendo Grid where i need to append an anchor link and also wanted to have a feature to download that kendo grid values(includes Header) into excel.
$("#YourGridName").kendoGridExt({
toolbar: ["excel"],
excel: {
fileName: "Invoice Life Cycle Report.xlsx",
proxyURL: "#Url.Content("~/Plugin/Report/InvoiceAgingReport/GetInvoiceAgingReport")",
filterable: true
},
dataSource: reportData,
columns: [
{
field: "Invoice_Number", title: "Invoice Number", width: "120px", template: '<a onclick = "return ShowDetailedAgingReport(' + "'#= Invoice_Number#'" + ',' + "'#= SBU#'" + ')" href="\\#">#= Invoice_Number#</a>'
},
{
field: "SBU", title: "SBU", width: "120px"
},
{
field: "ScanningDays", title: "Days to Scanning", width: "120px"
},
{
field: "ScanningAndOracleDays", title: "Days between scanning & oracle entry", width: "120px"
},
{
field: "OracleAndAccountingDays", title: "Days between oracle entry & accounting", width: "120px"
},`enter code here`
{
field: "TOTAL", title: "Total travel Days", width: "150px"
}
],
editable: {
mode: "popup",
title: "Invoice Life Cycle Detailed Report",
window: { draggable: false },
},
noRecords: {
template: "No data available."
},
});
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.
Filter icon not displaying in the tab. But when I try to click in the last filter options displayed.
How to show filter icon and what code I need to write..
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: function(){
updateGridForStage(stage)
riskGridTitle()
},
height: 'auto',
scrollable: true,
sortable: true,
filterable: Object,
pageable: false,
columns: [
{ field: "subject", title: "Subject", width: "40%" },
{ field: "status", title: "Status", width: "30%" },
{ field: "risk", title: "Score", width: "10%" },
{ field: "owner", title: "Owner", width: "25%" },
{ field: "days_open", title: "Days Open", width: "15%" },
{ field: "next_review", title: "Next Review Date", width: "25%" },
{ command}]
});
"I need to display icon near status"
I think you have to do just true instead of object
filterable: true
I'm using Kendo UI Grid in my current project. I found out that Sorting doesn't work if column has Template.
In following solution fix only for javascript grid realization:
http://www.kendoui.com/forums/kendo-ui-web/grid/row-template-sorting.aspx
How to achive sorting in Razor mode?
Example of column with template:
columns.Bound(e => e.OrderNumber).Template(e => #Html.ActionLink(e.OrderNumber.ToString(), "Test", "Test"));
Creating a Template for the column and/or using a RowTemplate should not affect the sorting support.
Here is an example via JavaScript (Razor outputs JavaScript at the end and should make no difference)
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable:true,
rowTemplate:"foo #= ProductID#",
height: 430,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: "popup"
});
Popup window doesn't appear if there is a filter on a grid column.
I've added filterable: true in editing-popup.html example file and "Add New Record" doesn't show popup window anymore. (But the new row is still added without validation)
It looks like a bug.
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }],
editable: "popup"
});