Accomplishing the following with a datalist?

Question

I have no idea how to accomplish something like this, so here goes.

I have a datatable that has the following data:

Room   Cook   Waiter  Input
201    Joe    Jim     Green.png
202    Jack   Mary    Red.png
203    Jet    Mark    Yellow.png
204    Nick   Jill    Green.png

I have 3 PNG files: Green.png, Red.png, Yellow.png. Each PNG is 100x100px.

The data control that I've been using is a datalist. Each datalist item has the following: a 100x100px div for displaying the PNG according to the Input column and 3 labels, for columns Room, Cook, and Waiter.

This is not an issue and it's already being displayed correctly: each datalist item is 100x100px in size and within this space I have 3 labels displaying the other columns.

The bigger issue, which is where I'm stuck at, is being able to click on each datalist item and running server-side code. And when the server-side code runs, the codebehind will have the Room, Cook. and Waiter in that datalist item. This is where I'm really stuck at.

Most of the partial solutions I've seen have been with jquery, but I do not want to use that. Ideally, it would be to add a label over an image button, but that's not possible. Worse-case scenario would be to display the text outside the button, but that would ruin the design.

I'm including the aspx markup:

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
    <ItemTemplate>
    <div style="padding: 8px">
        <div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'>
            <div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;">
                <div style="box-sizing: border-box; width:97px; float:left;">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
                </div>
            </div>
            <div style="width: 195px; height: 22px; box-sizing: border-box">
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label>
            </div>
            <div style="width: 195px; height: 22px; box-sizing: border-box">
                <asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label>
            </div>
        </div>
    </div>
    </ItemTemplate>
</asp:DataList>

Any help is appreciated.

Need more info. Provide some of your ASPX markup and other code to help get to a solution. Could you just add three Hidden Fields to the DataList Item Template and bind those hidden controls to the other three columns? — Boyd P, Apr 19 '16 at 18:24
I have to show the value of the other three columns in the DataList Item Template. I can add the hidden values, but how would I invoke the codebehing for a specific item? — fdkgfosfskjdlsjdlkfsf, Apr 19 '16 at 18:52
You don't have a control for clicking though. Change your labels to LinkButton controls and then style them to look like normal text using CSS. You'll be able to use code behind with those controls.`<%# Eval("RoomNum")%>` You can even bind the Text to the "CommandArgument" property as you do with the Text in your example to pass the value back. — Boyd P, Apr 19 '16 at 20:05
BTW, I think to use "CommandArgument", you also need the "CommandName" property set. https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.linkbutton.commandargument(v=vs.110).aspx — Boyd P, Apr 19 '16 at 21:05
The issue is that the control for clicking is the whole `div`. All the space in the `DataList Item Template` is clickable. — fdkgfosfskjdlsjdlkfsf, Apr 20 '16 at 02:28
I think you can just encompass the entire DIV inside the LinkButton, essentially making the DIV a link. `
Stuff Here
` and use the CommandArgument and CommandName to pass the parameters back. http://stackoverflow.com/questions/3973723/asp-net-linkbutton-commandargument-property-ignores Here's a previous question about this type of thing. — Boyd P, Apr 20 '16 at 02:52
Thanks for the help. With trial-and-error I was able to finally make it work using your suggestion. If you want, you can add a simple snippet of code showing the `datalist` with the `div`, using `CommandArgument` and `CommandName`, and I'll gladly accept your answer. — fdkgfosfskjdlsjdlkfsf, Apr 20 '16 at 14:03

score 0 · Accepted Answer · answered Apr 20 '16 at 15:32

Wrap your primary DIV with a LinkButton control and then you should be able to accomplish what you want. This will make the entire DIV clickable. You will may need to use the CommandName and CommandArgument properties.

<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
    <ItemTemplate>
    <asp:LinkButton ID="lnkButton" runat="server" CommandName="Details" CommandArgument='<%# Eval("RoomNum") + "," + Eval("CookName") + "," + Eval("WaiterName") %>' OnClick="lnkButton_Click">
    <div style="padding: 8px">
        <div style='width:195px;height:162px; background-image:url(<%# Eval("image_path") %>)'>
            <div style="width: 195px; height: 22px; padding-top: 5px; overflow: hidden;">
                <div style="box-sizing: border-box; width:97px; float:left;">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
                </div>
            </div>
            <div style="width: 195px; height: 22px; box-sizing: border-box">
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("CookName")%>' ></asp:Label>
            </div>
            <div style="width: 195px; height: 22px; box-sizing: border-box">
                <asp:Label ID="Label3" runat="server" Text='<%# Eval("WaiterName")%>' ></asp:Label>
            </div>
        </div>
    </div>
    </asp:LinkButton>
    </ItemTemplate>
</asp:DataList>

Alternatively, you can use the "OnItemCommand" command in the DataList control. Here's some helpful info on setting that up: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datalist.itemcommand(v=vs.110).aspx

Accomplishing the following with a datalist?

1 Answers1