Cell

7 Jun 202312 minutes to read

Auto wrap

Auto wrap enables the Grid to wrap the cell content or header content to next line when the content exceeds the boundary of the cell width. To enable auto wrap, set the allowTextWrap property as true.

We can specify the mode of auto wrap using wrapMode property of the textWrapSettings.

Three types of wrapMode are available and they are,

  1. Both
  2. Header
  3. Content

NOTE

  1. By default the wrapMode will be set as both.

NOTE

  1. While using textWrapSettings then it is must to set allowTextWrap as true.

NOTE

  1. For wrapMode property you can assign either string value (both) or enum value (ej.Grid.WrapMode.Both).

Both

When the wrapMode of textWrapSettings property is set as both then the auto wrap will be enabled for both the grid content and header.

The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    		$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		allowTextWrap : true,
    		textWrapSettings: {wrapMode: "both"},
    		columns : [
    			{ field: "OrderID", width: 100 },
    			{ field: "EmployeeID", width: 100 },
    			{ field: "Freight", width: 100 },
    			{ field: "ShipCity", width: 150 },
    			{ field: "ShipAddress",headerText:"Ship Address", width: 200 }
    		]
    	});
    	});

    The following output is displayed as a result of the above code example.

    Both Wrap Mode

    When the wrapMode of textWrapSettings property is set as header then the auto wrap will be enabled only for the grid header alone.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    		$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		allowTextWrap : true,
    		textWrapSettings: {wrapMode: "header"},
    		columns : [
    			{ field: "OrderID", width: 100 },
    			{ field: "EmployeeID", width: 100 },
    			{ field: "Freight", width: 100 },
    			{ field: "ShipCity", width: 150 },
    			{ field: "ShipAddress",headerText:"Ship Address", width: 200 }
    		]
    	});
    	});

    The following output is displayed as a result of the above code example.

    Header Wrap Mode

    Content

    When the wrapMode of textWrapSettings property is set as content then the auto wrap will be enable only for the grid content alone.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    		$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		allowTextWrap : true,
    		textWrapSettings: {wrapMode: "content"},
    		columns : [
    			{ field: "OrderID", width: 100 },
    			{ field: "EmployeeID", width: 100 },
    			{ field: "Freight", width: 100 },
    			{ field: "ShipCity", width: 150 },
    			{ field: "ShipAddress",headerText:"Ship Address", width: 200 }
    		]
    	});
    	});

    The following output is displayed as a result of the above code example.

    Content Wrap Mode

    NOTE

    By using getRowHeight method, you can get the row height of the Grid.

    Cell Merging

    The Grid has options to merge the Grid cells based on the required conditions. This can be enabled by setting allowCellMerging property as true and the merge conditions can be defined in mergeCellInfo event. In this event, you can get the column details and data of that particular row and column which is helpful in defining conditions.

    You can merge the rows and cells of grid, using rowMerge, colMerge and merge functions available in mergeCellInfo event’s argument.

    NOTE

    mergeHeaderCellInfo event triggered every time a request is raised while merging the header cell which contains header cell information and element.

    NOTE

    The following features are not supported with Cell Merging

    1. Normal Mode Editing
    2. Inline Mode Editing
    3. Inline TemplateForm Mode Editing
    4. Grouping
    5. Virtual Scrolling
    6. Frozen Columns
    7. Cell Selection Modes
    8. Column Selection

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		allowCellMerging : true,
    		columns : ["OrderID", "EmployeeID", "ShipCity", "ShipCountry", "Freight"],
    		mergeCellInfo : function (args) {
    			if (args.column.field == "EmployeeID" && args.rowData.OrderID == 10248)
    				args.rowMerge(3);
    			else if (args.column.field == "ShipCity" && args.rowData.OrderID == 10252)
    				args.colMerge(3);
    			else if (args.column.field == "ShipCity" && args.rowData.OrderID == 10255)
    				args.merge(0, 3);
    		}
    	});
    });

    The following output is displayed as a result of the above code example.

    Cell Merging

    Custom Attribute

    You can add the custom attribute for the particular column td element by using the customAttributes property of column.

    Based on custom attribute you can customize the style and appearance of the td element or handling jQuery functionalities.

    You can use JsRender syntax in the template.For more information about JsRender syntax, please refer to this link.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "CustomerID" },
    			{ field: "EmployeeID"}, // JsRender syntax usage in custom Attribute
    			{ field: "ShipCity", customAttributes: { "title": "{{:ShipCity }}" } },
    			{ field: "ShipCountry" }
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Custom Attribute

    Displaying HTML content

    This will helps you to show actual HTML value in the grid content and header. To disable HTML code, set the disableHtmlEncode property of columns as true.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "CustomerID", headerText: "<div>Customer ID</div>", disableHtmlEncode: true },
    			{ field: "EmployeeID", headerText: "<div>Employee ID</div>", disableHtmlEncode: false },
    			{ field: "ShipCountry" }
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Display HTML

    Tooltip

    When you move the cursor over the particular cell it provides an information about the corresponding cell value.

    Template

    HTML templates can be specified in the tooltip property of the particular column cell as a string (HTML element) or ID of the template’s HTML element.You can use JsRender syntax in the template. For more information about JsRender syntax, please refer to this link.

    NOTE

    It’s a standard way to enclose the template within the script tag with type as “text/x-jsrender”.

    NOTE

    To modify the tooltip for the Grid column header alone, use headerTooltip

    NOTE

    The tooltip template must contain value property to bind the corresponding cell text in tooltip

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
    <script type="text/template" id="colTip">
     {{:value }}  
    </script>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "EmployeeID"},
    			{ field: "ShipCity", tooltip: "#colTip"},
    			{ field: "Freight"}
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Tooltip

    ClipMode

    When the cell value contains a long text that will not fit into the grid column cell, the clipMode property is used. By using the clipMode , the cell value will be displayed with ellipsis or with clipped content when the text overflows inside a column cell.

    NOTE

    1. By default the clipMode will be set as clip.

    NOTE

    1. For [clipMode ] property you can assign either string value (ellipsis) or enum value (ej.Grid.ClipMode.Ellipsis).

    List of Enumeration types

    1. Clip
    2. Ellipsis
    3. EllipsisWithTooltip

    Clip

    When the content overflows, the remaining content will be hidden in the particular cell.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "ShipCity"},
    			{ field: "ShipName", clipMode: ej.Grid.ClipMode.Clip},
    			{ field: "Freight"}
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Clip Mode

    Ellipsis

    Ellipsis will be displayed when the content overflows its column width. Here tooltip will not be shown for corresponding columns.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "ShipCity"},
    			{ field: "ShipName", clipMode: ej.Grid.ClipMode.Ellipsis},
    			{ field: "Freight"}
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Ellipsis

    Ellipsis With Tooltip

    Ellipsis will be displayed when the content overflows its column width. Here the tooltip will be shown only for the corresponding column cells that shows ellipsis.

    NOTE

    If clipMode is set as EllipsisWithTooltip, then tooltip must be given.

    The following code example describes the above behavior.

  • HTML
  • <div id="Grid"></div>
    <script type="text/template" id="colTip">
     {{:value }}  
     </script>
  • JAVASCRIPT
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		allowPaging : true,
    		columns : [
    			{ field: "OrderID" },
    			{ field: "ShipCity"},
    			{ field: "ShipName",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip},
    			{ field: "Freight"}
    		]
    	});
    });

    The following output is displayed as a result of the above code example.

    Ellipsis with Tooltip