we are testing with textarea editors, and to convert the linebreak to visible HTML format we added a "render" to format the \r\n into <br>
when we try to use text area for update, we faced 3 problems
pic1
1. Although display is good, after save (pressed tab after editing the text in textarea). the <br> seems gone.
pic2
2. The rows setting is 5 rows, when we try to edit the last row, 1 row are blocked by the border of the grid.
3. we simply cannot move up and down within the textarea, instead of moving within the lines of the textarea, it will trigger the update event of the grid.
if we use this option: editModel: { clicksToEdit: 2, saveKey: $.ui.keyCode.ENTER } , we cannot add a new line in the textarea
@using WebMatrix.Data;
@{
if(Request["action"]=="data")
{
var xdatatoshow = @"[{""rank"":1, ""company"":""Exxon Mobil"",""revenues"": ""339,938.0"",""profits"": ""36,130.0"", ""adre"": ""Line1\r\nLine2\r\nLine3""},{""rank"":2, ""company"":""Wal-Mart Stores"",""revenues"": ""315,654.0"", ""profits"":""11,231.0"", ""adre"": ""Line1\r\nLine2\r\nLine3""},{""rank"":3, ""company"":""Royal Dutch Shell"", ""revenues"":""306,731.0"", ""profits"":""25,311.0"", ""adre"": ""Line1\r\nLine2\r\nLine3""},{""rank"":4, ""company"":""BP"", ""revenues"":""267,600.0"",""profits"": ""22,341.0"", ""adre"": ""Line1\r\nLine2\r\nLine3""},{""rank"":5, ""company"": ""General Motors"",""revenues"": ""192,604.0"", ""profits"":""-10,567.0"", ""adre"": ""Line1\r\nLine2\r\nLine3""}]";
@Html.Raw(xdatatoshow)
}
else
{
<html lang="en">
<head>
<link rel="stylesheet" href="./pqgrid/jquery-ui.css">
<script type="text/javascript" async="" src="./pqgrid/ga.js"></script>
<script src="./pqgrid/jquery-2.0.3.min.js"></script>
<script src="./pqgrid/jquery-ui.min.js"></script>
<script type="text/javascript" src="./pqgrid/shCore.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushJScript.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushxml.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcSharp.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcss.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushphp.js"></script>
<link type="text/css" rel="stylesheet" href="./pqgrid/shCoreDefault.css">
<link type="text/css" rel="stylesheet" href="./pqgrid/syntaxhighlighter.css">
<link rel="stylesheet" href="./pqgrid/pqgrid.min.css">
<script src="./pqgrid/touch-punch.js"></script>
<script src="./pqgrid/pqgrid.min.js"></script>
<script src="./pqgrid/localize/pq-localize-zh.js"></script>
<script src="./pqgrid/localize/pq-localize-es.js"></script>
<script src="./pqgrid/localize/pq-localize-it.js"></script>
<script src="./pqgrid/localize/pq-localize-ja.js"></script>
<script src="./pqgrid/localize/pq-localize-hu.js"></script>
<script src="./pqgrid/localize/pq-localize-nl.js"></script>
<script src="./pqgrid/localize/pq-localize-de.js"></script>
<script type='text/javascript' src='jquery/js/jquery.mcAutoComplete.js'></script>
</head>
<style>
div.pq-grid *
{
font-size:12px;
font-family:Verdana;
line-height:21px;
}
img.ui-datepicker-trigger
{
margin-top:2px;
}
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/*div.pq-grid :focus{
outline:none;
}*/
.pq-grid .pq-editor-focus
{
outline:none;
border:1px solid #bbb;
border-radius:6px;
background-image: linear-gradient(#e6e6e6, #fefefe);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#e6e6e6');
background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#fefefe));
background: -moz-linear-gradient(top, #e6e6e6, #fefefe); /* for firefox 3.6+ */
}
input.pq-date-editor
{
padding:0px;vertical-align:bottom;width:90px;z-index:100;position:relative;
}
input.pq-ac-editor
{
padding:2px;z-index:4;position:relative;
}
</style>
<body>
<div id="TESTGRID1"></div>
<script>
var href = "/pqgrid/jquery/css/themes/smoothness/jquery-ui.css";
$('head').append('<link href="' + href + '" rel="Stylesheet" type="text/css" />');
var dataM = {
location: "remote"
,sorting: "remote"
,paging: "local"
,dataType: "JSON"
,method: "POST"
,getData: function (dataJSON) {var data = dataJSON; return {data: data };}
,url: "g_grid_test4.cshtml?action=data"
,recIndx:"rank"
};
var obj = {
width:1200,
editable: true,
title:"Checkbox selections",
selectionModel: { type: 'none' },
pageModel : {type:"remote", rPP:50 },
minWidth: 30,
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "Address", dataIndx: "adre", width: 150, align: "left", dataType: "string", editor:{type:'textarea', attr:'rows=5'},render:function (ui) {if (ui.cellData==null) {return '';} else {return ui.cellData.replace(/\r\n/g,"<br>")}} }
],
dataModel: dataM
};
var $grid = $("#TESTGRID1").pqGrid(obj);
</script>
</body>
</html>
}
}
