Grid with multiline textbox editor - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, grid, initeditor, jquery grid, jqxgrid, jqxTextArea, Textarea

This topic contains 2 replies, has 2 voices, and was last updated by pratibhapandey 9 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Grid with multiline textbox editor Posts
January 7, 2016 at 1:07 pm Grid with multiline textbox editor #80181

pratibhapandey
Participant

Hello team,

I have scenario where I am trying to use the textarea in grid using customediting. Now when I click the firstName column for first row, everything is fine. It allows me to edit the value.
But when I click on the second row, it displays the data for the same data which I entered in the first textarea which is weird. Can you please tell me what I am doing wrong here and what changes I can do to fix this.

The entire html code is given below:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this demo the jqxTree is built from
JSON data.</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css”
type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css”
type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxeditor.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtextarea.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<style type=”text/css”>
.editedRow {
color: #b90f0f !important;
font-style: italic;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
console.log(data);
// array which keeps the indexes of the edited rows.
var editedRows = new Array();
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata, commit) {
// that function is called after each edit.
var rowindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindexbyid’, rowid);
editedRows.push({ index: rowindex, data: rowdata });
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
var cellclass = function (row, datafield, value, rowdata) {
for (var i = 0; i < editedRows.length; i++) {
if (editedRows[i].index == row) {
return “editedRow”;
}
}
}
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 350,
source: dataAdapter,
editable: true,
columnsresize: true,
pageable: true,
autorowheight: true,
autoheight: true,
rowsheight: 60,
selectionmode: ‘multiplecellsadvanced’,
columns: [
{ text: ‘First Name’, columntype: ‘template’, cellclassname: cellclass, datafield: ‘firstname’, width: 120,
createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
console.log(editor);
console.log(cellvalue);
console.log(celltext);
var editorElement = $(‘<textarea id=”customTextArea’+row+'”></textarea>’).prependTo(editor);
editorElement.jqxTextArea({ height: 58, width: ‘100%’,minLength: 1});
editorElement.val(cellvalue);
},
geteditorvalue: function (row, cellvalue, editor) {
return $(‘#customTextArea’+row).val();
}
},
{ text: ‘Product’, columntype: ‘dropdownlist’, cellclassname: cellclass, datafield: ‘productname’, width: 195,pinned: true }
]
});
});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>

“font-size: 12px; font-family: Verdana, Geneva, ‘DejaVu Sans’,
sans-serif; margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>
</div>
</body>
</html>

January 8, 2016 at 11:09 am Grid with multiline textbox editor #80244
Dimitar
Participant
Hello pratibhapandey,

Please update your column definition as follows:
```
{
    text: 'First Name',
    columntype: 'template',
    cellclassname: cellclass,
    datafield: 'firstname',
    width: 120,
    createeditor: function(row, cellvalue, editor, celltext, cellwidth, cellheight) {
        console.log(editor);
        console.log(cellvalue);
        console.log(celltext);
        var editorElement = $('<textarea id="customTextArea' + row + '"></textarea>').prependTo(editor);
        editorElement.jqxTextArea({
            height: 58,
            width: '100%',
            minLength: 1
        });
    },
    initeditor: function(row, cellvalue, editor, celltext, pressedChar) {
        editor.find('textarea').val(cellvalue);
    },
    geteditorvalue: function(row, cellvalue, editor) {
        return editor.find('textarea').val();
    }
}
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
January 8, 2016 at 5:23 pm Grid with multiline textbox editor #80262

pratibhapandey
Participant

Thanks Dimitar 🙂
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.