How to create this type of grid view please help

Question

1.00/5 (2 votes)

See more:

i am currently designing a gridview in mvc4
and need help in designing this type of gridview
i just need to know the designing part data inputing part i will do it myself
if anyone can assist me with this would be really grateful

C#

click here for gridview design

What I have tried:

@{
ViewBag.Title = "ShowResult";
Layout = "~/Views/Shared/_Layout.cshtml";
WebGrid grid = new WebGrid(source:Model,canSort:false)
}

ShowResult

@foreach (var item in Model)
{

@grid.GetHtml( htmlAttributes:new {id="GridT",width ="900px"},
columns:grid.Columns(
grid.Column("",)
)
)

Posted 18-Apr-16 6:55am

Himaan Singh

Updated 18-Apr-16 8:21am

v2

Add a Solution

Comments

Passion4Code 18-Apr-16 13:11pm

This is resizing of divs in html. Does not seem to be a normal grid though!

Himaan Singh 18-Apr-16 13:14pm

can you help me to create this in html only . i am struggling for 2 days already

Passion4Code 18-Apr-16 13:18pm

You need to set divs only using CSS display properties. Try out and see where you end up, post your tried code, We can then help you move forward.

Himaan Singh 18-Apr-16 13:24pm

can you tell me how to divide a span column into two rows ?

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Passion4Code · Answer 1 · 2016-04-18T07:49:00

Solution 1

Hello,
Follow the below article for reference. Just the HTML and CSS and that is simple. You try and surely you can.
Using CSS flexible boxes - CSS | MDN[^]

Thanks

Posted 18-Apr-16 7:49am

Passion4Code

Comments

Sergey Alexandrovich Kryukov 18-Apr-16 14:04pm

Good link, a 5.

See also Solution 3 as an alternative. I tried to explain why an alternative approach might be useful. What do you think?

—SA

Himaan Singh 18-Apr-16 14:10pm

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

Cell that spans two columns:

<table style="width:100%">
<tr>
<th rowspan="3">Name</th>
<th rowspan="2">hello</th>
<th colspan="3">Telephone</th>
<th rowspan="2">head</th>
</tr>
<tr>
<td>name</td>
<td>phone</td>
<td>email</td>

</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
<td>2222222222</td>
<td>status</td>

</tr>
</table>

Passion4Code 18-Apr-16 14:13pm

Looks good. See you could manage doing it right? :)

Sergey Alexandrovich Kryukov 18-Apr-16 14:23pm

Please, always put all code to the body of the question, using "Improve question". Code in comments is poorly readable.
—SA

Passion4Code 19-Apr-16 2:11am

True Sir. :)

Sergey Alexandrovich Kryukov · Answer 2 · 2016-04-18T08:21:00

This is not exactly a grid view.

Even though I like the elegance of Solution 1 (but I never tried such things), you may notice that some CSS properties are browser-specific, such as -webkit-flex. That said, it can compromise browser compatibility. Look at the compatibility chart. It looks like this Mozilla article assumes that it all should work as per standard in Mozilla browsers, and with Webkit-specific properties on WebKit browsers, forget about most versions of IE (don't even want to try :-)).

So, I would suggest some more basic alternative. You can achieve the behavior similar to HTML table element, with all its nesting element, but, alternatively, without all these elements, just with div. For this purpose, you can use the property display with values "table", "table-row" and "table-cell" (as I can see, it's enough for your purpose. You will also need to adjust width, padding, vertical align, etc.

—SA

Himaan Singh · Answer 3 · 2016-04-18T08:16:00

i finally figured it out hopefully people who dont know how to use div like me can be helped by this

HTML

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two columns:</h2>

<table style="width:100%">
  <tr>
    <th rowspan="4">Name</th>
    <th rowspan="2">hello</th>
    <th colspan="3">Telephone</th>
    <th rowspan="2">head</th>
  </tr>
  <tr>
    <td>name</td>
    <td>phone</td>
    <td>email</td>
    
    
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td rowspan="2">555 77 854</td>
    <td rowspan="2">555 77 855</td>
    <td rowspan="2">2222222222</td>
    <td rowspan="2">status</td>

  </tr>
    <tr>
     <td>2ndhello</td>
      
    </tr>
</table>



</body>
</html>