Remove From My Forums

Display data in every cell of the grid

Question
0

Sign in to vote

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

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

Answered by:

Display data in every cell of the grid

Question

Answers