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.
-
Author
-
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
DeepakHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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%; }
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.