Cell

12 Feb 201824 minutes to read

Auto wrap

Auto wrap enables the Grid to wrap cell content or header content to next line when the content exceeds the boundary of the cell width. To enable auto wrap, set 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.

Both

When WrapMode of TextWrapSettings property set as Both then the auto wrap will be enable for both grid content and header.

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"  AllowTextWrap="true">
      <TextWrapSettings WrapMode="Both" />
        <Columns>
                <ej:Column Field="OrderID"   Width="90" />
                <ej:Column Field="CustomerID" Width="100" />
                <ej:Column Field="EmployeeID" Width="100" />
                <ej:Column Field="Freight" Width="90"  />
                <ej:Column Field="ShipAddress" HeaderText="Ship Address"  Width="110" />
         </Columns>
       </ej:Grid>
     </asp:Content>

C#

namespace WebSampleBrowser.Grid
    {
        public partial class _Default : Page
        {
        protected void Page_Load(object sender, EventArgs e)
            {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
      }
    }

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

Header

When WrapMode of TextWrapSettings property set as Header then the auto wrap will be enable only for grid header alone.

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"  AllowTextWrap="true">
      <TextWrapSettings WrapMode="Header" />
        <Columns>
                <ej:Column Field="OrderID"   Width="90" />
                <ej:Column Field="CustomerID" Width="100" />
                <ej:Column Field="EmployeeID" Width="100" />
                <ej:Column Field="Freight" Width="90"  />
                <ej:Column Field="ShipAddress" HeaderText="Ship Address"  Width="110" />
         </Columns>
     </ej:Grid>
     </asp:Content>

C#

namespace WebSampleBrowser.Grid
    {
        public partial class _Default : Page
        {
        protected void Page_Load(object sender, EventArgs e)
            {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
      }
    }

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

Content

When WrapMode of TextWrapSettings property set as Content then the auto wrap will be enable only for grid content alone.

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"  AllowTextWrap="true">
      <TextWrapSettings WrapMode="Content" />
        <Columns>
                <ej:Column Field="OrderID"   Width="90" />
                <ej:Column Field="CustomerID" Width="100" />
                <ej:Column Field="EmployeeID" Width="100" />
                <ej:Column Field="Freight" Width="90"  />
                <ej:Column Field="ShipAddress" HeaderText="Ship Address"  Width="110" />
         </Columns>
     </ej:Grid>
     </asp:Content>

C#

namespace WebSampleBrowser.Grid
    {
        public partial class _Default : Page
        {
        protected void Page_Load(object sender, EventArgs e)
            {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
      }
    }

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

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

The following features are not supported with Cell Merging

1. Normal Mode Editing
2. Inline Mode Editing
3. Inline TemplateForm Mode Editing

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true" AllowCellMerging="true">
        <ClientSideEvents MergeCellInfo="mergeCellInfo" />
        <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="EmployeeID" />
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipCountry" />
            <ej:Column Field="Freight" />
        </Columns>
    </ej:Grid>
</asp:Content>

JS

<script type="text/javascript">
        function mergeCellInfo(args) {
            if (args.column.field == "EmployeeID" && args.rowData.OrderID == 10261)
                args.rowMerge(3);
            else if (args.column.field == "ShipCity" && args.rowData.OrderID == 10265)
                args.colMerge(3);
            else if (args.column.field == "ShipCity" && args.rowData.OrderID == 10268)
                args.merge(0, 3);
        }
    </script>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
         protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

Custom Attribute

You can add Custom attribute for particular column td element by using CustomAttributes property of the column.

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

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

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
        <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="CustomerID" />
            <ej:Column Field="EmployeeID" HeaderText="Employee Name">
                <CustomAttribute>
                    <ej:KeyValue Key="employeeid" Value="5" />
                </CustomAttribute>
            </ej:Column>
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipCountry" />
        </Columns>
    </ej:Grid>
</asp:Content>

CSS

<style>
        .e-rowcell[employeeid = "5"] {
            color: red;
        }	
    </style>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

Displaying HTML content

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

The following code example describes the above behavior.

HTML

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
        <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="CustomerID" HeaderText="<div>Customer ID</div>" disableHtmlEncode="true"/>
            <ej:Column Field="EmployeeID" HeaderText="<div>Employee ID</div>" disableHtmlEncode="false"/>
            <ej:Column Field="ShipCountry" />
        </Columns>
    </ej:Grid>
</asp:Content>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

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 this link.

NOTE

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

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

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
        <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="EmployeeID" />
            <ej:Column Field="ShipCity" Tooltip= "#colTip"/>
            <ej:Column Field="Freight" />
        </Columns>
    </ej:Grid>
</asp:Content>

JS

<script type="text/template" id="colTip">
  {{:value }} 
</script>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
       protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

ClipMode

When the cell value contains a long text that is 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

By default the ClipMode will be set as Clip.

List of 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

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
     <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipName" ClipMode="Clip"/> 
            <ej:Column Field="Freight" />
        </Columns>
    </ej:Grid>
</asp:Content>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
       protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

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

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
     <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipName" ClipMode="Ellipsis"/> 
            <ej:Column Field="Freight" />
        </Columns>
    </ej:Grid>
</asp:Content>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
       protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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

Ellipsis With Tooltip

Ellipsis will be displayed when the content overflows its column width. Here 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

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true">
     <Columns>
            <ej:Column Field="OrderID" />
            <ej:Column Field="ShipCity" />
            <ej:Column Field="ShipName" Tooltip="#colTip" ClipMode="EllipsisWithTooltip"/> 
            <ej:Column Field="Freight" />
        </Columns>
    </ej:Grid>
</asp:Content>

JS

<script type="text/template" id="colTip">
  {{:value }} 
</script>

C#

namespace WebSampleBrowser.Grid
{
    public partial class _Default : Page
    {
       protected void Page_Load(object sender, EventArgs e)
        {
            var data = new NorthWindDataContext().Orders.ToList();
            FlatGrid.DataSource = data;
            FlatGrid.DataBind();
        }
    }
}

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