jQWidgets Forums
jQuery UI Widgets › Forums › Getting Started › Not able to edit with replace singleline textbox with text area.
Tagged: text area editor
This topic contains 11 replies, has 2 voices, and was last updated by Syai 11 years, 7 months ago.
-
Author
-
November 11, 2013 at 12:47 pm Not able to edit with replace singleline textbox with text area. #32394
Hello Sir,
I am unable to replace the single line text box with multiline text area.It becomes difficult to edit and update when multi line of data is present in the column.during rendering all the content fits automatically but when I click to edit it the column shrinks and only last line data is visible and i have to use mouse selection to see the whole content. Please help. thank you for your concern.November 11, 2013 at 12:52 pm Not able to edit with replace singleline textbox with text area. #32400Hi Syai,
Unfortunately, there is no Text Area editor in jqxGrid. To create custom editors, you may look at this sample: cellcustomediting.htm.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comNovember 12, 2013 at 4:35 am Not able to edit with replace singleline textbox with text area. #32427Hello Peter,
Thank you for support.I have a question based on delete operation.I am loading all files from the database.Now when I make delete operation on the one row,it gets deleted and updates the grid.but when i delete another it gets deleted but doesnt update the grid and after it doesn’t delete at all..Its weird but I am hoping there is logical answer to this question. Please help..Best Regards
Syai.November 12, 2013 at 4:51 am Not able to edit with replace singleline textbox with text area. #32429Hi Syai,
Please, provide a sample which demonstrates your scenario so we would be able to test it locally and we will check what needs to be modified in your code. The other option is to look at how the Grid’s CRUD demo is implemented.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comNovember 13, 2013 at 5:49 am Not able to edit with replace singleline textbox with text area. #32541function Source(Fetchdetails){
//fetchdetails variables are more loaded from some source._Column=[
{ text: ‘Comments’, editable: true, datafield: ‘Comments’,cellsrenderer:cellsrenderer,cellbeginedit:cellbeginedit},{ text: “Delete”, width:”8%”,filterable: false,
cellsrenderer: function (row, column, value) {
var selRow = $(“#jqxsomegrid”).jqxGrid(‘getrowdata’, row);
var CatchBug=selRow.Comments.split(“”);
if(CatchBug[0]==”Bug Recorded”)
{
return “”;
}
else{return ‘
‘;
}
}
},
//some more code
]var source={
localdata:Fetchdetails,
datatype:”json”,
pagesize: 50,//default loading size for paging.
updaterow: function (rowid, rowdata) {
},
deleterow: function (rowid, commit) {
$.ajax({
type: ‘POST’,
data:JSON.stringify({//sending multiple object}),
contentType: ‘application/json;charset=utf-8’,
dataType: ‘json’,
url: //webservice url
success: function (data, status, xhr) {commit(true);
}
});
},datafields:
[{ name: ‘Comments’, type: ‘string’ }
]
}
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxsomegrid”).jqxGrid(
{
width: “98.5%”,
source: dataAdapter,
editable: true,
selectionmode:’singlecell’,
filterable: true,
autoheight: true,
autorowheight: true,sortable: true,
pageable: true,
pagesizeoptions: [’10’, ’25’, ’50’],
columns:_Column
});
}//Method converts the normal text into clickable link for the attach files.
var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var downloadlink=_websiteURL + “/AttachedFiles/”;
var html = “” + value +”“;
return html;
}//Method is fired whenever any delete button is clicked.This method passes the required data to delete from the database.
function DeleteRow(event) {
var selRow = $(“#jqxsomegrid”).jqxGrid(‘getrowdata’, event.target.id);if ( confirm( “Confirm you want to delete this entry” ) ) {
var commit = $( “#jqxsomegrid” ).jqxGrid( ‘deleterow’, event.target.id);
}
}November 14, 2013 at 9:31 am Not able to edit with replace singleline textbox with text area. #32613If you are having any problem to understand the code you can inform me i will explain.Thank you.
November 14, 2013 at 9:39 am Not able to edit with replace singleline textbox with text area. #32614Hi Syai,
The provided sample code cannot help much in that case, because we are unable to run it locally. Please, provide a full stample(Web Page with JS + HTML) which demonstrates your scenario so we can test it. You can also Format the sample’s code when you post it by using the Forum Editor’s Code Formatting button.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comNovember 14, 2013 at 1:22 pm Not able to edit with replace singleline textbox with text area. #32634hello peter,
On second delete i am getting thses error …………………. “Uncaught TypeError: Cannot read property ‘rowindex’ of null ”
The whole code for the delete option i hope these helps…..
please help……thanking you.{ text: “Delete”, width:”8%”,filterable: false, sortable: false,
cellsrenderer: function (row, column, value) {
var selRow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);
var CatchBug=selRow.Comments.split(“”);
if(CatchBug[0]==”value”)
{
return “”;
}
else{
// return ‘‘;//Code for button.
return ‘‘;
}
}
},function DeleteRow(event) {
debugger;
var selectedrowindex = $(“#jqxgrid”).jqxGrid(“getselectedrowindex”);
var selRow = $(“#jqxgrid”).jqxGrid(‘getrowdata’, event.target.id);
//alert(“id:”+event.target.id+”You are going to delete : ” +selRow.Comments);
if ( confirm( “Confirm you want to delete this entry” ) ) {
var commit = $( “#jqxgrid” ).jqxGrid( ‘deleterow’, event.target.id);
}
}deleterow: function (rowid, commit) {
commit(true);
},November 14, 2013 at 1:33 pm Not able to edit with replace singleline textbox with text area. #32635Hi Syai,
As I stated in my previous post, we cannot use the posted code for testing as it represents a part of your page. However, as far as I see you try to use “deleterow” by passing HTML Element’s ID. “deleterow” works with Row’s Data ID, not with an ID of HTML Element.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comNovember 15, 2013 at 6:43 am Not able to edit with replace singleline textbox with text area. #32682Hi peter,
Thank you for your support, you are right about the that I am passing html id .Bu t can you tell me how to overcome these problem i can get the Id of the row i want to delete . i.e. if I want to delete 3rd row the “event.target.id” will pass me “2” ,now how to get the Row’s Data ID, and If there if way in which i just can refresh all full grid.Regards
SyaiNovember 15, 2013 at 7:23 am Not able to edit with replace singleline textbox with text area. #32686I have modified the your code to the extend of my code all the functionality is there so please check.I hope it runs.
$(document).ready(function () {
var theme = getDemoTheme();
// prepare the data
var data = {};
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
var generaterow = function (i) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“price”] = price;
row[“quantity”] = quantity;
row[“total”] = price * quantity;
return row;
}
for (var i = 0; i < 10; i++) {
var row = generaterow(i);
data[i] = row;
}
var source =
{
localdata: data,
datatype: "local",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
addrow: function (rowid, rowdata, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
deleterow: function (rowid, commit) {commit(true);
},
updaterow: function (rowid, newdata, commit) {
// 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 failed.
commit(true);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 500,
height: 350,
source: dataAdapter,
theme: theme,
columns: [
{ text: 'First Name', datafield: 'firstname', width: 100 },
{ text: 'Last Name', datafield: 'lastname', width: 100 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' },
{ text: "Delete", width:"8%",filterable: false, sortable: false,
cellsrenderer: function (row, column, value) {
var selRow = $("#jqxgrid").jqxGrid('getrowdata', row);
return '‘;//Code for button.},
]
});
$(“#addrowbutton”).jqxButton({ theme: theme });
$(“#addmultiplerowsbutton”).jqxButton({ theme: theme });
$(“#updaterowbutton”).jqxButton({ theme: theme });
// update row.
$(“#updaterowbutton”).on(‘click’, function () {
var datarow = generaterow();
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
$("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
}
});
// create new row.
$("#addrowbutton").on('click', function () {
var datarow = generaterow();
var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
});
// create new rows.
$("#addmultiplerowsbutton").on('click', function () {
$("#jqxgrid").jqxGrid('beginupdate');
for (var i = 0; i < 10; i++) {
var datarow = generaterow();
var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
}
$("#jqxgrid").jqxGrid('endupdate');
});
// delete row.
function DeleteRow(event) {
var selRow = $("#jqxgrid").jqxGrid('getrowdata', event.target.id);
if ( confirm( "Confirm you want to delete this entry" ) ) {
var commit = $( "#jqxgrid" ).jqxGrid( 'deleterow', event.target.id);
}
}
});November 19, 2013 at 5:45 am Not able to edit with replace singleline textbox with text area. #32909thank you peter for you help…i figure it how how to do it ….
-
AuthorPosts
You must be logged in to reply to this topic.