Можно ли в igGrid Infragistics вставить элемент управления
возврат каретки/перевод строки
внутри текста ячейки?
Например, для следующего источника данных:
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 }
];
вы можете видеть между словами Adjustable и Race символы "\r\n", но это не работает... Я пробовал:
"\r", "\r\n", "\line", "<br />", " "
в каждом тесте я вижу на экране символы, а не новую строку... может быть, есть настройка, которую я не знаю...
Если вам нужен полный тестовый пример:
<!doctype html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Scripts/jqueryUI/css/humanity/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Scripts/jquery.hotkeys-0.8.js"></script>
<script type="text/javascript" src="./Scripts/jqueryUI/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="./Scripts/jquery.ba-outside-events.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.loader.js"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.js" type="text/javascript"></script>
<script type="text/javascript">
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 },
{ "Id": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "soldi" : 40.10 },
{ "Id": 316, "Name": "Blade", "ProductNumber": "BL-2036", "soldi" : 50.10 },
{ "Id": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "soldi" : 60.10 },
{ "Id": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "soldi" : 70.10 },
{ "Id": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "soldi" : 80.10 },
{ "Id": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "soldi" : 10.10 }
];
$(function () {
$("#gridUpdating").igGrid({
primaryKey: "Id",
renderCheckboxes: true,
columns: [
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", readOnly: false, width: "200"},
{ headerText: "Product ID", key: "Id", dataType: "number", width: "200" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "200" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" , width: "200" },
{ headerText: "soldi", key: "soldi", dataType: "number" , width: "200", format: "##.##,##" }
],
dataSourceType: "json",
dataSource: ds,
headerRendered: function(evt, ui) {
console.log($($('#gridUpdating').igGrid("headersTable")).html());
},
rowsRendered: function(evt, ui) {
$.each(ui.owner.element.find("tr td:nth-child(5)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html((parseFloat($(this).html(),10).toFixed(2)).toString().replace(".",","));
}
});
$.each(ui.owner.element.find("tr td:nth-child(1)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html("<input type='checkbox' name='chk' id='chk_" + rowId + "' />");
}
});
$(ui.owner.element.find("tr td:nth-child(1)")).bind('click', function(){
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
})
},
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "none",
enableDeleteRow: false,
rowDeleting: function (e, args)
{
alert(1);
},
rowDeleted: function (e, args){
alert(2);
},
columnSettings: [
{ columnKey: "MakeFlag", editorOptions: { type: "bool", readOnly: false, disabled: false} },
{ columnKey: "Id", editorOptions: { type: "numeric", readOnly: true, disabled: true} },
{ columnKey: "Name", editorOptions: { type: "bool", readOnly: true, disabled: true} },
{ columnKey: "ProductNumber", editorOptions: { type: "bool", readOnly: true, disabled: true} }
]
}]
});
});
function bind(){
$("#gridUpdating").igGrid("option", "dataSource", ds);
$("#gridUpdating").igGrid("dataBind");
}
</script>
</head>
<body>
<table id="gridUpdating"></table>
<input type="button" value="BIND" onclick="bind();" />
</body>
</html>
