Razor WebGrid doesn't keep scrollbar position - asp.net-mvc-3

Whenever I page or sort my ajax enabled webgrid, my scrollbar position is reset to the top of the page. Is there a way to maintain the scrollbar position?
#model Registrar.WebUI.Models.InstructorPageViewModel
#{
var grid = new WebGrid(canPage: true,
canSort: true,
rowsPerPage: Model.PagingInfo.ItemsPerPage,
ajaxUpdateContainerId: "grid");
grid.Bind(Model.Instructors, rowCount:Model.PagingInfo.TotalItems, autoSortAndPage:false);
grid.Pager(WebGridPagerModes.All);
}
<div id="grid">
#grid.GetHtml(columns: grid.Columns(
grid.Column(format: x => Html.ActionLink("Edit", "Edit", new {id=x.Id})),
grid.Column("FirstName", "First Name"),
grid.Column("LastName", "Last Name"),
grid.Column("Email"),
grid.Column("UserName", "User Name"),
grid.Column("Phone") )
)
</div>

This is because generated sort link in your header has href="#". I've got the same problem and this is my solution.
This is my _grid.cshtml partial view
#{
var grid = new WebGrid(Model.LeaseOffers, canPage: false, ajaxUpdateContainerId: "offerGrid", ajaxUpdateCallback: "afterLoad()");
}
<div id="offerGrid" class="offer-table-wrapper">
#grid.GetHtml(
rowStyle: "offer-table-tr-odd",
alternatingRowStyle: "offer-table-tr-even",
columns: grid.Columns(
grid.Column("ProviderLogo", "", format: #<img src="#Url.Content(string.Format(Constants.LeaseOfferProviderLogoContentUrlFormat, item.ProviderId))" />, style: "col-first", canSort: false),
grid.Column("ProviderName", "Leasingodawca", format: #<div>#item.ProviderName</div>, style: "col-name"),
grid.Column("DownPayment", "Udział Własny", format: #<div>#item.DownPayment.ToString(Constants.PercentDataToStringFormat)</div>, style: "col-third"),
grid.Column("LeasePeriod", "Okres leasingu", format: #<div>#string.Format(Constants.LeasePeriodDataFormat, item.LeasePeriod)</div>),
grid.Column("LeasePayment", "Rata leasingu", format: #<div>#string.Format(Constants.MoneyDataFormat, item.LeasePayment)</div>),
grid.Column("ResidualValue", "Wartość wykupu", format: #<div>#item.ResidualValue.ToString(Constants.PercentDataToStringFormat)</div>),
grid.Column("TotalLeasePayments", "Suma opłat", format: #<div>#item.TotalLeasePayments.ToString(Constants.PercentDataToStringFormat)</div>),
grid.Column("Actions", "", format: #<div><img src="#Href("~/Modules/LeaseBroker.Orchard.Module/Content/Images/Mockups/wezleasing.png")"/></div>, style: "col-last", canSort: false)
),
htmlAttributes: new { cellpadding = "0", cellspacing = "0" }
)
<script language="javascript">
function afterLoad() {
$("#offerGrid > table > thead > tr > th > a").attr('href', 'javascript:void(0)');
}
jQuery(document).ready(function ($) {
afterLoad();
});
</script>
Just after grid is loading i'm replacing all href attributes in header links into "javascript:void(0)"

You need to make sure that autopostback is disabled, It sounds like your page is redirecting, you just may not be noticing as it is happening so fast.

Related

Pagination on WebGrid deactivates after adding entries

I'm using a WebGrid with pagination in conjunction with an AJAX popup window to add new entries. I've noticed that after I've added an entry the pagination links at the bottom of the WebGrid become inactive.
The popup calls the controller's Save action which finishes with the following:
return PartialView("_PersonGrid", pModel.Persons);
There are three views that are used here. An index, a grid and a popup. The grid is embedded in the index and the popup can be called by clicking on buttons on the grid and index.
The index view has the following code:
#using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myUserGrid" }))
{
<div id="myUserGrid">
#Html.Partial("_PersonGrid", Model.Persons)
</div>
<br />
//other code
}
The grid view (_PersonGrid.cshtml) is:
#model IEnumerable<CIMsWebApp.Client.Group.Entities.IPerson>
#{ var grid = new WebGrid(Model, canSort: true, canPage: true, defaultSort: "UserName", ajaxUpdateContainerId: "myUserGrid"); }
#grid.GetHtml(
tableStyle: "dataGrid",
headerStyle: "header",
alternatingRowStyle: "evenRow",
columns: grid.Columns
(
grid.Column(header: "User Name", columnName: "UserName", format: item => Html.Raw("<a href='#' class='userNames' data-personid='"+item.PersonId+"'>" + item.UserName + "</a>"), canSort: false),
grid.Column(header: "Role(s)", columnName: "Rolebuilder", canSort: false),
grid.Column(header: "Active", columnName: "ActiveIndBuilder", canSort: false),
grid.Column(header: "Action", format:
#<span><input type="button" class="edit-user" id="#item.PersonId" value="EDIT" />
</span>, canSort: false)
)
)
finally the popup view is:
#model CIMsWebApp.Models.PersonModel
#using (Html.BeginForm("Save", "Person", FormMethod.Post, new { id = "formUser" }))
{
//code
}
When I first arrive at the page or If I refresh it they become active again.
I'm guessing your "ajaxUpdateContainerId: "myUserGrid"" is a div with an id="myUserGrid" and the partial is loaded in there.. So correct me if I'm wrong but I believe that div should be in your partial. It's a bit confusing sometimes but you should try this out..
View:
#*Everything else except the div*#
#{Html.RenderPartial("_PersonGrid", Model)
PartialView:
#model IEnumerable<CIMsWebApp.Client.Group.Entities.IPerson>
<div id="myUserGrid">
#{ var grid = new WebGrid(Model, canSort: true, canPage: true, defaultSort: "UserName", ajaxUpdateContainerId: "myUserGrid"); }
#grid.GetHtml(
tableStyle: "dataGrid",
headerStyle: "header",
alternatingRowStyle: "evenRow",
columns: grid.Columns
(
grid.Column(header: "User Name", columnName: "UserName", format: item => Html.Raw("<a href='#' class='userNames' data-personid='"+item.PersonId+"'>" + item.UserName + "</a>"), canSort: false),
grid.Column(header: "Role(s)", columnName: "Rolebuilder", canSort: false),
grid.Column(header: "Active", columnName: "ActiveIndBuilder", canSort: false),
grid.Column(header: "Action", format:
#<span><input type="button" class="edit-user" id="#item.PersonId" value="EDIT" />
</span>, canSort: false)
)
)
</div>
If this doesn't work, give some additional data (the view in which you call the partial, where and how you call the save action, etc...)
After looking into how the WebGrid pagination actually works it seems that after carrying out a save it then tries to call a GET method on the Save method. So I created a method for this very purpose and then redirected it back to the Index method. The final two parameters get passed directly to the query string which are then used in the pagination.
[ActionName("Save")]
public ActionResult Pagination(string page, string __, long id = 0)
{
return RedirectToAction("Index", new {id = id, page=page, __ = __ });
}

MVC3 WebGrid - #Url.Action using image button

I got a problem that actually I do not yet solved. For some reasons I had a request to replace the text used in Html.ActionLink with a more visual design using images as button inside a WebGrid for the usuale operations like modify, duplicate, publish and delete.
Reading I have tried many ways but none led me to the final stage:
#{
var grid = new WebGrid(Model, new List<string>(), canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(tableStyle: "webGrid",
htmlAttributes: new { id = "DataTable" },
headerStyle: "header",
alternatingRowStyle: "alt",
columns:
grid.Columns(
grid.Column("Description", header: "Description"),
grid.Column("DateCreation", header: "Creation Date"),
grid.Column("CompanyOwner", header: "Company"),
grid.Column("Owner", header: "User"),
grid.Column("Status", header: "Status"),
grid.Column("Action", header: "Action",
format: (item) => #Url.Action("publish",
"PublishItem",
new { id = item.ID })))
);
}
To do that I start with a model created with a linq to entities where I added the column Action, the one that I want to use to place my buttons. How do I place the images to work as buttons as I done in a normal table:
<a href="#Url.Action("PublishPill", new { id = item.ID })">
<img src="../../Images/world_32px.png", alt="Edit" title="Publish" border="0" /></a>
You can use
grid.Column(header: "Contraseña", format: #<text><a href="#Url.Action("ChangePassword", "Home", new { id = item.Identification })" ><img src="../../Content/images/password.png" alt="" style="border:none;" /></a></text>, style: "colOperation")

I want to call loader image when I click sorting and paging for MVC webgrid?

I create a div and tried calling Jquery like loader.show(). But not sure how to trigger it when I page or sort the mvc webgrid?
My web grid:
<div id="grid">
#{
var grid = new WebGrid<MemberSearch>(ajaxUpdateContainerId: "grid",
rowsPerPage: Model.PageSize, defaultSort: "LastName");
grid.Bind(Model.Member, rowCount: Model.TotalRows, autoSortAndPage: false);
// NOTE: I've created another html helper to allow a server-paged grid to be rendered in one call (complete with compiler type inference) as shown below
//var grid = Html.ServerPagedGrid(Model.Products, Model.TotalRows, rowsPerPage: Model.PageSize);
}
#grid.GetHtml(tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "w-footer",
alternatingRowStyle: "webgrid-alternating-rows",
columns: grid.Columns(
grid.Column(format: #<text>#Html.ActionLink("Edit", "Edit", new { Id = item.Id }) </text>),
grid.Column("fullname", header: "Name", format: #<text>#item.fullname</text>),
grid.Column("Email", header: "Email", format: #<text>#item.Email</text>),
grid.Column("companyname", header: "Company", format: #<text>#item.companyname</text>),
grid.Column("regDate", header: "Registration Date", format: #<text>#item.regDate</text>),
grid.Column("country", header: "Country", format: #<text>#item.country</text>),
grid.Column("modifiedDate", header: "Profile Modified", format: #<text>#item.modifiedDate</text>),
grid.Column("ciscontactid", header: "CIS ID", format: #<text>#item.ciscontactid</text>)
)
)
</div>
In your document.ready add the following:
$('thead > tr > th > a[href$="sort"]').click(function () {
loader.show()
});
This will select the th tags and the a tags that the WebGrid getHtml generates for you. This will handle when the grid is sorted.

MVC3 Webgrid sorting problem with 2nd+ columns

in this sample the sorting of the grid works well with the first column. Every other column can only be sorted ascending, the "sortdir" never switches to "DESC". (Ajax caching is also disabled)
Does anybody knows a solution or had the same problem? What im doing wrong?
Controller:
[OutputCache(Location = OutputCacheLocation.None)]
public ActionResult Index_Result_Org(string sort, string sortdir)
{
this.setRep();
this.rep.LoadOV();
return View("Index_OV", rep.GetOV(sort != null ? sort : "Kennung", sortdir != null ? sortdir == "ASC" : true));
}
View:
#model List<Models.OV_View>
#{
Layout = null;
var grid_BA = Html.Grid<OV_View>(Model, ajaxUpdateContainerId: "BAS_OV", canPage: false, defaultSort: "Kennung");
}
<div id="BAS_OV">
#grid_BA.GetHtml(
htmlAttributes: new { #id = "webgrid_BA" },
alternatingRowStyle: "alt",
tableStyle: "BAS",
columns: grid_BA.Columns(
grid_BA.Column("Kennung", header: "Verbandskennung", format: #<text>#Html.Label(#item.Data.Kennung)</text>, canSort: true),
grid_BA.Column("Name", header: "Verbandsname", format: #<text>#item.Data.Name</text>, canSort: true),
grid_BA.Column("Anzahl", header: "Anzahl", format: #<text>#item.Data.Anzahl</text>, canSort: true, style: "counter_column"),
grid_BA.Column("Select", header: "X", canSort: false, format: #<text><input id="Select" name="Select" type="checkbox" onclick="Select(this)" value="#item.Select" #(item.Select == true ? "Checked" : null) /></text>, style: "checkbox_column"),
grid_BA.Column("ID", "", format: #<text>#item.Data.ID</text>, canSort: false, style: "invisible_column")
)
)
</div>
Got it.
Only the defaulSort: Column can be sorted descending.
So i added the following line to the controller:
this.ViewBag.Sort = sort;
And andded and changed the following lines in the view:
var grid_BA = Html.Grid<ErgoBAS_OV_View>(Model, ajaxUpdateContainerId: "BAS_OV", canPage: false, defaultSort: "Kennung");
to:
string temp = this.ViewBag.Sort != null ? this.ViewBag.Sort : "Kennung";
var grid_BA = Html.Grid<ErgoBAS_OV_View>(Model, ajaxUpdateContainerId: "BAS_OV", canPage: false, defaultSort: temp);
This is the dirty solution, think to be clean the defaultSort has to be added to the View Model, thats what i will do now.

How to Navigate to a view spacifying the view name and controller when i click a row in mvc3 webgrid?

<div style="text-align:center" class="grid">
#{
var grid = new WebGrid(Model.SearchResults, canPage: true, rowsPerPage: 15);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(headerStyle: "webgrid-header", footerStyle: "webgrid-footer", selectedRowStyle: "webgrid-selected-row", alternatingRowStyle: "webgrid-alternating-row", rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(header: "Customer Name", style: "text-align-center", format: (item) => Html.ActionLink((string)item.FullName, "ShowContracts", new { id = item.UserId }, new { #style = "color: 'black'", #onmouseover = "this.style.color='green'", #onmouseout = "this.style.color='black'" })),
grid.Column(header: "SSN", style: "text-align-center", format: item => item.SSN)
))
}
</div>
For now I am clicking an item in a row and navigatin to a different page, but i want to click on a row to navigate.
Thanks for any help.

Resources