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!
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 have a webgrid with an actionlink which I want to use to edit the selected row in a new view. I know that I can use an actionlink to supply an arguement to my actionresult method but I don't know how to pass the webgrid's row data to my controller apart from using actionlink.
#{
ViewBag.Title = "Index";
}
<h2>
Index</h2>
<p>
#Html.ActionLink("Create New User", "CreateUser")
</p>
<div class="webgrid-wrapper">
#model IEnumerable<UserManager.Models.vw_UserManager_Model_Add_Users>
#{
ViewBag.Title = "Jobs";
WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");
}
#grid.GetHtml(
fillEmptyRows: true,
tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns: new[] {
//grid.Column("ApplicationId"),
//grid.Column("salutation"),
//grid.Column("PasswordSalt"),
grid.Column("FirstName"),
//grid.Column("LoweredEmail"),
//grid.Column("PasswordQuestion"),
//grid.Column("PasswordAnswer"),
// grid.Column("PasswordFormat"),
grid.Column("LastName"),
grid.Column("Password"),
grid.Column("isactive"),
//grid.Column("IsLockedOut"),
grid.Column("email"),
grid.Column("module_name"),
//grid.Column("LastLoginDate"),
//grid.Column("LastPasswordChangedDate"),
//grid.Column("LastLockoutDate"),
//grid.Column("FailedPasswordAttemptCount"),
//grid.Column("FailedPasswordAttemptWindowStart"),
//grid.Column("FailedPasswordAnswerAttemptCount"),
//grid.Column("FailedPasswordAnswerAttemptWindowStart"),
// Rest of grid columns, seen previously
#*grid.Column(
"",
header: "Actions",
format: #<text>
#Html.ActionLink("Edit", "Edit", new { id = item.email })
</text>
) ,
grid.Column(
"",
header: "Actions",
format: #<text>
#Html.ActionLink("Delete", "Delete", new { id = item.email })
</text>
) *#
#* grid.Column(
header:"",
format:#<text><div id="btnSelectedRow">
"#item.GetSelectLink("Edit")</div></text>
),*#
grid.Column(
header:"",
format:#<text><div id="btnSelectedRow">
"#Html.ActionLink("Edit record",
"EditUser",
"UserManager",
new {selectedRow = grid.SelectedRow },
null
)</div></text>
)
})
#if (grid.HasSelection)
{
var record = grid.SelectedRow;
#*#RenderPage("~/Views/UserManager/EditUser.cshtml", new { record = grid.SelectedRow })*#
}
</div>
<script type="text/javascript">
$(document).ready(function () {
function jQueryUIStyling() {
$('input:button, input:submit').button();
// Style tables.
$('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
$('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
jQueryTableStyling();
}
//
// Style tables using jQuery UI theme. This function is
// split out separately so that it can be part of the AJAX
// callback of the WebGrid WebHelper in ASP.NET MVC.
//
function jQueryTableStyling() {
$('.webgrid').addClass('ui-grid-content ui-widget-content');
$('.webgrid-header').addClass('ui-state-default');
$('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
}
});
</script>
My controller
public ActionResult EditUser(System.Web.Helpers.WebGrid record)
{
record.ToString();
return View();
}
Summary
How to pass row data using ActionLink from one view to another via ActionResult method.
You have two options, really: have your action take the user Id and look the user up, or have each row of your grid contain a form which sends all the user details to the action when you click 'edit'. Which of those you choose depends on what your action is supposed to do:
If it redirects to a form where the user can edit the user they selected, use the first approach
If it takes all the user details and saves an updated user, use the second approach
Edit
To pass the id you can use this for the action link:
#Html.ActionLink(
"Edit record",
"EditUser",
"UserManager",
new { id = item.email })
...and this for the action signature:
public ActionResult EditUser(string id)
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 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.
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