Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Grid / Conditional Formatting
    <%@ Page Title="Grid-Conditional Formatting-ASP.NET-SYNCFUSION" Language="C#" MetaDescription="This demo explains how to apply styles to specific cells based on certain conditions in Syncfusion ASP.NET Web Forms DataGrid control." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="ConditionalFormatting.aspx.cs" Inherits="WebSampleBrowser.Grid.ConditionalFormatting" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="SampleHeading" runat="server">
        <span class="sampleName">Grid / Conditional Formatting</span>
    </asp:Content>
    
    <asp:Content ID="ControlContent" runat="server" ContentPlaceHolderID="ControlsSection">
        <div>
            <ej:Grid ID="OrdersGrid" runat="server" AllowSelection="False" AllowSorting="True" EnableRowHover="False">
                <ClientSideEvents QueryCellInfo="formatingCell" />
                <Columns>
                    <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="75" />
                    <ej:Column Field="Open" HeaderText="Open" Width="80" TextAlign="Right" />
                    <ej:Column Field="High" HeaderText="High" TextAlign="Right" Width="75" />
                    <ej:Column Field="Low" HeaderText="Low" TextAlign="Right" Width="75" />
                    <ej:Column Field="Close" HeaderText="Change" Width="80" TextAlign="Right" />
                    <ej:Column Field="WeekHigh" HeaderText="52W H" Width="110" TextAlign="Right" />
                    <ej:Column Field="WeekLow" HeaderText="52W L" Width="110" TextAlign="Right" />
                    <ej:Column Field="YearChange" HeaderText="365 Days % Chg" Width="120" TextAlign="Right" />
                    <ej:Column Field="MonthChange" HeaderText="30 Days % Chg" Width="110" TextAlign="Right" />
                </Columns>
            </ej:Grid>
        </div>
    </asp:Content>
    
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            function formatingCell(args) {
                var a = 3;
                var value = args.text.replace(",", "");
                var $element = $(args.cell);
                switch (args.column.headerText) {
                    case "52W H":
                        if (parseFloat(value) > 500 && parseFloat(value) < 1000)
                            $element.css("background-color", "#336c12").css("color", "white");
                        else if (parseFloat(value) > 1000 && parseFloat(value) < 2000)
                            $element.css("background-color", "#7b2b1d").css("color", "white");
                        else if (parseFloat(value) > 2000 && parseFloat(value) < 3000)
                            $element.css("background-color", "#205239").css("color", "white");
                        break;
                    case "52W L":
                        if (parseFloat(value) > 500 && parseFloat(value) < 1000)
                            $element.css("background-color", "#745a17").css("color", "white");
                        else if (parseFloat(value) > 1000 && parseFloat(value) < 2000)
                            $element.css("background-color", "#09576b").css("color", "white");
                        else if (parseFloat(value) > 2000 && parseFloat(value) < 3000)
                            $element.css("background-color", "#397218").css("color", "white");
                        break;
                    case "Change":
                        $element.css("color", "#E84649");
                        break;
                    case "365 Days % Chg":
                    case "30 Days % Chg":
                        if (parseFloat(value) < 0)
                            $element.css("color", "red").prepend("<img src='../Content/images/down.png' height='15px' width='13px' style='padding-left:10px; float:right;' ></img> ");
                        else
                            $element.css("color", "green").prepend("<img src='../Content/images/up.png' height='15px' width='13px' style='padding-left:10px; float:right;' ></img>");
                        break;
                }
            }
        </script>
    </asp:Content>
    
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebSampleBrowser.Grid
    {
        public partial class ConditionalFormatting : System.Web.UI.Page
        {
            List<Orders> order = new List<Orders>();
            protected void Page_Load(object sender, EventArgs e)
            {
                BindDataSource();
            }
    
            private void BindDataSource()
            {
                order.Add(new Orders("DDNDKJ", 6088.20, 61145.93, 6034.50, 12.4, 6115.35, 4770.35, 14.37, 9.87));
                order.Add(new Orders("FKLND", 2042.00, 2108.34, 2048.67, 77.8, 2108.34, 1526.25, 23.76, 10.28));
                order.Add(new Orders("DSNNS", 740, 772.3, 740, 26.6,772.3, 496.23, 47.28,23.20));
                order.Add(new Orders("MLSSD", 993.54, 958.20, 939.40, 21.45, 998.76, 553.65, 47.34, 9.20));
                order.Add(new Orders("LKSNDL", 4642.30, 4748.40, 4641.38, 99.5, 5050.60, 3538.90, 61.34, 11.20));
                order.Add(new Orders("NKJSN", 445, 451.9, 442, 6.92, 578.2, 370.20, 29.2, 7.23));
                order.Add(new Orders("LNKNDS", 298.4, 163.49, 168.30, 12.4, 386.39, 289.4, -9.42, 9.87));
                order.Add(new Orders("NSDN", 400, 403.20, 399.48, 4.5, 435, 300, -5.32, -1.20));
                order.Add(new Orders("DSJBD", 1723.34, 1748.30, 1764.84, 10.05, 1728.75, 1051.57, 61.48, 31.32)); 
                order.Add(new Orders("BSBDBD", 1623.23, 1656.23, 1169.48, 6.25, 1232.34, 767.34, 37.43, 23.04));
                this.OrdersGrid.DataSource = order;
                this.OrdersGrid.DataBind();
            }
    
            [Serializable]
            public class Orders
            {
                public Orders()
                {
    
                }
                public Orders(String orderId, double open,double high,double low, double close,double weekHigh,double weekLow,double yearChange,double monthChange)
                {
                    this.OrderID = orderId;
                    this.Open = open;
                    this.High = high;
                    this.Low = low;
                    this.Close = close;
                    this.WeekHigh = weekHigh;
                    this.WeekLow = weekLow;
                    this.YearChange = yearChange;
                    this.MonthChange = monthChange;
                }
                public String OrderID { get; set; }
                public double Open { get; set; }
                public double High { get; set; }
                public double Low { get; set; }
                public double Close { get; set; }
                public double WeekHigh { get; set; }
                public double WeekLow { get; set; }
                public double YearChange { get; set; }
                public double MonthChange { get; set; }
            }
        }
    }