jQuery UI Widgets Forums Grid Input text/Textarea inside rowdetails

This topic contains 3 replies, has 4 voices, and was last updated by  admin 4 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Input text/Textarea inside rowdetails #17335

    warroyo33
    Member

    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?

    Input text/Textarea inside rowdetails #17395

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Input text/Textarea inside rowdetails #113033

    Stifael
    Participant

    Is 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.

    Input text/Textarea inside rowdetails #113040

    admin
    Keymaster

    Hi Stifael,

    Thanks for writing.

    We created a work item about this behavior: https://github.com/jqwidgets/jQWidgets/issues/333

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.