We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Coloring depending on a date

Hello just to ask how I can make this work?
I want to compare dates and color according to the criteria.
I share the code: 
<ej:Grid ID="FlatGrid" runat="server" AllowSelection="True"  AllowFiltering="True" 
   Locale="es-ES"  AllowGrouping="True" AllowTextWrap="True" DataSourceCachingMode="Session" 
        EnableRowHover="true" AllowCellMerging="True" AllowPaging="True" AllowReordering="True"
         AllowResizeToFit="True" AllowResizing="True" AllowSearching="True" AllowSorting="True"
<ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"/>
        <ContextMenuSettings EnableContextMenu="true"/>
        <ClientSideEvents QueryCellInfo="formatingCell" />
            <ej:Column DataType="number" Field="idfechas IsIdentity="True" IsPrimaryKey="True" HeaderText="ID" Width="45"/>
            <ej:Column DataType="date" Field="fecha1" HeaderText="fecha 1" Width="85"/>
            <ej:Column DataType="date" Field="fecha2" HeaderText="fecha 2" Width="85"/>
<PageSettings Template="" PageSize="10"></PageSettings><EditSettings RowPosition="Bottom" AllowAdding="True" AllowDeleting="false"/>
        <FilterSettings FilterType="Excel" MaxFilterChoices="100" ShowPredicate="True" StatusBarWidth="10"/>
         <ScrollSettings Width="950" Height="300" VirtualScrollMode="Continuous" />
    <script type="text/javascript">
        function formatingCell(args) {
            var a = 3;
            var value = args.text.replace(",", "");
            var $element = $(args.cell);
            switch (args.column.headerText) {
                case "fecha 2":
                    if (Date.parse(value) > Date.parse(args.column.headerText = "fecha 1".value))
                       $element.css("background-color", "#336c12").css("color", "white");
I hope that they can help me thanks in advance.

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 25, 2015 07:12 AM UTC

Hi Edgar,

Thanks for contacting Syncfusion Support.

We can get the another column’s value using args.data. Please refer to the below code example and help documentation link.

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True">


                . . . .

               <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

                <ej:Column Field="RequiredDate" HeaderText="Required Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

. . . .


            <ClientSideEvents QueryCellInfo="cellInfo" />



       function cellInfo(args) {

            if (args.column.headerText == "Order Date") {

                if(args.data.OrderDate < args.data.RequiredDate)

                $(args.cell).css("background", "red")


HelpDocumentaion: http://help.syncfusion.com/js/api/ejgrid#events

For your convenience, we have prepared a sample. Please download it from the below location.

Sample: http://www.syncfusion.com/downloads/support/forum/120532/ze/Sample-1459155521

Seeni Sakthi Kumar S.

Live Chat Icon For mobile
Up arrow icon