Colorear celda dependiendo de una Fecha

[Edgar]

Buenas tardes solo para preguntar si me pueden ayudar a saber como colorear una celda dependiendo de una Fecha,  algo como esto, no es la misma tabla la del ejemplo, pero si me gustaria algo asi :

Ya que el que manejo esta de esta manera:

Adjunto mi proyecto para alguna sugerencia Gracias de antemano.

Attachment: MantPlant_5ef780b4.zip

[Saravanan Arunachalam]

Hi Edgar, 
Thanks for contacting Syncfusion support.

By default, we have the queryCellInfo event in ejGrid which have an option to apply our own custom logics to cell formatting and text corrections. It will trigger for every cell in Grid with complete information about cell and arguments for transforming particular cell.
Please refer to the below online document link for queryCellInfo event, 
http://help.syncfusion.com/js/api/ejgrid#events:querycellinfo 

Please find the below Knowledge Base documentation for your requirement, 

https://www.syncfusion.com/kb/4886/how-to-add-a-custom-command-with-server-side-event-handling 

We have an online sample for conditional formatting to cell and refer to the below links, 
http://asp.syncfusion.com/demos/web/grid/conditionalformatting.aspx
If we misunderstood your requirement, please get back to with additional information.
Regards,
Saravanan.A

[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.

[Saravanan Arunachalam]

Hi Edgar,

In queryCellInfo event we can get the row data in the arguments. Using that we need to check the condition with headerText and compare the dates of the two column. If the Orderdate column is greater than CustomerID column, then the OrderDate column will be colored with green. If it is less than the CustomerID column then it will be colored with brown.

Please find the following code example, screenshot and sample

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">   

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

        <ClientSideEvents QueryCellInfo="formatingCell" />

        <FilterSettings FilterType="Menu"></FilterSettings>

        <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

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

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" />

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

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />

            </Columns>

        </ej:Grid>

    <script type="text/javascript">

        function formatingCell(args) {

            var $element = $(args.cell);

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

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

                    $element.css("background-color", "#336c12").css("color", "white");

                else 

                    $element.css("background-color", "#7b2b1d").css("color", "white");

            }

        }

    </script>
</asp:Content>

Screenshot:

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/144482/ze/Sample-673478118

Regards,
Saravanan.A