I'm working on a web-enabled version of our existing winforms project. Gridviews seem to be an ample replacement for the datagrids that we've been using. We have extensive table styles written for the old datagrids. Is it possible to reuse this code to apply a style to a gridview?
If a re-write is necessary, what is the best way to style the gridviews?
I don't think there is an easy way to port styled from datagrids to gridviews.
You might consider using the CSS Friendly Control Adaptors as a mechanism for applying the styles:
Using themes and skin files is what you need.
Check this link :
http://msdn.microsoft.com/en-us/library/ykzx33wh(VS.80).aspx
You can copy style from datagrids to gridviews via the CopyFrom() method.
To copy a header style from a datagrid to a grid view:
GridView1.HeaderStyle.CopyFrom(DataGrid1.HeaderStyle);
Footer Style:
GridView1.FooterStyle.CopyFrom(DataGrid1.FooterStyle);
Hope this helps.
The GridView control has several properties of type TableItemStyle (FooterStyle, HeaderStyle, RowStyle, etc).
These TableItemStyle properties contain a method called CopyFrom that expects a System.Web.UI.WebControls.Style. You won't be able to copy styles for your WinForms DataGrid using this method.
Your quickest path is probably to rewrite and use the FooterStyle, HeaderStyle, RowStyle, etc properties of the GridView.
Related
What's the fastest way to render dijit widgets?
I know that the programmatic way is faster than the declarative. (Some reference)
I have a custom widget that loads too slowly (it's a datagrid with combobox, buttons and other small dijit widgets used for adding filters, etc).
Looking at the source, I see that all the dijit widgets are created programmatically, but the DOM nodes where they are inserted into are created programmatically as well.
Is it the "right" way?
I'm trying to speed up the rendering of this widget, and currently my choice would be to combine a velocity template (my company uses struts2 + velocity) to create the DOM nodes, with programmatically created widgets (using placeAt and similar methods to insert the widgets into the already built DOM nodes).
It would work fine, but sadly all the css classes are overwritten by dijit, so I have to overwrite them again, which causes a sensible overhead.
In the template I write something like this:
<input id="idOfAnExistingDomNode" class="myCssClass" />
And to insert a FilteringSelect in that DOM node I have to write this:
var fieldSelect = new dijit.form.FilteringSelect({
store : jsonStore,
searchAttr : "caption",
labelAttr : "caption",
selectOnClick : true,
value : "Content"
}, "idOfAnExistingDomNode");
fieldSelect.domNode.className += " myCssClass";
The last line is necessary because myCssClass is overwritten during the creation of the FilteringSelect.
Is there any way to avoid this issue?
Or, perhaps, I'm trying to do this thing the wrong way? I'm not completely sure about that "velocity template" thing.
Note: Dojo version is 1.5 and no, sadly we can't upgrade it to newer versions.
Please forgive me for my TERRIBLE English.
Often one of the faster ways to instantiate widgets is to create them in a temporary div and then move that div onto the DOM. Have you tried profiling what exactly is slow in this instantiation? Part of me wonders if too much time is being spent waiting for data, as a few widgets + a grid with reasonable pagesize params shouldn't take long to load.
As for your class issue, it is strange that dojo is not mixing in the existing class. That said, you could do a lookup on the node first, get the class attribute, and then specify it as
the class attribute in your mixin object when creating the FilteringSelect. If you do so, be sure you wrap class in quotes or older IE's will reject it.
Is there a way to set this kind of properties in css?
So I can use the same calendar and be more organized with my code
<asp:Calendar ID="Calendar1" runat="server" Height="189px" CssClass="Calendar"
ondayrender="CalendarRender" TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White" ShowGridLines="true" TitleStyle-BorderStyle="Solid" TitleStyle-BorderWidth="1px" TitleStyle-BorderColor="Black" SelectedDayStyle-ForeColor="#281dc9" SelectedDayStyle-Font-Bold="true" DayHeaderStyle-BorderColor="Black" DayHeaderStyle-BorderWidth="1px" DayHeaderStyle-BorderStyle="Solid"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
Assuming you're talking about properties such as:
TitleStyle-BackColor="#00718F" TitleStyle-ForeColor="White"
... etc..
Your best bet would be to render the calendar to a page, check its source and see what style it adds. You can then extract this out for use in CSS.
UPDATE
This page has some of the selector names for you, along with what they control ASP.Net Calendar Control Custom Theme Format using CSS
If you want to be more organized, and don't want your project to become like 'spaghetti' in future, use CSS file for css properties. Do not embed this properties in headers, unless this is the only way to solve current issue. This is bad for you, and for all who will work with your project.
I've met lot of legacy projects, wasting too much time to find why some dom element's behaviours differs from what I need.
Just specify CssStyle property in your aspx markup, and it will be mapped to real css class.
And add description for this class in css file.
How I can give separate style to custom image of Bulletdlist in .net?
It could be done just by using CSS, for this you may check this out.
To dynamically change any CSS attribute (C#.NET) do the following;
bulletedList.Style["cssProperty"] = "newValue";
What is a good approach to avoiding Selenium tests being broken when dealing with the changing "Name" and "Id" attributes of a control that is rendered on a ASP.NET page using a master page? I want to avoid changing my tests when ASP.NET renders the web page's controls with different DOM identifiers.
http://www.stevetrefethen.com/blog/AutomatedTestingOfASPNETWebApplicationsUsingSelenium.aspx
Selenium
solves this problem using XPATH and
providing the ability to locate
controls based on XPATH expressions,
alleviating the need to hard code HTML
tag structure into a test script. For
example, the ASP.NET runtime may
render ID attributes that look like:
id="ctl00_cphContents_gridMaint_DataGrid"
Finding this control using an XPATH
expression can be simplified to
something like this:
table[contains(#id, "gridMaint")]
In the event the nesting of the
DataGrid changes the script will
continue to function properly as long
as table's ID contains the text
"gridMaint".
Another option is to use CSS locators. They're normally less fragile than XPath. For example, to target a div with a class of .myDiv you can use the locator "css=.myDiv". If the specified element has other classes the CSS locator will still work, although the XPath equivalent would change from "//div[#class='myDiv']" to "//div[contains(#class, 'myDiv']". Also, CSS locators tend to be faster than XPath across browsers.
Telerik RadControls have builtin support for skinning and uses CSS to style all their controls. However, when plugging these controls into an existing website, what is the best way to merge the styles of the existing site with RadControls own styles?
Update: Given the following options (thanks to Zhaph):
Add the RadControl's CSS to my site
Make the RadControls look more like my site
Add my sites CSS selections to the RadControl style lists
What would be the best option?
Option 2 would require that I maintain two sets of styles going forward.
So preferably option 1. That would enable reuse of the RadControls style system across the site, e.g. have buttons and simple controls look the same.
Update 2 (moved from my answer):
I ended up doing a combination. Using the FormDecorator enables reuse of the RadControls styles on my own buttons and inputs. Also, copying the skins provided by Telerik into my ASP.Net theme enabled customizing the skins.
I have to admit, I've not used the RadControls for some time - we used the CMS RadEditor on a few CMS sites, and that could automatically pick up your style sheets, and add the classes to its list, or you could add some manually.
Looking that the documentation, some bits might help:
RadEditor CSS Classes and Their Use - Although usually these are added automatically by the controls I thought?
The link for 1. also tells you how to do this
A couple of options
External CSS Files, which states "By default RadEditor for ASP.NET AJAX uses the CSS classes available in the current page", but also shows how to load other style sheets.
Using the ToolsFile.xml - Scroll down to the <class> element.
I just wanted to add; the FormDecorator only applies css to certain types of controls. If you have a control that isn't styled you can access the Telerik resources like this:
.cs File - have a public property like follows:
public string HeaderDivBackgroundURL
{
get
{
{
string backgroundURL = string.Empty;
string skin = ((MainMaster)Page.Master).AppSkin;
backgroundURL = Page.ClientScript.GetWebResourceUrl(typeof(RadSplitter), "Telerik.Web.UI.Skins." + skin + ".Splitter.slideTitleContainerBgr.gif");
return backgroundURL;
}
}
}
In the aspx page (in a RadCodeBlock), just have an internal style sheet to read from that property:
<tel:RadCodeBlock runat="server">
<style type="text/css">
.telerikBackgroundMock
{
background: url('<%= HeaderDivBackgroundURL %>') repeat-x;
}
</style>
</tel:RadCodeBlock>
I found this very useful for applying Telerik skins to non-Telerik control in a way that would still be dynamic and change with any skin changes.
As an update to this thread, there is now an online "Style Builder" for the Telerik AJAX and MVC tools that enables visual configuration/customization of the built-in skins:
http://stylebuilder.telerik.com/
This tool eliminates the need to understand CSS class definitions for each control and lets you easily customize one of the built-in themes to better match your site.