#c# #kendo-ui #kendo-grid #kendo-asp.net-mvc
#c# #kendo-пользовательский интерфейс #kendo-grid #kendo-asp.net-mvc
Вопрос:
У меня есть два класса:
- DealCashFlowBC
- CusipCashFlowBC
Сделка может содержать информацию о нескольких cusip, поэтому у нас есть список типа CusipCashflowBC в DealCashFlowBC.
Теперь проблема в:
- Мне нужно динамически связать эти столбцы в kendo grid
- В моем случае я выполнил привязку данных, но заголовков столбцов там нет.
Вот код:
public class DealCashFlowBC
{
public string DealName { get; set; }
public int Period { get; set; }
public DateTime Date { get; set; }
public int NetInterest { get; set; }
public int PeriodicASER { get; set; }
public int AdjustedNetInterest { get; set; }
public int TotalPrincipal { get; set; }
public int Balance { get; set; }
public int PrincipalLoss { get; set; }
public List<CusipCashFlowBC> CCFBC { get; set; }
}
public class CusipCashFlowBC
{
public string Cusip { get; set; }
public int Period { get; set; }
public string ClassName { get; set; }
public double? Interest { get; set; }
public double Principal { get; set; }
public double Loss { get; set; }
public double EndBal { get; set; }
public double Penalty { get; set; }
public double AccumulatedShortfall { get; set; }
}
Код сетки:
.Columns(columns =>
{
columns.Bound(e => e.Period).Title("Period").Width(100);
columns.Bound(e => e.Date).Title("Settlement Date").Width(100);
columns.Bound(e => e.NetInterest).Title("Net Interest @ original terms").Width(80);
columns.Bound(e => e.PeriodicASER).Title("Periodic ASER").Width(100);
columns.Bound(e => e.AdjustedNetInterest).Title("Adjusted Net Interest").Width(100);
columns.Bound(e => e.TotalPrincipal).Title("Total Principal").Width(100);
columns.Bound(e => e.Balance).Title("Balance").Width(100);
columns.Bound(e => e.PrincipalLoss).Title("Principal Loss").Width(100);
columns.Template(e => { }).ClientTemplate("#=iterate(CCFBC)#").Title("CCFBC");
Javascript:
function iterate(ReportList) {
var template = "";
for (var i = 0; i < ReportList.length; i ) {
template = template "<td role='gridcell'>" ReportList[i].Cusip "</td><td role='gridcell'>" ReportList[i].Period "</td><td role='gridcell'>" ReportList[i].ClassName "</td><td role='gridcell'>" ReportList[i].Principal "</td>";
}
return template;
}
Проблема: не удается получить заголовки для динамических столбцов
Я хочу заголовок для этих динамических столбцов, генерируемый из итерации шаблона клиента.
Ответ №1:
Для получения динамических столбцов я предлагаю вам использовать альтернативный подход, а не клиентские шаблоны, потому что вам нужно будет изменить HTML строки заголовка, что может привести к ошибкам при сортировке и фильтрации.
<div id="grid"></div>
<script>
var products = [{
ProductID : 1,
ProductName : "Chai",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "10 boxes x 20 bags",
UnitPrice : 18.0000,
UnitsInStock : 39,
UnitsOnOrder : 0,
ReorderLevel : 10,
Discontinued : false,
Category : [{
CategoryID : 1,
CategoryName : "Beverages",
Description : "Soft drinks, coffees, teas, beers, and ales"
},{
CategoryID : 2,
CategoryName : "Condiments",
Description : "Sweet and savory sauces, relishes, spreads, and seasonings"
}]
},
{
ProductID : 2,
ProductName : "Chang",
SupplierID : 1,
CategoryID : 1,
QuantityPerUnit : "24 - 12 oz bottles",
UnitPrice : 19.0000,
UnitsInStock : 17,
UnitsOnOrder : 40,
ReorderLevel : 25,
Discontinued : false,
Category : [{
CategoryID : 1,
CategoryName : "Beverages",
Description : "Soft drinks, coffees, teas, beers, and ales"
},
{
CategoryID : 3,
CategoryName : "Confections",
Description : "Desserts, candies, and sweet breads"
}]
}]
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px", sortable: true, filterable: true },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" , sortable: true, filterable: true},
{ field: "Discontinued", width: "130px" , sortable: true, filterable: true},
{ field: "Category", sortable: false, filterable: false,
template: function iterate(dataItem)
{
var template = "";
for (var i = 0; i < dataItem.Category.length; i ) {
template = template "<td role='gridcell'>" dataItem.Category[i].CategoryName
"</td><td role='gridcell'>"
dataItem.Category[i].Description "</td>";
}
return template;
}
}],
dataBound:function(e)
{
$("#grid thead tr").append('<th scope="col" role="columnheader" data-field="Category" aria-haspopup="true" class="k-header">Category Desc</th><th scope="col" role="columnheader" data-field="Category" aria-haspopup="true" class="k-header">Category</th><th scope="col" role="columnheader" data-field="Category Desc" aria-haspopup="true" class="k-header">Category Desc</th>');
}
});
});
</script>
Альтернативами могут быть:-