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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Colorear celda dependiendo de una Fecha

Thread ID:

Created:

Updated:

Platform:

Replies:

120518 Sep 22,2015 09:29 PM UTC Sep 25,2015 09:05 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Edgar
Asked On September 22, 2015 09:29 PM UTC

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

Saravanan Arunachalam [Syncfusion]
Replied On 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, 
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
Replied On 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"
         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 [Syncfusion]
Replied On 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>

        <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


CONFIRMATION

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.

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

;