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

Colorear celda dependiendo de una Fecha

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 :
Tabla modelo
Ya que el que manejo esta de esta manera:
Grid con Fechas
Adjunto mi proyecto para alguna sugerencia Gracias de antemano.

Attachment: MantPlant_5ef780b4.zip

3 Replies

SA Saravanan Arunachalam Syncfusion Team September 23, 2015 07:09 AM UTC

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, 

Please find the below Knowledge Base documentation for your requirement, 


We have an online sample for conditional formatting to cell and refer to the below links, 
If we misunderstood your requirement, please get back to with additional information.

ED Edgar September 23, 2015 02:33 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.

SA Saravanan Arunachalam Syncfusion Team September 25, 2015 09:05 AM UTC

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>


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



    <script type="text/javascript">

        function formatingCell(args) {

            var $element = $(args.cell);

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

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









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


Live Chat Icon For mobile
Up arrow icon