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.

Style Format and get data from grid

Thread ID:

Created:

Updated:

Platform:

Replies:

125610 Aug 28,2016 11:01 AM Aug 30,2016 12:11 AM ASP.NET Web Forms 6
loading
Tags: Grid
Tomasz
Asked On August 28, 2016 11:01 AM

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 { 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 */
		}
Nothing. 
No Formatting  no color change for reason "CheckOut is null or empty

Tomasz
Replied On August 28, 2016 01:30 PM

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
Replied On August 29, 2016 06:19 AM

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 [Syncfusion]
Replied On August 29, 2016 08:25 AM

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"  
               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
Replied On August 29, 2016 04:37 PM

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
Replied On August 29, 2016 04:46 PM

Grid Cell Color

Venkatesh Ayothi Raman [Syncfusion]
Replied On August 30, 2016 12:11 AM

Hi Tomas, 

Thanks for the update. 

We have happy to hear that your requirement is achieved.  

Regards, 
Venkatesh Ayothiraman. 


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.

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.

;