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
Related
How can I hide a column of webgrid? I am able to hide header of the webgrid. Using the code below hides the data but column still appears in the UI as blank. Below is my code to hide the column but it doesn't work:
#grid.GetHtml(
htmlAttributes: new { #id = "WebGrid", #class = "Grid" },
columns: webGrid.Columns(
grid.Column("Sr.No.", format: item => rowVal = rowVal + 1),
grid.Column(null, null, format: #<input type="hidden" name="IDHidden" value="#item.ID" />)
)
)
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
I want to add checkbox in my webgrid so anybody can tell me how can I do this? And also tell me how can I select all checkbox and delete them. This is my code:-
#{
var grid = new WebGrid(
Model, rowsPerPage: 5,
defaultSort: "CatagoryId",
columnNames: new[] { "Category_Name", "Parent_Category_ID", "Category_Desc", "IsGenderApplicable", "IsAgeApplicable", "IsActive" }
);
}
#grid.GetHtml(
fillEmptyRows: false,
mode: WebGridPagerModes.All,
columns:grid.Columns(
grid.Column("Category_Name", header: "Catagory Name"),
grid.Column("Parent_Category_ID", header: "Parant CatID"),
grid.Column("Category_Desc", header: "Description"),
grid.Column("IsGenderApplicable", header: "Gender Application"),
grid.Column("IsAgeApplicable", header:"Age Application"),
grid.Column("IsActive", header: "Active")
)
)
Add a checkbox as:
grid.Column(format: #<text><input name="chkbox"
type="checkbox" value="some value" /></text>),
Your second query: how can I select all checkbox ?
Please refer to this blog: http://www.codeproject.com/Questions/273164/mvc-checkbox-checked-rows-in-the-web-grid
I have inserted the link buttons "Add New Record" and "Save All" at the bottom of my Webgrid. But I want them to be in the footer of the WebGrid. I have searched for this a lot, but found nothing. Can someone tell me how to add a link or button in the "footer" of a WebGrid.
Here is some code of my WebGrid
#model IEnumerable<MvcGrid2.Models.Employee>
#{
WebGrid grid = new WebGrid(
source: Model,
rowsPerPage: 4);
}
#grid.GetHtml(htmlAttributes: new { id = "WebGrid1" },
tableStyle:"gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
rowStyle: "gridRow",
alternatingRowStyle: "gridAltRow",
mode: WebGridPagerModes.All,
firstText: "<<",
previousText: "<",
nextText: ">",
lastText: ">>",
columns: grid.Columns(
#* grid.Column( columnName : "EmployeeId",
format: #<text>#item.EmpId</text>),*#
grid.Column(columnName: "Employee Id",
format: #<span>
<span id="spanEmpId_#(item.EmpId)">#item.EmpId</span>
#Html.TextBox("EmpId_" + (int)item.EmpId, (int)item.EmpId, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Employee Name",
format: #<span>
<span id="spanEmpName_#(item.EmpId)">#item.EmpName</span>
#Html.TextBox("EmpName_" + (int)item.EmpId, (string)item.EmpName, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Designation",
format: #<span>
<span id="spanEmpDesg_#(item.EmpId)" >#item.Designation</span>
#Html.TextBox("EmpDesg_" + (int)item.EmpId, (string)item.Designation, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Action",
format: #<text>
Edit
Update
Cancel
Update
Cancel
Delete
</text>)
))
WebGrid doesn't have a modifiable footer per se. However if you view the tutorial on ASP.NET you'll see a way to make that happen in css.
What you can do is make your last row the same css class as your footer, or you can insert your buttons/links with javascript. Neither approach is clean, but as far as I can tell there is not a better way to accomplish your goal without rewriting the control. Many people have suggested looking into Telerik's controls, if you have/can get a license for their stuff.
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>