JavaScript: Dynamically attaching events with parameterized functions

We can attach dynamically events with parameters in JavaScript

There are two basic accepted way to fire a function using a dynamic event handler:

Method 1

obj.onclick = handler_function;

• No parameters are allowed in this method
• Previous assignment of the event will be overwritten.

 

Method 2

obj.onclick= function()

{
handler_function(param1,param2);
…
other statements here
…

}

• Used for multiple function firing or for firing a function with one or more parameters
• Previous assignment for the event will be overwritten

 

Method 3

obj.attachEvent(“onclick”, function1)

• Simple way to register multiple event handlers for the same event on one element.
• Does not overwrite the previous assignments

The newly attached functions will be called in the sequence their of attachment

We can attach dynamically events with parameters in JavaScript

There are two basic accepted way to fire a function using a dynamic event handler:

Method 1

obj.onclick = handler_function;

• No parameters are allowed in this method
• Previous assignment of the event will be overwritten.

 

Method 2

obj.onclick= function()

{
handler_function(param1,param2);
…
other statements here
…

}

• Used for multiple function firing or for firing a function with one or more parameters
• Previous assignment for the event will be overwritten

 

Method 3

obj.attachEvent(“onclick”, function1)

• Simple way to register multiple event handlers for the same event on one element.
• Does not overwrite the previous assignments

The newly attached functions will be called in the sequence their of attachment

How to order Web Part properties

I was wondering if there is a way to order the web part properties with the web part has no custom ToolPart associated with it. There is a simple solution for this: just override the GetToolParts() method of the web part and add the tool parts in the desired order. There are some default ToolPart objects we have to add here.

• WebPartToolPart is responsible for rendering the default properties in the categories, Appearance, Layout and Advanced
• CustomPropertyToolPart is responsible for adding the browsable properties defined within the web part

Here is the code which does this:

public override ToolPart[] GetToolParts()
{
ToolPart[] toolparts = new ToolPart[2];
WebPartToolPart defaultToolPart = new WebPartToolPart();
CustomPropertyToolPart browsableProperties = new CustomPropertyToolPart();

toolparts[0] = browsableProperties;
toolparts[1] = defaultToolPart;

return toolparts;
}

How to override SharePoint styles for custom web parts?

Eric Shupps and Heather Solomon have explained in their posts (this and this) in detail about overriding the styles in master pages and site definitions.But what if a different style needs to be applied to a web part or a page without affecting other places? It will be more useful if user is provided with options of using default style or selecting one of the custom defined styles.

Here is a web part that allows user to provide a CSS file for overriding the stylesused in the web part.

For simplicity, I selected the style, ms-menutoolbar which can be seen on the toolbar of viewlsts.aspx page (on other pages as well). The web part has a table with two rows – one of them is applied with ms-menutoolbar and another is applied with ms-menutoolbar and custom style class, overridden-menutoolbar (we will see how this can be used to override the styles). A web part property, CustomCssUrl is provided to select custom CSS file. If user wants to override the default style, he can specify the custom CSS file location or leave blank to use the default style.

Highlighted code below method makes the trick.

writer.Write(“<td class=’ms-menutoolbar overridden-menutoolbar‘>”);

The definition for overridden-menutoolbar class is present in the CSS file:

.overridden-menutoolbar
{
BACKGROUND-IMAGE: url(/_layouts/images/menubuttonhover.gif);
}

This overrides only BACKGROUND-IMAGE style and other styles specified in ms-menutoolbar will remain
unaltered. If web part cannot find overridden-menutoolbar then, ms-menutoolbar will be applied without any change.

Below is the web part and its source code.

CSS File:

.overridden-menutoolbar
{
BACKGROUND-IMAGE: url(/_layouts/images/menubuttonhover.gif);
}

Web Part:

public class OverrideStyle : System.Web.UI.WebControls.WebParts.WebPart
{
private string _customCssUrl;
private CssLink _customCss;

[WebBrowsable(true)]
[Bindable(true)]
[FriendlyName(“Custom CSS Url”)]
[Category(“Style”)]
[Personalizable(PersonalizationScope.Shared)]
public string CustomCssUrl
{
get{ return _customCssUrl; }
set{ _customCssUrl = value; }
}

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
if (_customCss != null)
{
_customCss.RenderControl(writer);
}

writer.Write(“<table width=’100%’>”);
writer.Write( “<tr>”);
writer.Write( “<td class=’ms-menutoolbar’>”);
writer.Write( “Original Style”);
writer.Write( “</td>”);
writer.Write( “</tr>”);
writer.Write( “<tr>”);
writer.Write( “<td height=’15px’>”);
writer.Write( “</td>”);
writer.Write( “</tr>”);
writer.Write( “<tr>”);
writer.Write( “<td class=’ms-menutoolbar overridden-menutoolbar’>”);
writer.Write( “Overridden Style”);
writer.Write( “</td>”);
writer.Write( “</tr>”);
writer.Write(“</table>”);
}

protected override void OnPreRender(EventArgs e)
{
if (!string.IsNullOrEmpty(_customCssUrl))
{
_customCss = new CssLink();
_customCss.ID = “customCss”;
_customCss.DefaultUrl = _customCssUrl;

this.Controls.Add(_customCss);
}
}
}