Format WebGrid in CSS FIle

I have a webgrid in one of my view. I want to add some style properties but it does not work when I add these in the project's css file. However, when I add it withing the style tag in the view, it works. Also, all other elements of the view get formatted according to the css file expect the webgrid.

Can the webgrid be formatted from a CSS file?


var grid = new WebGrid(canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "grid"); grid.Bind(model, rowCount: Model.ToList().Count(), autoSortAndPage: false); grid.Pager(mode:WebGridPagerModes.All, firstText:"First", lastText:"Last", previousText:"Previous", nextText:"Next", numericLinksCount: 15); @grid.GetHtml(htmlAttributes: new { id = "grid" }, tableStyle: "webgrid", headerStyle: "webgrid-header", footerStyle: "webgrid-footer", alternatingRowStyle: "webgrid-alternating-row", selectedRowStyle: "webgrid-selected-row", rowStyle: "webgrid-row-style", columns: grid.Columns( grid.Column(columnName: "column1", header: "column 1r"), grid.Column(columnName: "column2", header: "column 2", canSort:true), grid.Column(format: (item) => Html.ActionLink("Detail", "Detail", new { JobNumber = item.JobNumber, @style="color:#CCC;" })), grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { EmployeeID = item.JobNumber })) ));

And here is the css

.webgrid { width: 100%; border: 0px; border-collapse: collapse; white-space:nowrap; } .des { width:50%; } .webgrid a { color: #000; } .webgrid-header { padding: 6px 5px; text-align: center; background-color: #e8eef4; border-bottom: 2px solid #3966A2; height: 40px; border-top: 2px solid #D6E8FF; border-left: 2px solid #D6E8FF; border-right: 2px solid #D6E8FF; } .webgrid-footer { padding: 6px 5px; text-align: center; background-color: #e8eef4; border-top: 2px solid #3966A2; height: 30px; border-bottom: 2px solid #D6E8FF; border-left: 2px solid #D6E8FF; border-right: 2px solid #D6E8FF; } .webgrid-alternating-row { height: 30px; background-color: #f2f2f2; border-bottom: 1px solid #d2d2d2; border-left: 2px solid #D6E8FF; border-right: 2px solid #D6E8FF; }

-------------Problems Reply------------

I guess you wrongly included the CSS file. Make sure you have used an url helper to reference the file instead of hardcoding the url. So put those rules in a custom CSS file and then include this file like this:

<link href="@Url.Content("~/Content/MyCustomStyle.css")" rel="stylesheet" type="text/css" />

Category:css Views:1 Time:2012-12-13

Related post

  • Format CSS file (compress/uncompress) 2010-02-16

    I want to format my css files used in my web project. Formatting means: Compress/Uncompress CSS file Example: *{margin:0;padding:0;}body{min-height:101%;font:69%/141% Arial,Helvetica,sans-serif;color:#2d3742;} to: * { margin: 0; padding: 0; } body {

  • Is there an app to automatically format CSS files? 2010-07-30

    I have a compressed CSS file (all whitespace removed) that I want to inspect, but it's a huge pain inspecting it as-is. Is there any utility (preferably linux command line) that I can run the file through to format it nicely? --------------Solutions-

  • Will android mobile OS support css file format? 2011-02-09

    I am developing an android server-client application which will draw the user requested interfaces dynamically. The interfaces will transfered to the client from the server according to the requirement. To access the fields of the interface file, and

  • eclipse CSS file formating 2011-05-11

    I'm trying to make eclipse format css files my way... Currently i've got sth like that: .class{ display: none; sth: other; } But i would like to make it sth like that: .class { display: none; sth: other; } Can I do this ? thx. tzim --------------Solu

  • Is the format of Less files and css files the same? 2015-02-25

    I am not sure about how to write the contents of a Less file. Can anyone tell me if the css format (way in which we write in css files) is the same as that for a less file, and if all css content is compatible with Less files. Thanks in advance. plea

  • Always have to use .css files? 2008-09-19

    Are .css files always needed? Or may I have a .css "basic" file and store other style items inside the HTML page? Does padding, borders and so on always have to be defined into a .css file stored separately, or may I use them normally into an HTML pa

  • How should I organize the contents of my CSS file(s)? 2008-09-28

    This question is about organizing the actual CSS directives themselves within a .css file. When developing a new page or set of pages, I usually just add directives by hand to the .css file, trying to refactor when I can. After some time, I have hund

  • How to exclude a specific CSS file from an ASP.NET Theme? 2009-02-16

    I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm twea

  • Mod Rewrite: apply to all js and css files except 2009-02-19

    I need to apply a minify actions to all the javascript and CSS files, except the ones I indicate. I have this condition and rule that applies to all the files (css and js): RewriteCond %{REQUEST_FILENAME} -f RewriteRule ^(.*\.)(js|css)$ minify.php?q=

  • Why did my Visual Studio 2008 stop recognizing .aspx and .css files? 2009-04-06

    I formatted and reinstalled my system today. I reinstalled VS 2008, but all my .aspx pages are no longer syntax highlighted (the text editor displays them in plain black font color) and IntelliSense isn't working on these pages either. The font color

  • Preventing the duplication of CSS files? 2009-04-28

    I got a user control which implements a reference to a css file, now I want to use this user control many times on page, and this will lead to duplication of inclusion of the css file. With javascript files it is simple by using the ScriptManager. So

  • Including Browser specific CSS file when JavaScript disabled? 2009-06-09

    I have 2 CSS files for my site, one for all normal browsers and other for the retarded Internet Explorer. I am including either of the CSS file depending on a JavaScript which checks the browser capabilities. What would be the best option in case the

  • Css file not getting properly read in jquery script 2009-07-31

    I created a dropdown box which will help wrap long texts in the box. Now, when i use that control in a separate solution, it reads the .css file properly and all the style, font, alignment is proper. But if i integrate it with my application, none of

  • How do I include a CSS file with HTML email that I send from a Perl CGI script? 2009-07-31

    I am using following code to create and send email through CGI perl. The images get attached properly, but the css files do not. my $msg = new MIME::Lite( From => $from, To => $to_list, Subject => "My subject", Type => 'text/html', # 'mul

  • Build events and versioning .js and .css files 2009-10-02

    I have a MSBuild script set up to minify and combine my javascript and css files. What I need now is a way to version them. How are you guys currently handling this. What is the best way to incrementally version the file and update the <script/

  • save StyleSheet object to css file in Flex3 2009-10-06

    i can able to create StyleSheet object , i need to save that StyleSheet object to css file(in the css format). how can i do in flex3 Air application , is there any build in library ? Or links available to save as *.css file Thanks in advance --------

  • css file path is right, css code is valid, but it doesn't work 2009-11-27

    I have a weird, annoying problem. I have a css/ folder and index.html at the root. I load css files in the header as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

  • How to use ASP.NET Authorization Yet Permit Access to .css Files? 2010-01-27

    <authentication mode="Forms"> <forms loginUrl="Login.aspx"/> </authentication> <authorization> <deny users="?"/> </authorization> I am using forms authentication, and when i place the arguments cited above, the css

  • How to make sure a cached JavaScript and CSS files get reloaded? 2010-01-31

    Could anyone explain how to make sure that if I update my webapp, the user gets the latest version of files? Should I add a dynamic string ?version=random at the end of script and css files and change it as I roll out updates? Or what is a general st

Copyright (C), All Rights Reserved.

processed in 0.074 (s). 11 q(s)