I have a dashboard type page which contains multiple partial views each of which contain a webgrid.
For example this is web grids is in my _CurrentSubscriptions partial view:
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "UserSubscriptions");
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Remove", "RemoveSub")</text>)));
I also have an _addSubscription partial view which contains the following grid to show search results.
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "TitlesFound");
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
Both partial views are called from my Subscriptions/index.cshtml
Is it possible to restrict the paging on each of the grids from reloading the page and just update the selected grid?
Wrap your grid in a div with an Id.
(You have already done this) When you instantiate the grid, specify the AJAX parameter
ajaxUpdateContainerId with the div's Id.
Reload your page.
Click another page and notice there is no page post back; only the grid reloads.
<div id="UserSubscriptions">
#grid.GetHtml(columns:
grid.Columns(grid.Column("Name"),
grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
</div>
Related
I'm displaying dynamically selected columns as a grid(using webgrid) in partial view.When i perform paging on partial view webgrid,that partial view grid alone loading again in new page.I want to get the pagination for partial view without redirecting partialview alone into newpage.
Judging from the code you provided it seems that you are setting the ajaxUpdateContainerId to "result" but there is not any control with that id on your page you can set the id in .GetHtml() method by providing HtmlAttributes.
So the edited line would look something like this:
#grid1.GetHtml(htmlAttributes: new { id="result" },tableStyle: "WebGrid", headerStyle: "Header", alternatingRowStyle: "alt", columns: ViewBag.Columns)
Please check this link for more details
I am using MVC 3 with Razor and I am using the below web grid to show some data,
What I need sorting on my first column. I have used similar code on other pages too for my sorting and it works fine, but here it doesnt seem to work.
However if I go to the next page say page 2 and now I click sort, it is sorted ascending and then again same problem.
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column("ColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Full article at : http://yassershaikh.com/mvc-3-web-grid-sorting-not-working/
using the columnName attribute helped, I was using the wrong column name, because of which the sorting was not working
Here is the code I am using now
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column(header:"ColName", columnName="DbColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Hope this helps someone in future too!
I'm using a WebGrid to create a paged/sortable list in MVC3. I've created an AJAX enabled Delete button which makes the delete call via AJAX, after which I'd like it to remove the row from the table.
The way I'd like to achieve this is by having an id or data-id attribute on the <tr> in the table so that I can easily manipulate it using jQuery. However I can't work out how to add attributes to rows when using a WebGrid.
I know that attributes can easily set at the grid level like so:
#grid.GetHtml(htmlAttributes: new { id = "gridMapping", style = "width:100%;" },
However I don't know how to achieve the same at the row/column level.
#grid.GetHtml(
columns: grid.Columns(
grid.Column(format: (item) => Html.CheckBox("SelectedInvoice",new { value=item.transactionId})),
//// rest of your columns here
)
)
so one way would be putting an HTML helper method in place that can handle your htmlAttributes.
Other way - using combination of format: and Html.Raw
And the last, but may be the easiest: javascript (jQuery)
so you can try something like :
$('#grid tr').each(function(){
$(this).attr('yourhtmlattribute','value');
});
and in similar way for TDs.
Here is how I achieved this
In your webgrid set up add this to one of the colums.
grid.Column("UserName", "User Name", format: #<text><span data-id='#item.Id'>#item.UserName</span></text>, canSort: true),
No when the HTML grid is rendered you will get this.
<tr jQuery45435434="3"> <span data-userid="1">Fred Smith</span></tr>
<tr jQuery45435434="4"> <span data-userid="2">Sally Smith</span></tr>
<tr jQuery45435434="5"> <span data-userid="3">Joe Smith</span></tr>
I have a strongly typed view which is uses an IEnumerable as its model.
There's a bool property on the model which I'm rendering in a MVC WebGrid in a checkbox which the user can then check or uncheck.
On submit it gets to my action method but how do I get the checked checkboxes?
If I look at the Request.Params, I see all the checked checkboxes coming back as parameters. Is there any easy way for the DefaultModelBinder to convert these back into my IEnumerable, or do I have to do this by hand?
Here's my View so far:
#model IEnumerable<XXX.XXXItemDto>
<div id="items">
#using (Ajax.BeginForm("SaveEvents", "MyController", new AjaxOptions { UpdateTargetId = "items" }))
{
var grid = new WebGrid(Model, canPage: false, canSort: false);
#grid.GetHtml(columns: grid.Columns(
grid.Column("itemDescription", header: "Event"),
grid.Column("acknowledged", format: #<text><input name="Acknowledged_#(item.staffItemOid)" type="checkbox" value="#item.staffItemOid" #(item.acknowledged ? "Checked" : null)/> </text>, header: "Acknowledged")
))
#Html.SubmitButton("Save")
}
</div>
I'm trying to add a custom header for an MVC3 WebGrid.
The header property only allows for string, and any HTML is escaped.
My current grid razor view is as follows:
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(tableStyle: "data_table-sorter",
alternatingRowStyle: "odd",
columns: grid.Columns(
grid.Column(header:"Select<span class=\"fi fi_gear\"></span>\"" , style: "table-select-col has-menu", canSort: false, format: #<input type="checkbox" value="#item.Id" />),
grid.Column("Name", "Briefing Book Name", canSort: true, style: "dj_sortable-table-column"),
grid.Column("Format", "Format", canSort: true, style: "dj_sortable-table-column")
));
How can I do this?
If you want to style individual headers in the current version of the WebGrid, you will have to use client-side code to do that.
for all header element....................
$("#gridContent").find('table thead tr a')
and then apply style any this u want see
.addClass()
.append()
for individual header.....................
actually this is applying style of rowcell to the headercell
var headerCells = $("#gridContent table tr th");
var firstRowCells = $("#gridContent table tr td");
$.each(firstRowCells, function (index, value) {
$(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});
also see
MVC3 WebGrid Formatting or Styling Column Headers
How to add Html inside ASP.NET MVC 3 WebGrid Column Name (Header)
MVC3 WebGrid Formatting or Styling Column Headers