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"
});
Related
How can I modify column filter option in kendo grid when grid is loaded? For example
add filter option filterable: { multi: true } or change width width: 120.
More detail, I have this code:
$("#Table").kendoGrid({
dataSource: { data },
pageSize: 30,
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
groupable: true,
filterable: true,
selectable: "multiple, row",
columns:
[{ field: "ID", title: "ID", width: "20px", },
{ field: "Customer.Title", title: "Customer", width: "30px" },
{ field: "Author.Title", title: "Expert", width: "30px" },
{ field: "Body", title: "Body", width: "200px" },
{ field: "RemainderBody", title: "RemainderBody", width: "50px" },
]
}).data("kendoGrid");
I want to modify Customer filterable like filterable: { multi: true }
Going along with #NigelK and suggesting to use setOptions. Here is an example of setting an individual column to use multicheck filtering.
<div id="grid"></div>
<script>
grid = $("#grid").data("kendoGrid");
grid.setOptions({
columns: {
1: {
filterable: {
multi: true
}
}
}
});
</script>
Here is a dojo to test the code above.
You can use the setOptions method to change the grid configuration after it has been created. Check the API reference for the grid:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions
Note that this will destroy and recreate the grid.
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
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.
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"
});