Jan 16 2007

JSDropdownlist - the solution and download

Posted by admin under Controls

This is part 3 in this article serie. Please start from the beginning

So my idea was to create some sort of Dropdownlist with all available
actions (programatically filled with just the actions the current user has access to) and then on click of a button next to it, first perform a Warning/confirmation (for the type of actions where that should be done, for example Delete).

Now if we click on Chai:s Run button we should get a confirm dialog - but for Chang (Edit) it should be ok.

So before we get into coding - lets talk about two ways of doing such a thing. While this most certainly can be seen as an extention of a DropDownList the obvious solution would be to create a custom control, called JavaDropDownList (deriving from DropDownList of course) and override some functions to inject the needed javascript. However it would take some hours of coding to make such a control, cause the very basic is that we want to extend the ListItem - each listitem should be able to carry a Warning/confirmation string (or none).

There is also another way of doing it, and that's the way I chose because it allowed
a easier and faster implementation into my particular project. Since filling the dropdownlist with actions would be done programmatically anyway (depending on current users access) I saw no reason as to why to create a fullblown designer-aware webcontrol:

I created a class JavaDropDownList. 



    public class JSDropDownListHelper
    {
        protected System.Collections.Generic.List<Command> m_Commands;
        protected string m_sFunctionId;
        Page m_oPage;
        public JSDropDownListHelper(Page oPage, string sJSFunctionId)
        {
            m_oPage = oPage;
            m_Commands = new List<Command>();
            m_sFunctionId = sJSFunctionId;
            m_oPage.PreRender += new EventHandler(m_oPage_PreRender);
        }

Basically it keeps a list of commands - and these are created at Page_Load for the containing page (withdropdown.aspx.cs in the download)



        protected void Page_Load(object sender, EventArgs e)
        {
            oHelper = new JSDropDownListHelper(this, "DDL_ActionCheck_ActionSelector");
            oHelper.CreateCommand("Edit", "edit", "");
            oHelper.CreateCommand("Delete", "delete", "Are you sure you want to delete this?");
            oHelper.CreateCommand("Reorder", "reorder", "");
            oHelper.CreateCommand("Manage pics", "pics", "");
            oHelper.CreateCommand("Statistics", "stats", "");
            oHelper.CreateCommand("Campaigns", "campaigns", "");
            if (!IsPostBack)
            {
...

As you can see we can for each and every command specify a blank text "" - or a warning text.  

Now lets see how it is then used (in the gridviews RowDataBound handler)



                DropDownList ddlAction = e.Row.FindControl("ddlAction") as DropDownList;
                
                oHelper.GetCommand("delete").Enabled = IsCurrentUserSuperAdmin() == true;

                Button oButton = e.Row.FindControl("btnRun") as Button;
                oButton.CommandName = "DropAction";
                oButton.CommandArgument = oRow["productid"].ToString();
                oHelper.SetupButtonDropdown(oButton, ddlAction);

By using the GetCommand of the JSDropDownListHelper we can retrieve command by its value - and we use that to set Enabled to false if we are not logged in as superadmin. This will cause the JSDropDownListHelper object not to render that item at all in the dropdownlist. Then we call SetupButtonDropdown:



        public void SetupButtonDropdown(Button oButton, DropDownList oList)
        {
            foreach (Command oCommand in m_Commands)
                if ( oCommand.Enabled )
                    oList.Items.Add(new ListItem(oCommand.Text, oCommand.Value));
            //oButton.Click
            oButton.Attributes.Add("onclick", "return " + m_sFunctionId + "(document.getElementById('" + oList.ClientID + @"').value)");
        }
 

Here we add all Commands to the specific dropdownlist - and also hooks the button so it calls a client javascript function (m_sFunctionId . I will get to that) sending in the selected value from the dropdown.

The m_sFunctionId function:

The constructor of JSDropDownListHelper hooks up with the containng Pages PreRender - and generates a Javascript function - the name of the function will be m_sFunctionId. So it creates a function which is called when a button is clicked.

The function is generated from Command items - whether they shpuld confirm or not - lets look at the code:



<script type="text/javascript">
function DDL_ActionCheck_ActionSelector(sSelectedVal)
{

    if ( sSelectedVal == 'delete' )
{
    return confirm('Are you sure you want to delete this?');
}
return true;
}
</script>
...
...
	<select name="grdProducts$ctl02$ddlAction" id="grdProducts_ctl02_ddlAction">
				<option value="edit">Edit</option>
				<option value="delete">Delete</option>
				<option value="reorder">Reorder</option>
				<option value="pics">Manage pics</option>
				<option value="stats">Statistics</option>
				<option value="campaigns">Campaigns</option>

			</select>
	<input type="submit" name="grdProducts$ctl02$btnRun" value="Run" onclick="return DDL_ActionCheck_ActionSelector(document.getElementById('grdProducts_ctl02_ddlAction').value);" id="grdProducts_ctl02_btnRun" class="Button" />

So in short - what goes into the javascript function depends on the Commands - and while this solution might seem a little hardwired when you just look at the javascript/html we know that from codebehind it's pretty easy to programatically manipulate it - and that is what mattered to me in the particular project.

So now - please download the solution (VS02005, C#) and have a go at it!

ASPCode.net recommends