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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Coloring depending on a date

Thread ID:





120532 Sep 23,2015 08:39 PM UTC Sep 25,2015 07:12 AM UTC ASP.NET Web Forms 1
Tags: Grid
Asked On September 23, 2015 08:39 PM UTC

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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon