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"
});
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 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
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"
});
I am using Kendo UI web in an ASP.NET MVC4 project.
I am trying to create a master/details grids and a detailsTemplate for each. I have some question regarding this situation:
What's the difference between hierarchy and details?
Is it possible to populate the details grid in a separate div on a master row click instead of that little triangle?
This code was my starting point : http://jsfiddle.net/WKSkC/2/
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 430,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{field: "FirstName", title: "First Name", width: "110px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Country", width: "110px" },
{ field: "City", width: "110px" },
{ field: "Title" }
]});
function detailInit(e) {
$("<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");
}
Thank you for your help.
You can use the API of the Grid to expand it programatically.
//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
$(element).data().kendoGrid.expandRow($(this));
})
Here is updated version.
Or you can use make the Grid selectable and use the select event instead of hooking a click event like shown above.