jQuery UI Widgets Forums Grid Styling for Grid Cell in Edit Mode

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 11 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Styling for Grid Cell in Edit Mode #26628

    DeeCan
    Member

    Hi All,

    I have a grid application in which users enter a lot of text. I render the contents using the renderer function as below to implement text-wrap and line breaks :

                var renderer = function (row, column, value) {
    var renderstring = value.replace(/\|/g, "<br>");
    return '<div style="width: ' + '90%' + '; margin: 4px; font-size : 11px; white-space: normal;">' + renderstring + '</div>';
    };

    It will be very useful if I can apply the same settings to the cell while it is being edited, so that users can see how the text will appear after edit as they type. Is there any way to set the rendering of the cell when in edit mode ? I could not find a CSS class that has settings for the edit mode.

    Thanks
    Deepak

    Styling for Grid Cell in Edit Mode #26667

    Dimitar
    Participant

    Hello Deepak,

    Unfortunately, there is no “live preview” in edit mode. However, the user may enter HTML markup in the cell which will affect its look after edit. For example, the user input may be:

    <span style="color: Red;">Red</span> text

    and the outcome will be:

    Red text

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Styling for Grid Cell in Edit Mode #26825

    DeeCan
    Member

    Hi Dimitar,

    I have a follow-up question – what is the difference between the following two classes in the CSS file ? Am I right in assuming that jqx-grid-cell applies to the rendered cell and the jqx-grid-content to the editor ? Please let me know.

    Thanks
    Deepak

    /*applied to a grid cell*/
    .jqx-grid-cell {
    border-style: solid;
    border-width: 0px 1px 1px 0px;
    margin-right: 1px;
    margin-bottom: 1px;
    border-color: transparent;
    background: #fff;
    white-space: normal;
    font-weight: normal;
    font-size: inherit;
    overflow-y: auto;
    position: absolute !important;
    height: 100%;
    }
    /*applied to the grid cells area.*/
    .jqx-grid-content {
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: black;
    white-space: normal;
    overflow-y: auto;
    width: 100%;
    }
    Styling for Grid Cell in Edit Mode #26877

    Dimitar
    Participant

    Hi Deepak,

    You are incorrect. The class jqx-grid-cell applies to all grid cells regardless of their state. The class jqx-grid-content applies only to the grid content – the div which includes all the cells without the column headers.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.