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
Related
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 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.
when i add the web grid to my page in mvc project it sortes the data ascending on first click.
but i bring the data already sorted ascendin. then nothing happens. i want webgrid to sort descending at first.
you can see the code of my grid creation
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
grid.Pager(WebGridPagerModes.NextPrevious);
by the way i have tried the below code but it doesnt work.
if (Request.QueryString[grid.SortDirectionFieldName].IsEmpty())
{
grid.SortDirection = SortDirection.Descending;
}
Try adding a defaultSort property to your WebGrid instantiator:
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",
ajaxUpdateContainerId: "gridContent", defaultSort: "YourColumnName");
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