How can I specify the font for an html webgrid in asp.net-mvc3?
#{
var grid = new WebGrid(...);
}
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid",
headerStyle: "head",
...)
Where are these styles being created?
<div id="grid">
#grid.GetHtml(
tableStyle: "webgrid", <- I can't find these styles anywhere in my mvc3 project?
headerStyle: "head",
try this: in your css
(or div#grid p i dont know what tag will be appear for grid rows when grid is rendered, you can use for example firebug and see what tag will be there )
div#grid span
{
font-size: 10px;
}
and if you cant find webgrid class try to write it by yourself.
Related
I have a tab bar that looks like this
Right now I am using the Ajax ActionLink to load partial views to be displayed below the tab bar. Only the words Servers and Profiles are clickable. I want the whole tab to clickable, not just the words in the tab, and not just the image in the tab but I want teh entire tab should be clickable. How can I achieve this?
<div id="TabBar">
<div class="TabActive">
<img class="TabIcon" src="~/Images/servers_orange.png" alt="Servers" />
<span class="TabLabel">
#Ajax.ActionLink("Servers", "ServersTab",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CurrentView"
}
)
</span>
</div>
<div class="TabInactive">
<img class="TabIcon" src="~/Images/profiles_white.png" alt="Profiles" />
<span class="TabLabel">
#Ajax.ActionLink("Profiles", "ProfilesTab",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "CurrentView"
}
)
</span>
</div>
<div id="CurrentView">#Html.Partial("ServersTab")</div>
Some simple (ok, maybe not really simple :) ) css trick can make the link expands to the whole div.
.TabActive {
width: 200px; /*Define the width of button*/
position: relative; /*Important*/
}
.TabLabel a {
position: absolute; /*Define absolute postion among the parent div*/
top: 0;
left: 0;
width: 100%;
height: 100%; /*Make sure the link expands among the whole parent div*/
line-height: 200px;
text-align: right; /*small trick to place the text to proper place, change this accordingly*/
}
Here's a jsfiddle.
I think if you replace the ajax helper with an <a> and post it in css/html tags, there will be a lot more ideas to make it work.
You would have to include the entire snippet inside the actionlink method (first param), or use jQuery as an alternative, or when you click the outer element, trigger the click on the link (possible with jQuery).
I have a webgrid that is in a partialview. The parial view contains an ajax form which pass data to the webgrid. My view looks like
using (Ajax.Begin("Gain", "Gaining", new AjaxOptions{UpdateTargetId="Res"}))
{
}
<div id="Res">
<div id="grid">
#{var grid = new WebGrid(source: Model.myList, canPage: true, rowsPerPage: 25, ajaxUpdateContainerId: "grid",
canSort: true);
grid.Pager(mode: WebGridPagerModes.All));
#grid.GetHtml(htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column(columnName: "num", header: "Number"),
grid.Column(columnName: "name", header: "Full Name", canSort: true)
));
}
</div>
</div>
The page displays wells but sorting and moving to the next page does not work. When I try, the grid just dissapears. I notice that when I hover over the column header, that when I hover over the header sorting links, the url is still localhost:XXXXX/#. When I remove the ajaxUpdateContainerId="Res", the url seems right: localhost:xxx?length=4?sort=name&sortdir=ASC, which is a wrong URL given that my data is obtained from the controller, Gaining and method, Gain
How can I get this to work please.Or how can i debug this? How does sorting works?
EDIT
I am now confused as to the use of ajaxUpdateContainerId. According to this link, this did not aid his/her sorting. If I remove it from mine, the whole partial view is removed when I click the header link to sort, or any paging link. What is the use of ajaxUpdateContainerId use then?
I am having the same issue as this question.
I have created a filter that is supposed to work alongside a WebGrid. The filter works for the first page, but if you try to go to a different page or sort the results, the filter is lost. I followed the suggestion in the previous question to change the method to GET, but instead of the target getting updated, it disappears from the page.
Grid call inside a div "Grid":
var grid = new WebGrid(Model, ajaxUpdateContainerId: "Grid", rowsPerPage: 20);
Filter form:
#using (Ajax.BeginForm("Action", new { filter = "filter" }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Grid", HttpMethod = "Get" }))
If "filter" is set in the Action, I return the PartialView of the grid instead of the full View.
Firebug is showing me that the correct HTML is getting sent in the response, but for whatever reason it's not getting inserted into the Grid div.
Any suggestions would be appreciated!
Edit: My current workaround is to use an HTML form instead of AJAX, but I would like to stick to AJAX if possible.
I got a solution for this problem where I had a div surrounding my Webgrid like this:
Index.cshtml:
<div class="grid-container">
<div id="my-grid">
#Html.Partial("_Grid", Model)
</div>
</div>
_Grid.cshtml:
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
When sorting in my list, on filtered results, the Webgrid dissapeared and wasn't inserted into my-grid-div. HOWEVER, when I put the surrounding "my-grid" inside the partial view, it worked. I don't get the reason why, but it works now.
Index.cshtml:
<div class="grid-container">
#Html.Partial("_Grid", Model)
</div>
_Grid.cshtml:
<div id="my-grid">
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
</div>
I am using WebGrid helper to make grid sortable in my MVC application.
#{
var grid = new WebGrid(Model, canSort:true );
#grid.GetHtml( columns:grid.Columns(
grid.Column( "Username", "Full Name", canSort:true ),
grid.Column("Profile","Profile", canSort:false)
));
}
Sortable column will override(display blue link) default style of header how can I maintain that?
In last column I have image action which will open popup using javascript dialog
<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
How can I add this additional column using WebGrid?
Thanks.
Finally I got answer as per below
grid.Column(header: "Details",
format: #<text><img src="#Url.Content("~/Content/Images/view-fullscreen.png")"
style="cursor: pointer" onclick="openPopup('#item.EncryUserId')"
alt="View Detail" title="View Detail"/></text>)
and inside header there is anchor tag so i have added headerStyle: "tdheader"
and add new style .tdheader a{ color: white};
grid.Column(format:
#<img title="View Detail" style="cursor: pointer" onclick="openPopup('#item.EncryUserId')" src="#Url.Content("~/Content/Images/view-fullscreen.png")" />
)
Is it possible to create grid in asp.net MVc3.0. The gridview that is used in asp.net similar to that if yes then please let me know how to create a simple grid in asp.net mvc3.0 I m using sql server Database to fetch data, that has to be filled in grid.
Thanks.
There are different possibilities:
Server side grids:
The built-in WebGrid helper
MvcContrib Grid
Telerik Grid
Client-Side grids:
jqGrid
YUI DataTable
and many others...
You can use WebGrid in MVC3. This is new in MVC3.
Use this code in your View.
#model IList<YourViewModel>
#{
ViewBag.Title = "Amend Absence";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{
var grid = new WebGrid(source: Model, rowsPerPage: 200,
canPage: false, canSort: true, defaultSort: "Absentee");
}
<p>
<h2>Absentee List</h2>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit",
new { id = item.Id })),
grid.Column("Absentee", "Absentee",canSort:true),
grid.Column("AbsStart", "AbsStartDate")
))
</div>
</p>
See the excellent Get the Most Out of WebGrid in ASP.NET MVC
You need to create it using TABLE / TR / TD tags.
Here is few links which may help you
mvc gridview with code
http://www.schnieds.com/2010/01/gridview-in-aspnet-mvc.html