i just encounter a code where a person showing how to keep webgrid in partial view and populate. see the link for complete code Bind WebGrid form AJAX
see their partial view code
<!-- Current Buildings -->
#{
if (Model != null && Model.Count() > 0)
{
var grid = new WebGrid(source: Model, rowsPerPage: ThisController.PageSize, ajaxUpdateContainerId: "tabs-2", defaultSort: "BuildingNumber");
grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
grid.GetHtml(
tableStyle: "display",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("BuildingNumber", header: "Building Number"),
grid.Column("ConstructionDate", header: "Construction Date"),
grid.Column("ExtSquareFeet", header: "Exterior Sq. Ft."),
grid.Column("IntSquareFeet", header: "Interior Sq. Ft."),
grid.Column("IU_Avail", header: "IU Available"),
grid.Column("SpaceAvail", header: "Space Available"),
grid.Column("FixedAssetValue", header: "Fixed Asset Value"),
grid.Column("FixedEquipValue", header: "Fixed Equipment Value")
)
);
}
else
{
#:There are no buildings at this facility.
}
}
but there is no reference for model at top like
#model IEnumerable<MyProject.Models.BuildingModel>
see how partial view understand which model they need to use to populate the webgrid.
see this code to bind webgrid
grid.Bind(Model, rowCount: Model.Count(), autoSortAndPage: false);
here the word model has been used so how web grid know about model because no reference has been added at top of partial view.
in main view they use this code to render partial view
#Html.Partial("_Buildings")
i do not know that model data no need to pass with
#Html.Partial("_Buildings")
or model data automatically pass to partial view.
please help me to understand this. thanks
Related
I have the following WebGrid column inside my asp.net mvc web application :-
gridcolumns.Add(new WebGridColumn() { ColumnName ="Description",Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Description).ToString(),CanSort=true
,
Format = #<text>#item.TrimmedDescription</text>});
my question is how i can add hidden-sm bootstrap class to the above column, so that the column will be hidden on small devices ? can anyone advice ?
Thanks
EDIT
i define the Style as follow:-
gridcolumns.Add(new WebGridColumn() { ColumnName ="Description",Header = Html.DisplayNameFor(model => model.Content.FirstOrDefault().Description).ToString(),CanSort=true
,
Format = #<text>#item.TrimmedDescription</text>,Style="hidden-sm"});
var grid = new WebGrid(
canPage: true,
rowsPerPage: Model.PageSize,
canSort: true,
ajaxUpdateContainerId: "skillgrid", fieldNamePrefix: "skill");
grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(htmlAttributes: new { id = "skillgrid" }, // id for ajaxUpdateContainerId parameter
fillEmptyRows: false,
tableStyle: "table table-bordered table-hover",
mode: WebGridPagerModes.All,
columns: gridcolumns
);
the above have removed the Description column on small devices ,, but the grid header is still showing "Description" . so now i got wrong overlap between WebGrid headers and WebGrid columns content...
It has a style property, you have to just set that property of WebGridColumn properties:
style: "yourcssclass"
or:
style = "yourcssclass"
you can also check this article
I had read some tutorials of how to implement a MVC webgrid through AJAX but I want to understand what's happening under the hood, and which is the correct implementation for ajaxUpdateContainerId.
Example A:
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(htmlAttributes: new { id = "result" }, tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
Example B
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
<div id="result">
#grid.GetHtml( tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
</div>
}
Example C:
<div id="result">
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
</div>
I know that you have to bind the content to the grid and that you have to pass only the elements that you are going to display in the webgrid, but I'm trying to understand how ajaxUpdateContainerId works, so this examples work for this purpose.
Which of this examples is the correct way to update the content and why?
ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?
I hope someone can help me with this and this can be useful to someone else. Thanks In advance.
After a lot of tests I get the answer for this:
Which of this examples is the correct way to update the content and why?
The three examples are correct and will work, which one to use will depend on your needs, in my specific case I will use the Example A because I only want to update the content of the table(WebGrid) not everything inside the div, if for some reason every time you sort or change page you want to update something else you should use Example C.
Example B is pretty much like Example A but I don't need to put an extra div.
ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?
It's doing a update and will only update the content of the element with the specified ID in this case result.
And to understand how this works in Example A I did this:
#Html.Label("date", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"))
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(htmlAttributes: new { id = "result" }, tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
If you page/sort in the webgrid the time label will not change and this is
the expected behavior only the content of the table will change, if you do the same in the Example C and everything is wrapped inside the div every time you page/sort you will see that all the content will be updated including the time label.
This seems pretty logic now but I was confused how this works so I hope this can be useful to some one else.
Note: I was having a weird behavior where after paging and sorting I get an empty page with the content of the grid and it turns that it was because I was using history.js and I was pushing the content of the div that was wraping my partial view(which it's ok for Example C) but I was using Example A and really what I want is to push only the content of my webgrid wich is the one that was changing.
I am new to MVC3. I have coded an application in which I display data into a webgrid with checkboxes. I am trying to find out how to send a particular row id the controller action method when I click on a checkbox. Any help appreciated.
This all depends on what you are trying to do. Typically, in the view, I will add a data attribute like data-rowid="###" and then use jQuery to capture the .click event. Then in the .click event, retrieve the clicked elements value for data-rowid and call .ajax to post the data to the controller.
This is a complete example where I have a WebGrid with the last column containing a "Remove" link that uses Ajax to call an action on the server. On completion of the Ajax request, the corresponding row is removed from the table. The MvcHtmlString is used to inject a span tag into the column. It contains an id value that is subsequently used to identify the row to be removed from the table.
<div id="ssGrid">
#{
var grid = new WebGrid(canPage: false, canSort: false);
grid.Bind(
source: Model,
columnNames: new[] { "Location", "Number", "Protection", "Methodology" }
);
}
#grid.GetHtml(
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Location", "Location"),
grid.Column("Number", "Number"),
grid.Column("Protection", "Protection"),
grid.Column("Methodology", "Methodology"),
grid.Column(
format: (item) =>
new MvcHtmlString(string.Format("<span id='ssGrid{0}'>{1}</span>",
item.SecondarySystemId,
#Ajax.RouteLink("Remove",
"Detail", // route name
new { action = "RemoveSecondarySystem", actionId = item.SecondarySystemId },
new AjaxOptions {
OnComplete = "removeRow('ssGrid" + item.SecondarySystemId + "')"
}
)
)
)
)
)
)
</div>
<script>
function removeRow(rowId) {
$("#" + rowId).closest("tr").remove();
}
</script>
I have a webgrid
#{
var gdAdminGroup = new WebGrid(source: Model, rowsPerPage: 20, ajaxUpdateContainerId: "tdUserAdminGroup");
}
#gdAdminGroup.GetHtml(
htmlAttributes: new { id = "tdUserAdminGroup" },
tableStyle: "gd",
headerStyle: "gdhead",
rowStyle: "gdrow",
alternatingRowStyle: "gdalt",
columns: gdAdminGroup.Columns(
gdAdminGroup.Column(columnName: "Description", header: "Admin Group"),
gdAdminGroup.Column(header: "", format: #<text><input name="chkUserAdminGroup" type="checkbox" value="#item.AdminGroupID" #(item.HasAdminGroup == 0? null : "checked") /></text>)
)
)
If I check some checkboxs and goes to the second page, the selection on the first page will be lost. Can anyone help me with this? Thank you
The Page selection is links why
- The page is refeshed via a GET command (< a href="...." not < input type="submit" ....)
- The link does not submit form in which you checkbox is in, why you can not read the state of the checkbox.
Either you should look for a JavaScript solution to amend the Checkbox data in the GET URL,
or find another Grid generator.
http://mvccontrib.codeplex.com/wikipage?title=Grid&ProjectName=mvccontrib
I have a simple MVC WebGrid. When a user clicks on a row, I'd like to do something based on the row he clicked. Its pretty simple in jqGrid and even using jquery templates, but I'd like to get it right using the MVC WebGrid.
I have the following:
<h2>OrderList</h2>
#{
var grid = new WebGrid(canPage: true, rowsPerPage: 20, canSort: true, ajaxUpdateContainerId: "grid_Orders");
grid.Bind(Model.Orders, rowCount: Model.TotalOrders, autoSortAndPage: true);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(htmlAttributes: new { id = "grid_Orders" },
columns: grid.Columns(
grid.Column(columnName: "OrderNo", header: "Order No"),
grid.Column(columnName: "TotalAmountDisplay", header: "Amount", format:#<div style="text-align:right"> R #item.TotalAmountDisplay</div>, canSort: false)
));
}
and the following jQuery
$(document).ready(function () {
$("#grid_Orders").delegate("tbody tr", "hover", function () {
$(this).css("cursor", "pointer");
$(this).toggleClass("datahighlight");
});
$("#grid_Orders").delegate("tbody tr", "click", function () {
//How do I get the underlying data in this row???
});
});
Unfortunately you will need to use jQuery in order to access each row's html data - there is no rich programming model against it that Im aware of (the beauty of MVC at times as well ha)
The same scenario applies here:
MVC WebGrid - How to programatically get the current page, sort column etc