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

Style Format and get data from grid

This is my grid
ej:Grid ID="Grid2" runat='server' CssClass="" DataSourceCachingMode="None" ShowColumnChooser="True" MinWidth="0" AllowGrouping="True" AllowFiltering="True"  OnRowDataBound="Grid1_RowDataBound">
			<FilterSettings FilterBarMode="OnEnter" FilterType="Menu" ></FilterSettings>
			<GroupSettings GroupedColumns="Status" />
        <ClientSideEvents RowDataBound="rowDataBound" ActionComplete="rowDataBound" />
				<ej:Column HeaderText="ApartId" Field="AprtId" DataType="int" AllowSorting="true" />
				<ej:Column HeaderText="No Room" Field="NoRoom" DataType="string" />
				<ej:Column HeaderText="Floor" Field="Floor" DataType="string" />
				<ej:Column HeaderText="Building" Field="Building" DataType="string" />
				<ej:Column HeaderText="CheckIn" Field="CheckIn" DataType="date" Format="{0:dd/MM/yyyy}"/>
				<ej:Column HeaderText="CheckOut" Field="CheckOut" DataType="date" Format="{0:dd/MM/yyyy}" />
				<ej:Column HeaderText="Status" Field="Status" DataType="string" />
				<ej:Column HeaderText="Days" DataType="int" Template="{{:(CheckOut - CheckIn)/86400000}}" Format="{N1}" />
This is code behind for receive data
IntraEntities db = new IntraEntities();
        protected void Page_Load(object sender, EventArgs e)
            Grid2.DataSource = GetData();
        public IEnumerable GetData()
            IEnumerable data = db.Apartaments.Include(d => d.dtRoomStatus).Select(x => new Aparts
                AprtId = x.ApartId,
                NoRoom = x.NoRoom,
                Floor = x.Floor ?? 0,
                Building = x.Building,
                CheckIn = x.StartOccupation ?? DateTime.Now,
                CheckOut = x.EndOccupation ?? InnyDzien,
                Status = x.dtRoomStatus.Status,
            }).OrderByDescending(d => d.AprtId).ToList();
            return data;
        public class Aparts
            public int AprtId { getset; }
            public string NoRoom { getset; }
            public int Floor { getset; }
            public string Building { getset; }
            public string MyP { getset; }
            public DateTime CheckIn { getset; }
            public DateTime CheckOut { getset; }
            public string Status { getset; }
and trying change color with yours example 
function rowDataBound(args) {
            var MyDate = new Date(2016,08,28);
			if (args.data.CheckOut == MyDate)
				args.row.css("backgroundColor", "#F3C3C3").css("color", "black");/*custom css applied to the row */
No Formatting  no color change for reason "CheckOut is null or empty

6 Replies

TO Tomasz August 28, 2016 05:30 PM UTC

I Check all fields and is working correct only with date field something is wrong, I don´t have idea. I check different formats, configured date like string, and nothing.

TO Tomasz August 29, 2016 10:19 AM UTC

ok I find solution for comparing two dates and change row color with condition.
<script type="text/javascript">
        function rowDataBound(args) {
            var DateA = new Date(args.data.EndOccupation).format("dd/MM/yyyy");
            var DateN = new Date();
            var DateB = new Date(DateN.setDate(DateN.getDate() + 1)).format("dd/MM/yyyy")//for add days;
            document.getElementById("o").innerHTML = DateA;//for check date
            document.getElementById("k").innerHTML = DateB;//for check date
            if (DateA == DateB) {
                args.row.css("backgroundColor", "#F3C3C3").css("color", "black");

VA Venkatesh Ayothi Raman Syncfusion Team August 29, 2016 12:25 PM UTC

Hi Tomas, 

Thank you for contacting Syncfusion support. 

We have analyzed your code example and found that you are directly compare the date objects. For this reason, styles are not applied in rowDataBound event. Also, you have passed the value of date like new Date (2016,08,29). This is not recommended way to create a date object, we can pass the string values to create a date object like as follows new Date (“2016,08,29”). We have created a sample for your convenience. Please refer to the sample and code example, 

Code example: 
<ej:Grid ID="Grid1"    AllowPaging="True" 
            EnableRowHover="true"     AllowCellMerging="false" 
              AllowReordering="false" Locale="en-US" AllowMultiSorting="false"  
              AllowSelection="True" Selectiontype="Single"  
                . . . 
                <ej:Column Field="OrderDate" HeaderText="Order Date" Width="100" DataType="date" TextAlign="Right" Format="{0:MM/dd/yyyy}" /> 
                . . . 
            <ClientSideEvents ToolbarClick="onToolBarClick" RowDataBound="rowDataBound" /> 
        function rowDataBound(args) { 
            var date2 = new Date("2014, 12, 25"); 
            var date1 = args.data.OrderDate; 
            if (date1.getTime() == date2.getTime()) 
                args.row.css("backgroundColor", "#F3C3C3").css("color", "black");/*custom css applied to the row */ 

Venkatesh Ayothiraman. 

TO Tomasz August 29, 2016 08:37 PM UTC

Thank You for reply, I analyzed You code and is the same like in my last post, unfortunately you example is not working , maybe with my VS is some thing wrong, I Have Visual Studio 2013Pro and my old project configured to 4.5.1 Entity framework. testing all day different option finally I find this solution. and for my work perfect.
Result in image below
function rowDataBound(args) {
            var DateA = new Date(args.data.EndOccupation).format("dd/MM/yyyy");
            var DateN = new Date();
            var DateB = new Date(DateN.setDate(DateN.getDate() + 1)).format("dd/MM/yyyy");           
            if (DateA == DateB) {
        function cellQueryInfo(args) {
            var DateA = new Date(args.data.EndOccupation).format("dd/MM/yyyy");
            var DateN = new Date();
            var Dzis = new Date(DateN.setDate(DateN.getDate() + 0)).format("dd/MM/yyyy");
            var Jutro = new Date(DateN.setDate(DateN.getDate() + 1)).format("dd/MM/yyyy");
            document.getElementById("o").innerHTML = DateA;//for check date
            document.getElementById("k").innerHTML = Dzis;//for check date
            document.getElementById("l").innerHTML = Jutro;//for check date
            if (args.column.field == "EndOccupation" && DateA == Dzis)
            if (args.column.field == "EndOccupation" && DateA == Jutro)
            if (args.column.field == "StartOccupation" && DateA == Dzis)

TO Tomasz August 29, 2016 08:46 PM UTC

Grid Cell Color

VA Venkatesh Ayothi Raman Syncfusion Team August 30, 2016 04:11 AM UTC

Hi Tomas, 

Thanks for the update. 

We have happy to hear that your requirement is achieved.  

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon