jQWidgets Forums

jQuery UI Widgets Forums Grid reload of grid data loses font size

This topic contains 2 replies, has 2 voices, and was last updated by  rrodini 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • rrodini
    Participant

    I have a need to increase/decrease the font size of the grid. I do this in two steps:
    a) increase the rows height: $(“#player_grid”).jqxGrid({rowsheight: newHeight});
    b) increase the font size: $(“.jqx-grid-column-header”).css(“font-size”, newSize);
    $(“.jqx-grid-cell”).css(“font-size”, newSize);

    I have two issues:
    1. Increasing the font size at first works, then it reverts back to the original (mysteriously a decrease works all of the time)
    2. When I reload the grid with data, it always reverts back to the original size.

    Is there a way to avoid these issues?


    Christopher
    Participant

    Hi rrodini,

    to change the font size of the grid you need to define a custom “cellsrenderer” function. You can read more about it here:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm

    Another possible solution is to apply the property “font-size” to the class “.jqx-grid-cell” through your CSS files.

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com


    rrodini
    Participant

    Thanks. The cellrenderer function approach solves issue #2. I still have issue #1. when I dynamically increase the font size through a click event. Here’s what happens. I see the font size increase and a split second later it reverts to the original size.

    Here is the click handler for the increase button size event. When called with up === true doesn’t work. When called with up === false works fine.

    function changeFontSize(up) {
    	var newSize;
    	if (up) {
    		newSize = currentFontSize * SIZE_FACTOR;
    	} else { // must be down
    		newSize = currentFontSize / SIZE_FACTOR;
    	}
    	$("#current_question").css("font-size", newSize );
    	$("#current_answer").css("font-size", newSize);
    	// as per jqWidgets documentation.
    	$(".jqx-grid-column-header").css("font-size", newSize);
    	$(".jqx-grid-cell").css("font-size", newSize);
    	$("body").css("font-size", newSize);
    	currentFontSize = newSize;
    }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.