jQuery UI Widgets › Forums › Grid › Input text/Textarea inside rowdetails
Tagged: datagrid keypress, grid, inputtext, keypress, rowdetail
This topic contains 3 replies, has 4 voices, and was last updated by admin 4 years, 5 months ago.
-
Author
-
Greetings, I have an issue when I want to place an inputText inside the rowdetail, because when I try to modify the input, it modify the row on the Grid that has the rowdetail chained.
At the begining it did nothing whenever I’d pressed any key because my first column was not editable, but I’d realize it that the symbols [,.-ยด+{}] it did allowed me to typed in it; but the other letters don’t. Thinking that the problem was in the tab plugin, I debugged the source code of the tabwidget to realize why it does not allow me to type any text in the textbox; but everything was without no error.
Then I’d remove the first column of my grid, the not editable column, and it was then I realize the problem, because the second column in my grid, this column was editable, so when I start to type in the textbox the changes were taking place in the row of the grid instead of the input textbox of my rowdetail.
this is my grid/rowdetail configuration
var initrowdetails = function (index, parentElement, gridElement, record) { var id = record.uid.toString(); var panel = $($(parentElement).children()[0]); var tabs = panel.find(".detailTab"); var grid = panel.find(".detailGrid"); var propiedades = panel.find(".detailProperty"); var comentarios = panel.find(".detailComent"); tabs.attr("id", "tabs" + id); grid.attr("id", "grid" + id); propiedades.attr("id", "property" + id); comentarios.attr("id", "coment" + id); var detallesbyid = detalleStore[id]; var propiedadesbyid = propertyStore[id].PROPIEDADES; var comentbyid = comentStore[id]; var detallesource = { datafields: [ { name: 'CODIGO' }, { name: 'DESCRIPCION' }, { name: 'FUENTE' } ], datatype: "array", id: 'UUID', localdata: detallesbyid } var dataSource = { datafields: [ { name: 'UUID' }, { name: 'DESCRIPCION' }, { name: 'VALOR' } ], updaterow: function (rowid, rowdata, commit) { propertyStore[id].PROPIEDADES[rowid] = rowdata; }, id: "UUID", datatype: "array", localdata: propiedadesbyid } var adapter = new $.jqx.dataAdapter(dataSource); if (propiedades != null) { createPropertyGrid(propiedades, adapter); } if (grid != null) { grid.jqxGrid({ source: detallesource, theme: theme, width: '99%', autowidth: true, altrows: true, autoheight: true, showemptyrow: false, editable: false, selectionmode: 'none', columns: [ { text: 'CODIGO', datafield: 'CODIGO', width: '10%' }, { text: 'DESCRIPCION', datafield: 'DESCRIPCION', width: '50%' }, { text: 'FUENTE', datafield: 'FUENTE', width: '40%' } ] }); } tabs.jqxTabs({ width: 600, height: 190, theme: theme, animationType: 'fade', selectionTracker: true, keyboardNavigation: false }); tabs.jqxTabs({}); var ancho = ODSgrid.css("width") ancho = ancho.replace("px", ""); ancho = ancho - 31 panel.jqxPanel({ width: ancho, height: 220, theme: theme }); comentarios.val(comentbyid); comentarios.keydown(function () { ODSgrid.jqxGrid({ editable: false }); }); comentarios.keyup(function () { ODSgrid.jqxGrid({ editable: true }); comentStore[id] = comentarios.val(); }); } ODSgrid.jqxGrid( { width: '99%', height: '99%', source: dataAdapter, theme: theme, pageable: true, showemptyrow: true, autoshowloadelement: true, showdefaultloadelement: true, sortable: true, altrows: true, enableanimations: true, editable: true, rowdetails: true, editmode: 'dblclick', keyboardnavigation: false, selectionmode: 'singlerow', initrowdetails: initrowdetails, pagesizeoptions: ['05', '10', '25', '50', '100'], rowdetailstemplate: { rowdetails: detailTemplate, rowdetailshidden: true, rowdetailsheight: 220 }, columns: [ { text: 'CODIGO', datafield: 'UUID', width: '10%', editable: false }, { text: 'DESCRIPCION', datafield: 'DESCRIPCION', width: '60%' }, { text: 'TIPO', datafield: 'TIPO', cellsrenderer: cellsrenderer, width: '15%', editable: false }, { text: 'LONGITUD', datafield: 'LONGITUD', width: '15%' } ] });
and the way I solve my problem was using jQuery to disable the editable tag of my main grid in the event of my textbox->keydown and in the keyup I restore the editable tag to true.
I think it could be better done somehow but I dont know how.
Any ideas?
Hi warroyo33,
Thanks for the valuable feedback.
We confirm the keyboard handling issue in jqxGrid and will do our best to resolve it as soon as possible.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comIs there an update on the first issue mentioned above, where the jqxtextarea only detects non-alphanumeric numbers as soon as a second jqxtextarea has been initialized through initrowdetails? Once that happens, I realized that keypress events are no longer detected for alphanumeric keys.
Hi Stifael,
Thanks for writing.
We created a work item about this behavior: https://github.com/jqwidgets/jQWidgets/issues/333
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.