Is it possible to create grid in asp.net MVc3.0. The gridview that is used in asp.net similar to that if yes then please let me know how to create a simple grid in asp.net mvc3.0 I m using sql server Database to fetch data, that has to be filled in grid.
Thanks.
There are different possibilities:
Server side grids:
The built-in WebGrid helper
MvcContrib Grid
Telerik Grid
Client-Side grids:
jqGrid
YUI DataTable
and many others...
You can use WebGrid in MVC3. This is new in MVC3.
Use this code in your View.
#model IList<YourViewModel>
#{
ViewBag.Title = "Amend Absence";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{
var grid = new WebGrid(source: Model, rowsPerPage: 200,
canPage: false, canSort: true, defaultSort: "Absentee");
}
<p>
<h2>Absentee List</h2>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit",
new { id = item.Id })),
grid.Column("Absentee", "Absentee",canSort:true),
grid.Column("AbsStart", "AbsStartDate")
))
</div>
</p>
See the excellent Get the Most Out of WebGrid in ASP.NET MVC
You need to create it using TABLE / TR / TD tags.
Here is few links which may help you
mvc gridview with code
http://www.schnieds.com/2010/01/gridview-in-aspnet-mvc.html
Related
I have a webgrid that is in a partialview. The parial view contains an ajax form which pass data to the webgrid. My view looks like
using (Ajax.Begin("Gain", "Gaining", new AjaxOptions{UpdateTargetId="Res"}))
{
}
<div id="Res">
<div id="grid">
#{var grid = new WebGrid(source: Model.myList, canPage: true, rowsPerPage: 25, ajaxUpdateContainerId: "grid",
canSort: true);
grid.Pager(mode: WebGridPagerModes.All));
#grid.GetHtml(htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column(columnName: "num", header: "Number"),
grid.Column(columnName: "name", header: "Full Name", canSort: true)
));
}
</div>
</div>
The page displays wells but sorting and moving to the next page does not work. When I try, the grid just dissapears. I notice that when I hover over the column header, that when I hover over the header sorting links, the url is still localhost:XXXXX/#. When I remove the ajaxUpdateContainerId="Res", the url seems right: localhost:xxx?length=4?sort=name&sortdir=ASC, which is a wrong URL given that my data is obtained from the controller, Gaining and method, Gain
How can I get this to work please.Or how can i debug this? How does sorting works?
EDIT
I am now confused as to the use of ajaxUpdateContainerId. According to this link, this did not aid his/her sorting. If I remove it from mine, the whole partial view is removed when I click the header link to sort, or any paging link. What is the use of ajaxUpdateContainerId use then?
#{
var gridUser = new WebGrid(canPage: true, defaultSort: "CreatedOn", rowsPerPage: 5,
ajaxUpdateContainerId: "Divxyz");
gridUser.Bind(Model.abc, rowCount: Model.User.Count(), autoSortAndPage: true);
gridUser.Pager(WebGridPagerModes.All);
}
<div id="Divxyz" style="display: none">
I am using a mvc3 webgrid with ajax paging ... I figured out my solution to do ajax Paging as above.
BUT ..... My grid is at bottom of the page and When I click on page number(It shows # as its linking page), it takes me to top of page moving grid to bottom of page again for every page number click. Please help me on this.
Thanks In Advance
.
I figured out the solution for the issue.
I added below script and when I click on page number page doesnt scroll
<script type="text/javascript">
$(function () {
$('th a, tfoot a').live('click', function () {
$(this).attr('href', '#DivGridUser-anchor');
});
});
</script>
I am having the same issue as this question.
I have created a filter that is supposed to work alongside a WebGrid. The filter works for the first page, but if you try to go to a different page or sort the results, the filter is lost. I followed the suggestion in the previous question to change the method to GET, but instead of the target getting updated, it disappears from the page.
Grid call inside a div "Grid":
var grid = new WebGrid(Model, ajaxUpdateContainerId: "Grid", rowsPerPage: 20);
Filter form:
#using (Ajax.BeginForm("Action", new { filter = "filter" }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Grid", HttpMethod = "Get" }))
If "filter" is set in the Action, I return the PartialView of the grid instead of the full View.
Firebug is showing me that the correct HTML is getting sent in the response, but for whatever reason it's not getting inserted into the Grid div.
Any suggestions would be appreciated!
Edit: My current workaround is to use an HTML form instead of AJAX, but I would like to stick to AJAX if possible.
I got a solution for this problem where I had a div surrounding my Webgrid like this:
Index.cshtml:
<div class="grid-container">
<div id="my-grid">
#Html.Partial("_Grid", Model)
</div>
</div>
_Grid.cshtml:
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
When sorting in my list, on filtered results, the Webgrid dissapeared and wasn't inserted into my-grid-div. HOWEVER, when I put the surrounding "my-grid" inside the partial view, it worked. I don't get the reason why, but it works now.
Index.cshtml:
<div class="grid-container">
#Html.Partial("_Grid", Model)
</div>
_Grid.cshtml:
<div id="my-grid">
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
</div>
Please suggest me regarding one issue. I am using MVC3 Razor webgrid I need 2 input submit/button [Edit/Delete] in each row. Should be button not link. Code is something like this.
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #<input type="button" value="Edit"/>),
grid.Column(format: #<input type="button" value="Delete"/>))
)
I have to do on server no javascript function.
Thanks a lot
You can use ACTION LINK here,
#grid.GetHtml(columns:
grid.Columns(
grid.Column("ID", "id"),
grid.Column("Value", "Value"),
grid.Column(format: #Html.ActionLink("Edit", "EditAction", new { id = item.id}),
grid.Column(format: #Html.ActionLink("Delete", "DeleteAction", new { id = item.id})
)
you can then define a nice css for it to make it look like a button,
refer
http://www.dofactory.com/topic/1015/html-actionlink-and-class-attribute.aspx
After trying options I accomplish this using a hidden field. On click button populate hidden field with javascript and submit form using javascript.
grid.Column(format: #<form method="get"action="/Controller/Action/#item.id">
<input id="Submit" type="submit" value="Edit" />
</form>)
How can I specify the font for an html webgrid in asp.net-mvc3?
#{
var grid = new WebGrid(...);
}
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "head",
...)
Where are these styles being created?
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid", <- I can't find these styles anywhere in my mvc3 project?
headerStyle: "head",
try this: in your css
(or div#grid p i dont know what tag will be appear for grid rows when grid is rendered, you can use for example firebug and see what tag will be there )
div#grid span
{
font-size: 10px;
}
and if you cant find webgrid class try to write it by yourself.