I have a webgrid which is populated with data from database, and im providing edit and delete functionality with edit functionality in popup...Im facing few issues in this
The first issue is I enabled paging and sorting and both are not working, the second issue is when the user clicks the Edit button a popup fires and user Edits the data and submits it and the changes are made to database but the grid is still holding the original data..
posting my sample code
<div id="grid">
#grid.GetHtml(
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
rowStyle: "gridRow",
alternatingRowStyle: "gridAltRow",
columns:grid.Columns(
grid.Column("FirstName", "First Name", style: "colFirstName"),
grid.Column("LastName", "LastName", style: "colLastName"),
grid.Column("Country", "Country", style: "colEmail"),
grid.Column(header:"Edit",format:#<text>#Html.ActionLink("Edit", "EditDetails", new { id = item.Id }, new { #class = "editLink" })</text>,style: "colOperation"),
grid.Column(header: "Delete", format: #<text><img src="../../Content/images/delete.png" alt="" style="border:none;" /></text>, style: "colOperation")),
mode: WebGridPagerModes.Numeric)
</div>
Related
//this is my web grid
using (Html.BeginForm())
{
<div id="content">
#grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",//properties
alternatingRowStyle: "webgrid-alternating-row",//this are the
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(header: "job_id", format: #<text><div>#(item.WebGrid.Rows.IndexOf(item) + 1)</div></text>),
grid.Column(columnName: "location", header: "location"),
grid.Column(columnName: "jobtitle", header: "jobtitle"),
grid.Column(columnName: "technology", header: "technology"),
grid.Column(columnName: "job_description", header: "job_description"),
grid.Column(columnName: "category", header: "category"),
//this is link for navigating to next page with selected id
grid.Column(columnName: "Apply",format:#<text>#Html.ActionLink("Apply", "JobDetails", "Client")</text>)
))
</div>
}
If I understood your problem correctly then this may help:
Extract the grid component to a partial view and then it can be reused any where.
If you mean by extracting data only, then you have to use jQuery ajax to pick up data of interest.
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 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 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 successfully added a WebGrid with a DropDownList that displays the correct data. I have each row set up for a user can set an error level for an error alert. So my question is how do I submit (HttPost) the WebGrid back to the Controller? I created a property in my model but this being the first time I working with a WebGrid I am not sure how to accomplish this.
Here is a snippet from my View:
var grid = new WebGrid(Model.UserAlerts,
defaultSort: "ErrorCategory",
rowsPerPage: 20);
...
#using (Html.BeginForm())
{
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("ErrorCategory", "Error Category"),
grid.Column("Error", "Error Name"),
grid.Column(header: "Error Level", format: #<text> #Html.DropDownList("ErrorLevelList")</text>)
)
)
</div>
...
}