I'm trying to add a custom header for an MVC3 WebGrid.
The header property only allows for string, and any HTML is escaped.
My current grid razor view is as follows:
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(tableStyle: "data_table-sorter",
alternatingRowStyle: "odd",
columns: grid.Columns(
grid.Column(header:"Select<span class=\"fi fi_gear\"></span>\"" , style: "table-select-col has-menu", canSort: false, format: #<input type="checkbox" value="#item.Id" />),
grid.Column("Name", "Briefing Book Name", canSort: true, style: "dj_sortable-table-column"),
grid.Column("Format", "Format", canSort: true, style: "dj_sortable-table-column")
));
How can I do this?
If you want to style individual headers in the current version of the WebGrid, you will have to use client-side code to do that.
for all header element....................
$("#gridContent").find('table thead tr a')
and then apply style any this u want see
.addClass()
.append()
for individual header.....................
actually this is applying style of rowcell to the headercell
var headerCells = $("#gridContent table tr th");
var firstRowCells = $("#gridContent table tr td");
$.each(firstRowCells, function (index, value) {
$(headerCells[index]).addClass($(firstRowCells[index]).attr("class"));
});
also see
MVC3 WebGrid Formatting or Styling Column Headers
How to add Html inside ASP.NET MVC 3 WebGrid Column Name (Header)
MVC3 WebGrid Formatting or Styling Column Headers
Related
I have a dashboard type page which contains multiple partial views each of which contain a webgrid.
For example this is web grids is in my _CurrentSubscriptions partial view:
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "UserSubscriptions");
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Remove", "RemoveSub")</text>)));
I also have an _addSubscription partial view which contains the following grid to show search results.
WebGrid grid = new WebGrid(Model.Titles,
rowsPerPage: Model.PageSize,
defaultSort: "Name",
ajaxUpdateContainerId: "TitlesFound");
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(columns: grid.Columns(grid.Column("Name"), grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
Both partial views are called from my Subscriptions/index.cshtml
Is it possible to restrict the paging on each of the grids from reloading the page and just update the selected grid?
Wrap your grid in a div with an Id.
(You have already done this) When you instantiate the grid, specify the AJAX parameter
ajaxUpdateContainerId with the div's Id.
Reload your page.
Click another page and notice there is no page post back; only the grid reloads.
<div id="UserSubscriptions">
#grid.GetHtml(columns:
grid.Columns(grid.Column("Name"),
grid.Column("Description"),
grid.Column(format: #<text>#Html.ActionLink("Add", "AddSub")</text>)));
</div>
I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
I am using MVC 3 with Razor and I am using the below web grid to show some data,
What I need sorting on my first column. I have used similar code on other pages too for my sorting and it works fine, but here it doesnt seem to work.
However if I go to the next page say page 2 and now I click sort, it is sorted ascending and then again same problem.
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column("ColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Full article at : http://yassershaikh.com/mvc-3-web-grid-sorting-not-working/
using the columnName attribute helped, I was using the wrong column name, because of which the sorting was not working
Here is the code I am using now
<div id="grid">
#{
// added ajaxContainerId
var listgrid = new WebGrid(source: Model.ABC, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
#listgrid.GetHtml(
columns: listgrid.Columns(
listgrid.Column(header:"ColName", columnName="DbColName", format: #<text>#item.Name</text>, canSort:true),
listgrid.Column(null, "Delete", (item) => MvcHtmlString.Create(string.Format("<a href='DeleteList/{0}'>Delete</a>", #item.Name))),
))
}
</div>
Hope this helps someone in future too!
I would like to change the background color of the first row in a WebHelper WebGrid for MVC without the use of JQuery.
Any Thoughts?
#model IEnumerable<MyViewModel>
#{
var indexedModel = Model.Select((item, index) => new { Element = item, Index = index });
var grid = new WebGrid(indexedModel);
}
#grid.GetHtml(
columns: grid.Columns(
grid.Column(
columnName: "item.MyProperty",
header: "Myproperty",
format:
#<text>
<div#Html.Raw(item.Index == 0 ? " class=\"firstRow\"" : "")>
#item.Element.MyProperty
</div>
</text>
)
)
)
and in your CSS:
.firstRow {
background-color: Red;
}
One suggestion could be in each columns's format parameter, use an if-else situation based on a distinct variable that will wrap the data in a span with a css. A bit cumbersome but should work.
For this reason some JQuery would potentially be easier.
Does anyone have a working sample of json paging for mvc3 webgrid?
I've been trawling the interwebs for hours now looking for this and the best i can find is this link: Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3 RC
I'm not convinced by the idea of writing the html in the controller though and I couldn't get the syntax right for creating edit/delete links.
Cheers!
So it turns out that most of the examples out there greatly overcomplicate matters.
A great example can be found here
It turns out the key is in the property ajaxUpdateContainerId which is grid in my case.
This wires up the grid to work without a full page refresh automagically.
I've posted some code from what I'm working on to provide the appropriate syntaxt.
#{
WebGrid webGrid = new WebGrid(canSort: false, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "grid");
webGrid.Bind(Model, autoSortAndPage: false, rowCount: Model.TotalItemCount);
}
<div id="grid">
#webGrid.GetHtml(alternatingRowStyle: "altrow",
mode: WebGridPagerModes.All,
firstText: "<< first",
previousText: "< previous",
nextText: "next >",
lastText: "last >>",
columns: webGrid.Columns(
webGrid.Column("Name"),
webGrid.Column("State.Name", "State"),
webGrid.Column(header: "",
style: "action",
format: (item) => new HtmlString(Html.ActionLink("edit", "Edit", new { id = item.CityId }).ToString() + " | " +
Html.ActionLink("delete", "Delete", new { id = item.CityId }).ToString()
))))
</div>