Style Format and get data from grid

[Tomasz]

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" />
			<Columns>
				<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}" />
			</Columns>
		</ej:Grid>

This is code behind for receive data

IntraEntities db = new IntraEntities();
        protected void Page_Load(object sender, EventArgs e)
        {
            Grid2.DataSource = GetData();
            Grid2.DataBind();
        }
 
        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 { get; set; }
            public string NoRoom { get; set; }
            public int Floor { get; set; }
            public string Building { get; set; }
            public string MyP { get; set; }
            public DateTime CheckIn { get; set; }
            public DateTime CheckOut { get; set; }
            public string Status { get; set; }
        }
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 */
		}
Nothing. 
No Formatting  no color change for reason "CheckOut is null or empty

[Tomasz]

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.

[Tomasz]

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");
            }
        }
    </script>

[Venkatesh Ayothi Raman]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/SYF104~12089077565.7Z 

Code example: 

<ej:Grid ID="Grid1"    AllowPaging="True" 

            EnableRowHover="true"     AllowCellMerging="false" 

              AllowReordering="false" Locale="en-US" AllowMultiSorting="false"  

              AllowSelection="True" Selectiontype="Single"  

               runat="server"> 

            <Columns> 

                . . . 

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

                . . . 

        

            </Columns> 

            <ClientSideEvents ToolbarClick="onToolBarClick" RowDataBound="rowDataBound" /> 

        </ej:Grid> 

 

<Event> 

<script> 

 

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

        } 

    </script> 

Regards, 

Venkatesh Ayothiraman. 

[Tomasz]

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) {
                args.row.css("backgroundColor", "BlueViolet").css("color", "white");
            }
        }
        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)
                $($(args.cell)).css("backgroundColor", "Yellow");
            if (args.column.field == "EndOccupation" && DateA == Jutro)
                $($(args.cell)).css("backgroundColor", "Blue", "color", "white");
            if (args.column.field == "StartOccupation" && DateA == Dzis)
                $($(args.cell)).css("backgroundColor", "Green", "color", "#ffffff");
        };

[Tomasz]

[Venkatesh Ayothi Raman]

Hi Tomas, 

Thanks for the update. 

We have happy to hear that your requirement is achieved.  

Regards, 

Venkatesh Ayothiraman.