Coloring depending on a date

[Edgar]

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"

         AllowMultiSorting="True">

<ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"/>

        <ContextMenuSettings EnableContextMenu="true"/>

        <ClientSideEvents QueryCellInfo="formatingCell" />

        <Columns>

            <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"/>

        </Columns>

<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" />

    </ej:Grid>

    <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");

                 break;

            }

        }

    </script>

I hope that they can help me thanks in advance.

[Seeni Sakthi Kumar Seeni Raj]

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">

            <Columns>

                . . . .

               <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}" />

. . . .

           </Columns>

            <ClientSideEvents QueryCellInfo="cellInfo" />

        </ej:Grid>

    <script>

       function cellInfo(args) {

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

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

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

            }
        }
    </script>

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

Regards,
Seeni Sakthi Kumar S.