locked
Display data in every cell of the grid RRS feed

  • Question

  • User1402853653 posted

    Hi i am working on asp.net webform project and i required to display the machines list data in a form like this

     

    enter image description here

    i have 2 column Machine and isconnected if the isconected column is 0 it will be color red 

    is there a way to achve this on grid view if not how can i achive this.

    i'm currently strugling how to start and i dont know what to search on the internet

    hope someone help me out with this 

    Thank you in advance,

    Wednesday, April 15, 2020 12:05 AM

Answers

  • User-1330468790 posted

    Hi kimivanbayan,

     

    I am afraid that the "GridView" control is unable to fulfill your requirement.

    As you may know, the grid view will display a single column for the data field "Machine" but what you want is "five"/multiple columns.

    Here I suggest you use the "ListView" control which contains a GroupTemplate property that allows you to display multiple items in one row.

     

    More details, you could refer to below code:

    .aspx Page:

    <asp:ListView ID="ListView1" runat="server"
                GroupItemCount="5" OnItemDataBound="ListView1_ItemDataBound">
                <LayoutTemplate>
                    <table runat="server" id="tblMachines">
                        <tr runat="server">
                            <th runat="server" align="center" colspan="5">Machine List</th>
                        </tr>
                        <tr runat="server" id="groupPlaceholder" />
                    </table>
                </LayoutTemplate>
                <GroupTemplate>
                    <tr runat="server" id="MachinesRow">
                        <td runat="server" id="itemPlaceholder" />
                    </tr>
                </GroupTemplate>
                <ItemTemplate>
                    <td align="center" runat="server">
                        <asp:Label ID="MachineLabel" runat="server" Text='<%# Eval("Machine")%>' />
                        <asp:HiddenField ID="IsConnected" runat="server" Value='<%# Eval("isconnected")%>' />
                    </td>
                </ItemTemplate>
            </asp:ListView>

    Code-behind: Simulation of the data and change the color in event "ListView1_ItemDataBound"

     // Simulation of the data
            private static DataTable _listviewDT;
            public static DataTable ListviewDT
            {
                get
                {
                    if (_listviewDT is null)
                    {
                        _listviewDT = new DataTable();
    
                        _listviewDT.Columns.Add("Machine", typeof(string));
                        _listviewDT.Columns.Add("isconnected", typeof(int));
    
                        _listviewDT.Rows.Add("ASM1", 1);
                        _listviewDT.Rows.Add("ASM2", 1);
                        _listviewDT.Rows.Add("ASM3", 1);
                        _listviewDT.Rows.Add("ASM4", 1);
                        _listviewDT.Rows.Add("ASM5", 1);
                        _listviewDT.Rows.Add("ASM6", 1);
                        _listviewDT.Rows.Add("ASM7", 1);
                        _listviewDT.Rows.Add("ASM8", 1);
                        _listviewDT.Rows.Add("ASM9", 1);
                        _listviewDT.Rows.Add("ASM10", 1);
                        _listviewDT.Rows.Add("AOI1", 1);
                        _listviewDT.Rows.Add("AOI2", 1);
                        _listviewDT.Rows.Add("AOI3", 0);
                        _listviewDT.Rows.Add("AOI4", 1);
                        _listviewDT.Rows.Add("AOI5", 1);
                        _listviewDT.Rows.Add("AOI6", 1);
                        _listviewDT.Rows.Add("AOI7", 1);
                        _listviewDT.Rows.Add("AOI8", 1);
                        _listviewDT.Rows.Add("AOI9", 1);
                        _listviewDT.Rows.Add("AOI10", 1);
                        _listviewDT.Rows.Add("DCAS1", 1);
                        _listviewDT.Rows.Add("DCAS2", 1);
                        _listviewDT.Rows.Add("DCAS3", 1);
                        _listviewDT.Rows.Add("DCAS4", 1);
                        _listviewDT.Rows.Add("DCAS5", 1);
                        _listviewDT.Rows.Add("DCAS6", 1);
                        _listviewDT.Rows.Add("DCAS7", 1);
                        _listviewDT.Rows.Add("DCAS8", 1);
                        _listviewDT.Rows.Add("DCAS9", 1);
                        _listviewDT.Rows.Add("DCAS10", 1);
    
    
                    }
    
                    return _listviewDT;
                }
                set
                {
                    _listviewDT = value;
                }
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindListView();
                }
            }
    
            private void BindListView()
            {
                ListView1.DataSource = ListviewDT;
                ListView1.DataBind();
            }
    
            protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
            {
                //Get the ListView item
                ListViewItem item = e.Item;
    
                //Get two data bound control
                HiddenField hf_isconnected = (HiddenField)item.FindControl("IsConnected");
                Label machineLabel =(Label)item.FindControl("MachineLabel");
    
                //If isconnected is 0, then change the fore color of the machine label
                if(hf_isconnected.Value.Equals("0"))
                {
                    machineLabel.ForeColor = Color.Red;
                }
            }
        }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 15, 2020 2:05 AM