Simple DataBinding in a DataList question

Question

User240536124 posted

Made a calendar with a DataList and have it all working the way I want. It was a rather fun project. My question is, I'm binding the DataList to a DataTable. After a lot of searching I'm not sure if this is possible. The calendar is almost identical to a standard asp.net Calendar control (only way larger), with a few days from the previous month and a few days of the next month shown on the Calendar (just like the calendar control). I can determine the previous and next month based on a column in the DataTable I'm binding to. I have pondered changing the background color of the cells that are the days of the previous month and the next month, so that it makes it easy to see the currently selected month in my calendar.

Here is what I have tried. Put a div in the DataList template and use this to set the CSS class:

<div id="test" class='<%# Bind("Type") %>'> LinkButton </div>

This throws an error. It throws the same error if I make the div runat="server".

The number of days of the previous/next month vary depending on how many days are in the selected month, so getting this from the DataTable I'm binding to is the only way I can think to get this.

Can anyone point me in the right direction of a way to change the colors of a few cells based on rows from the DataTable I'm binding to? It would be much appreciated if anyone can. Or any other way of doing this, I'm open. It's just that the cells of the calendar only have a number in them, so I'm not sure how anything would know if they should change color or not. That is why I tried to do it the way I'm trying to do it.

Thanks,

Jay

Note: I'm adding a command argument to the LinkButton so that I can determine if it is the previous, current or next month a user clicks on. That is the only other way I can think to determine which month the user is selecting. Because it is an actual asp.net control, I'm doing that like this: CommandArgument='<%# Bind("Type") %>'

Answer 1

User1535942433 posted

Hi jay8anks,

Accroding to your description,I don't know how do you do with linkbutton.However,as far as I think,you could set backcolor in the  ItemDataBound event.

Since you don't post your codes,I have create a demo.

Just like this:

    <asp:DataList ID="dlcalender" runat="server" OnItemDataBound="dlcalender_ItemDataBound">
    <FooterTemplate>
    </FooterTemplate>
    <HeaderTemplate>
        <asp:Label ID="head1" runat="server" Text='<%# Eval("Heading1") %>' />
        <asp:Label ID="head2" runat="server" Text='<%# Eval("Heading2") %>' />
        <asp:Label ID="head3" runat="server" Text='<%# Eval("Heading3")%>' />
        <asp:Label ID="head4" runat="server" Text='<%# Eval("Heading4") %>' />
        <asp:Label ID="head5" runat="server" Text='<%# Eval("Heading5") %>' />
        <asp:Label ID="head6" runat="server" Text='<%# Eval("Heading6") %>' />
        <asp:Label ID="head7" runat="server" Text='<%# Eval("Heading7") %>' />

    </HeaderTemplate>
    <ItemTemplate>
        <%# DataBinder.Eval(Container.DataItem,"Column1") %>
        <%# DataBinder.Eval(Container.DataItem,"Column2")%>
        <%# DataBinder.Eval(Container.DataItem,"Column3")%>
        <%# DataBinder.Eval(Container.DataItem,"Column4")%>
        <%# DataBinder.Eval(Container.DataItem,"Column5")%>
        <%# DataBinder.Eval(Container.DataItem,"Column6")%>
        <%# DataBinder.Eval(Container.DataItem,"Column7")%>
        <asp:LinkButton ID="xx" runat="server"  Text='<%#Eval("Type")%>'/>
    </ItemTemplate>
</asp:DataList>

Code-behind:

public string Heading1 { get; set; }
        public string Heading2 { get; set; }
        public string Heading3 { get; set; }
        public string Heading4 { get; set; }
        public string Heading5 { get; set; }
        public string Heading6 { get; set; }
        public string Heading7 { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            Heading1 = "Sunday";
            Heading2 = "Monday";
            Heading3 = "Tuesday";
            Heading4 = "Wednesday";
            Heading5 = "Thursday";
            Heading6 = "Friday";
            Heading7 = "Saturday";
            var list = new List<string> { "Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7","Type" };

            var table = new DataTable();
            foreach (var item in list)
                table.Columns.Add(item, typeof(string));
            table.Rows.Add("21", "22", "23", "24", "25", "26", "27", "Last");
            table.Rows.Add("28", "29", "30", "1", "2", "3", "4", "Current");
            table.Rows.Add("5", "6", "7", "8", "9", "10", "11", "Current");
            table.Rows.Add("12", "13", "14", "15", "16", "17", "18", "Current");
            table.Rows.Add("19", "20", "21", "22", "23", "24", "25", "Current");
            table.Rows.Add("26", "27", "28", "29", "30", "31", "1", "Next");
            dlcalender.DataSource = table;
            dlcalender.DataBind();
        }
        protected void dlcalender_ItemDataBound(object sender, DataListItemEventArgs e)
        {
            dlcalender.SelectedIndex = e.Item.ItemIndex;
            String x = ((LinkButton)e.Item.FindControl("xx")).Text;
            foreach (DataListItem item in dlcalender.Items)
            {
                if (.........)
                {
                    e.Item.BackColor = Color.Yellow;
                }
               
            }
        }

If you have other problem,you could post your full codes to us.It will help us to solve your problem.

Best regards,

Yijing Sun

Answer 2

User240536124 posted

Your approach is very interesting. After sleeping on it, I came up with this solution using a Literal control instead of trying to bind to something in an html control:

<ItemTemplate><asp:Literal ID="Literal1" Text='<%# Bind("css") %>' runat="server"></asp:Literal>
<asp:LinkButton ID="lbDateSelect" Text='<%# Bind("Day") %>' CssClass="link-btn" CommandArgument='<%# Bind("Type") %>' ToolTip='<%# Bind("Date") %>' runat="server" CommandName="Select" OnClick="lbDateSelect_Click"></asp:LinkButton>&nbsp;&nbsp;&nbsp;
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div> </ItemTemplate>

In my DataTable, I added this in the "css" column on the previous and next months only: dr["css"] = "<div class=\"outer-month\">";

Set up my css and it worked the first time I ran it.

In your example, how did you come up with the numbers you hard coded into this:

    table.Rows.Add("21", "22", "23", "24", "25", "26", "27", "Last");
    table.Rows.Add("28", "29", "30", "1", "2", "3", "4", "Current");

To make that dynamic, I had to find the first day of the selected month and work back to the first Sunday. Then at the end of the selected month, I just had to add a day until I reached 41 rows in the DataTable (I have a 7 X 6 grid, just like the Calendar Control).

Actually, this guy's code got me to thinking:

https://vedpathak.blogspot.com/2011/08/create-your-own-calendar-using-gridview.html

I modified it to work with the DataList, repeat = horizontal, RepeatColumns="7".

All in all, it was easy to do and I have it looking fairly nice.

I am using ItemDataBound to bind events from our schedule into the calendar. Each event is added as a dynamically created LinkButton.

I have used the open source DayPilot as a scheduler for many years, but the full calendar is not in the open source version. Full calendar controls in Asp.Net are really hard to come by that don't don't cost big $$$.

I know web forms are passe, but if I had one wish for asp.net, it would be some better multi-select controls (dropdown!), some controls made to drag and drop, and a full size calendar control instead of just a date picker.