This is my code
WebGrid passiveAdGrid = new WebGrid(Model.InactiveAds, rowsPerPage: 10, ajaxUpdateContainerId: "passiveAdGrid");
<div >
#passiveAdGrid.Pager(WebGridPagerModes.NextPrevious);
#passiveAdGrid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
htmlAttributes: new { id = "passiveAdGrid" },
columns: passiveAdGrid.Columns(
passiveAdGrid.Column(format: #<text><img src="#Url.Content("~/Content/images/preview-photo.gif")" alt="Image"/></text>),
passiveAdGrid.Column("Title", "Title", canSort: true),
passiveAdGrid.Column("ExpirationDate", "Date of Expiry", canSort: true),
passiveAdGrid.Column("NumViews", "Number of views", canSort: true),
passiveAdGrid.Column(format: (item) => Html.ActionLink("Activate", "PostAd", "Ads", new { relist = item.Id }, null)),
passiveAdGrid.Column(format: (item) => #Ajax.ActionLink("Remove", "RemoveAd", "Ads", new { adID = item.Id, status = "ActivationPending" }, new AjaxOptions { UpdateTargetId = "AdView", HttpMethod = "POST", OnBegin = "return confirm('Are you sure you wish to delete this Ad?');" }))
));
</div>
its works fine if the above code is executed while page first time loading ...
In my case I am loading this grid using ajax (ie,calling a action in cotroller which return a partial view via ajax and replace that resulting html with existing html)... But sorting is not working anymore after relaoding the grid using ajax
Related
In my partial view I have upload document and ajax webgrid which displays the document that is uploaded.
This is my partial view Upload_doc.cshtml,
#{
WebGrid doc_upload = new WebGrid(null, rowsPerPage: 5, fieldNamePrefix: "g1", pageFieldName: "p1",
ajaxUpdateContainerId: "grid");
doc_upload.Bind(Model.documents, autoSortAndPage: true, rowCount: 5);
}
<div id="ajaxgrid">
<input type="file" id="file" name="file" />
<input type="submit" class="btn btn-warning"/>
<div >
#doc_upload.GetHtml(htmlAttributes: new { id = "grid" }, tableStyle: "table table-bordered", mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>", columns: doc_upload.Columns(
doc_upload.Column("sno", "Serial No.", canSort: true),
doc_upload.Column("docdesc", "Document Title"),
doc_upload.Column("docdt", "Document Date", format: (k) => k.docdt != null ? string.Format("{0:dd-MMM-yyyy}", k.docdt) : ""),
doc_upload.Column(header: "Actions", format: (item) =>
new HtmlString(
Html.ActionLink("View", "ViewDoc", new { sno=item.sno}, new { target = "_blank" }) + " " +
Ajax.ActionLink("Delete", "delete",
new { sno=item.sno }, new AjaxOptions
{
UpdateTargetId = "test",
InsertionMode = InsertionMode.Replace
})
)
)
))
</div>
My problem is:-
case(i) When I click on header to sort, whole page does postback as it excutes Index page and same for paging defeating the purpose of ajax.
case (ii) If I upload document and then I sort or do paging, my webgrid disappears.
case(iii) If I delete a document and then I sort or do paging, it will execute delete function again.
So, How to change default loading page of web grid?
Please Help!!! Thank You
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, __ = __ });
}
I have 2 WebGrid. I want to use the property SelectedRow. in the first WebGrid works well, but the second not.
This is the main view (WebGrid 1), here called a partial view that contains the second WebGrid:
#model IEnumerable<RolesMVC3.Models.ESTUDENT>
#{
ViewBag.Title = "Index";
WebGrid grid = new WebGrid(Model);
}
<h2>Index</h2>
#using (Html.BeginForm())
{
#grid.GetHtml(fillEmptyRows: false,
alternatingRowStyle: "alternate",
headerStyle: "header",
tableStyle: "table",
selectedRowStyle: "selected",
mode: WebGridPagerModes.All,
columns: new[] {
grid.Column("IdEstudent", header: "ID"),
grid.Column("NameEstudent", header: "Name"),
grid.Column("LastNameEstudeNT", header: "Last Name"),
grid.Column( "", header: " ",format:#<text>#item.GetSelectLink("SELECT")</text>)
})
if (grid.HasSelection)
{
Html.RenderAction("Process", "Pass", new { id = grid.SelectedRow["IdEstudent"] });
}
}
This is a partial view of the second WebGrid (WebGrid 2). The WebGrid 2 contains records, but Why grid2.SelectedRow ["IdConsultation"] is NULL?
**Process.cshtml:**
#model IEnumerable<RolesMVC3.Areas.Manager.Models.ConsViewModel>
#{
WebGrid grid2 = new WebGrid(Model);
}
#grid2.GetHtml( fillEmptyRows: false,
alternatingRowStyle: "alternate",
headerStyle: "header",
tableStyle : "table",
selectedRowStyle: "selected",
mode: WebGridPagerModes.All,
columns: new [] {
grid2.Column("IdConsultation", header: "Consultation"),
grid2.Column("Idregister", header: "Register"),
grid2.Column( "", header: " ",format:#<text>#item.GetSelectLink("SELECT")</text>)
})
#if (grid2.HasSelection)
{
<input type="hidden" id="Consultation" name="Consultation" value="#grid2.SelectedRow["IdConsultation"]"/>
Html.RenderAction("EstudianiatesCJ1", "Sustitucion");
}
blessings
grid2.SelectedRow ["IdConsultation"] is NULL because nothing is selected. You should set the first row selected by default if you want so.
im currently using the selection by Javascript with the following JS code:
$(document).on('click', '#selectBtn', function () {
var tr = $(this).closest('tr');
tr.addClass('info').siblings().removeClass('info');
/*Here you can send selection to controller */
return false;
});
Hope this help!
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.
I am using this webgrid in my view.
<div class="grid">
#{
var grid = new WebGrid(Model.SearchResults, canPage: true, rowsPerPage: 15);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(
htmlAttributes: new { #style = "width:100%", cellspacing = "0" },
columns: grid.Columns(
grid.Column(header: "Customer Name", 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", format: item => item.SSN)
))
}
</div>
I search with SSN and display the results in a webgrid. The displayed data is dummy data.
I have a bool AccountVerified in my viewmodel, now I should not give action link to the accounts which are not verified and display text next to them saying account verification pending. Can someone help me on this?
Try the following:
grid.Column(
header: "Customer Name",
format: (item) =>
(bool)item.AccountVerified
? Html.ActionLink(
(string)item.FullName,
"ShowContracts",
new {
id = item.UserId
},
new {
style = "color: 'black'",
onmouseover = "this.style.color='green'",
onmouseout = "this.style.color='black'"
}
)
: Html.Raw("pending")
)
or write a custom HTML helper to avoid this monstrosity and simply:
grid.Column(
header: "Customer Name",
format: item => Html.PendingLink(item)
)