Multiple lines of text in the cell

[edobrenkoMember]

Hi,

I have simple grid (selectionmode: ‘multiplecellsextended’). Some cells in this grid might have text with multiple lines in it.  I am trying to achieve functionality where I would click on the cell with multiple lined text and whole row’s height should increase based on how many rows inside that clicked cell. So I am having 2 problems here:

1) Can’t figure out how to have multiple lines of text in the cell. I’ve tried to play with cellsrenderer and having <br /> in the values of the cells, with no success.

2) How would I attach onclick event to particular cell

Thanks.

PS: See my code below

$(document).ready(function () {
			var theme = '';

			// prepare the data
			var data = generatedata();

			var source =
            {
            	localdata: data,
            	datatype: "array"
            };

            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

            	return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';

            }

			// initialize jqxGrid
			$("#jqxgrid").jqxGrid(
            {
            	width: 750,
            	autoheight: true,
            	source: source,
            	theme: theme,
            	selectionmode: 'multiplecellsextended',
				enablehover: false,
            	columns: [
                  { text: '', datafield: 'id', width: 50 },
                  { text: 'SUN', datafield: 'SUN', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'MON', datafield: 'MON', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'TUE', datafield: 'TUE', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'WED', datafield: 'WED', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'THU', datafield: 'THU', width: 100, cellsrenderer: cellsrenderer },
                  { text: 'FRI', datafield: 'FRI', width: 100, cellsrenderer: cellsrenderer },
				  { text: 'SAT', datafield: 'SAT', width: 100, cellsrenderer: cellsrenderer }
                ]
            });				

		});

        function generatedata() {

			// prepare the data
        	var data = new Array();

			//rows
        	var hours =
			[
				"12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"
			];

           	var sun =
			[
				"", "", "", "Line 1 <br />Line2 <br />Line 3", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""
			];

           	var wed =
			[
				"", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""
			];

           	var thu =
			[
				"", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""
			];

           	for (var i = 0; i < hours.length; i++) {
           		var row = {};

           		row["id"] = hours[i];
           		row["SUN"] = sun[i];
           		row["MON"] = "";
           		row["TUE"] = "";
           		row["WED"] = wed[i];
           		row["THU"] = thu[i];
           		row["FRI"] = "";
           		row["SAT"] = "";

           		data[i] = row;
           	}

           	return data;
		}

[Peter StoevKeymaster]

Hi edobrenko,

1. To make a cell to support wrapping, you can set the ‘white-space’ to ‘normal’. Wrapping a text will not increase the row’s height.

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    return '<div style="white-space: normal;">' + value + '</div>';
}
$("#jqxgrid").jqxGrid(
{
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: [
        { text: 'First Name', dataField: 'firstname', width: 100 },
        { text: 'Last Name', dataField: 'lastname', width: 100 },
        { text: 'Product', dataField: 'productname', cellsrenderer: cellsrenderer, width: 180 },
        { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
});

2. To handle cell clicks, use the ‘cellclick’ event.

            $("#jqxgrid").on('cellclick', function (event) {
                var args = event.args;
            });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[edobrenkoMember]

Thanks Peter,
So there is not a standard way if increasing row’s height based on my needs?
When my grid rendered, I see div with id=row1jqxgrid, which represents row and it has fixed height:25px so seems like on init it puts that value by default. I was able to modify that height, just put 75 and it looks exactly ho I want, in addition I would need to deal with grid’s height cause it pushes rows down and cuts last rows up.
In any case I think it should be a way to init/setup row height and modify it on the fly, please let me know if you know solution. Thanks again.

[Peter StoevKeymaster]

Hi edobrenko,

The Rows Height depends only on the Grid’s rowsheight property and the default value of the rowsheight is 25px. If you want to change the height of the Grid rows, set a new value to this property. Changing the height of individual rows is a feature which will be implemented in a future version. Modifying the CSS properties of the elements built internally by jqxGrid is not suggested and could break the widget’s layout.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[edobrenkoMember]

ok thanks Peter.
Two more questions:
1) By any possibility this functionality (dynamically changing particular row’s height) planned to be added in the next release?
2) Are any right click or double click events on the cell?
regards

[Peter StoevKeymaster]

Hi edobrenko,

– The implementation of the requested feature will not be included in the next version. We’ll update our Roadmap when the feature is planned for a specific version.
– There’s a celldoubleclick event which allows you to handle double-clicks in jqxGrid.

The sample below shows how to open context menu on a right click:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup', theme: theme });
            $("#jqxgrid").bind('contextmenu', function (event) {
                var scrollTop = $(window).scrollTop();
                var scrollLeft = $(window).scrollLeft();
                contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
       
                return false;
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
      <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul>
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                            <li><a href="#">The Team</a>
                                <ul>
                                    <li><a href="#">Brigita</a></li>
                                    <li><a href="#">John</a></li>
                                    <li><a href="#">Michael</a></li>
                                    <li><a href="#">Peter</a></li>
                                    <li><a href="#">Sarah</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </li>
                    <li>Services
                        <ul>
                            <li><a href="#">Product Development</a></li>
                            <li><a href="#">Delivery</a></li>
                            <li><a href="#">Shop Online</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Training &amp; Consulting</a></li>
                        </ul>
                    </li>
                    <li>Products
                        <ul>
                            <li><a href="#">New</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Used</a>
                                <ul>
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                            <li><a href="#">Top Rated</a></li>
                            <li><a href="#">Prices</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact Us</a>
                        <ul>
                            <li><a href="#">Enquiry Form</a></li>
                            <li><a href="#">Map &amp; Driving Directions</a></li>
                            <li><a href="#">Your Feedback</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts