CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcasp.net-mvc-4razor
Lamloumi Afif
Lamloumi Afif

Reputation: 9081

Convert table to datagrid within razor view

I have an Asp.net mvc4 application with Razor. In the view index.cshtml

<table>
<tr>
            <td>Propriétés correspondantes à l'élément</td>
            <td>
                <table class="table_form">
           <tr>
               <th>Nom</th>
               <th>Valeur</th>
               <th></th>
          </tr>
                  @{
                  Features_Management.Models.Chef chef = new Features_Management.Models.Chef();
                    List<Features_Management.Models.Property> list_prop = chef.Get_List_Property();

                    }
                  @for (int item = 0; item < list_prop.Count; item++)
                    {
          <tr>
                    <td>@list_prop[item].PName</td>
                    <td>@list_prop[item].Value</td>
                    <td><input type="checkbox" name="proper@(item)" /></td>
         </tr>
                     }
               </table>
            </td>
</tr>
</table>

i'd like to convert this table to a DataGrid to view the with the possibility of scrolling.

scrolling

How can i do this task?Any suggestions?

Upvotes: 0

Views: 3708

Answers (2)

PiotrWolkowski
PiotrWolkowski

Reputation: 8782

It's an old post but maybe someone find this answer useful.

With jQuery Bootgrid turning a table into a datagrid is childishly easy, especially if you just want to display data.

In my case all I had to do was to add this to my script section:

$("#my-grid").bootgrid();

And to add ids to my column headers. Out of the box it gives you paging, searching, page sizes, sorting... Also, documentation is quite decent and there is a reasonable number of clear examples. It can be easily installed with nuget:

Install-Package jQuery.Bootgrid

Upvotes: 1

JotaBe
JotaBe

Reputation: 39004

You can use a WebGrid.

You can understand how it works and improve it by reading this:

Get the Most out of WebGrid in ASP.NET MVC

Once you have your table generated, you can use a jQuery plugin like this: jQuery Scrollable Table Plugin. There is sample code to see how it works.

This scriptbe triggered on the $(document).ready(...) of the page (or in the ajax callback, if you're loading it by using jQuery).

Theere are more plugins similar to this one which make the same function. Google "scrollable table jquery plugins".

(Naurally, you need to also include jQuery in your project, if you're not still using it).

Upvotes: 1

Related Questions