jQuery UI Widgets › Forums › Lists › DropDownList › Row colouring of rendered item using coloured rows with checkboxes

Tagged: , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  alastairwalker 4 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Row colouring of rendered item using coloured rows with checkboxes Posts
  • June 4, 2020 at 7:28 am Row colouring of rendered item using coloured rows with checkboxes #112133

    alastairwalker
    Participant

    I am using the DDL with the checkbox feature.

    I have a need to represent data rows that are coloured, and also to represent the rendered display as coloured as well, with the same colouring as the row colour. (By the way, there is no need for different colours, the row colour and rendered colour can be the same.)
    The sample code I am using is below, and is based on the demo DDL script for checkbox demonstration.
    The last row in the sample data is coloured using <span></span> html.
    While the rows are correctly coloured, and the checked item is rendered in the concatenated list of selected items, the html is presented, not the coloured item from the row.
    Is there any work around to this?
    Any help will be really appreciated!

    Alastair 

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
    <title id='Description'>In this demo is illustrated how to display checkboxes next to the DropDownList items.</title>
    <link rel="stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () 
            {
	            var source = [
				"Affogato",
				"Americano",
				 "Bicerin",
				 "Breve",
				 "Café Bombón",
				 "Café au lait",
				 "<SPAN STYLE='background-color:#b6dbc0;'>Café au lait</SPAN>"
				];
	            $("#jqxDropDownList").jqxDropDownList({
					source: source,
					width:600,
					selectedIndex: 3,
					theme: 'energyblue',
					checkboxes:true
				});
            });
        </script>
        <div>
          <div id='jqxDropDownList'></div>
        </div>
    </div>
</body>
</html>
    June 4, 2020 at 10:35 am Row colouring of rendered item using coloured rows with checkboxes #112134

    Hristo
    Participant

    Hello alastairwalker,

    Could you provide us with more details?
    I would like to suggest you try the renderer and the selectionRenderer callbacks.
    With them, you could override the visualized items.
    More details about them you could find in the API Documentation page.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    June 4, 2020 at 1:32 pm Row colouring of rendered item using coloured rows with checkboxes #112139

    alastairwalker
    Participant

    Many thanks for the comments!

    I will try out the suggestion!

    Alastair

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

You must be logged in to reply to this topic.