Jan 16 2007

JSDropdownlist - part 1, outlining the problem

Posted by admin under Controls


This is part 1 in a article series on creating a "JSDropdownlist" - a dropdownlist for solving problem with bloated GUI:s.

For a customer I created an application which started out with a really nice and clean GUI.
A datagrid was filled with records and one of the columns was a "Action" column where I put some buttons, for example "Edit" and "Delete". The Edit button redirecting to a new page and Delete button should first throw up a warning message "Are you sure you really want to delete...", delete the record and then redisplay the grid.

The sample application is a cleaned up version of this - working against Northwind.Products - and doesn't do anything but display a message when clicked:


Also while Edit was visible to all people, the Delete should only be available to superadmins.

The code for this is pretty easy:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="grdProducts" runat="server" OnDataBinding="grdProducts_DataBinding" AutoGenerateColumns="false" OnRowDataBound="grdProducts_RowDataBound" OnRowCommand="grdProducts_RowCommand" OnRowEditing="grdProducts_RowEditing" OnRowDeleting="grdProducts_RowDeleting">
    <Columns>
    <asp:TemplateField HeaderText="Id">
    <ItemTemplate>
    <asp:Label ID="lblId" runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    
    <asp:TemplateField HeaderText="Name">
    <ItemTemplate>
    <asp:Label ID="lblName" runat="server"></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Action">
    <ItemTemplate>
    <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" />
    &nbsp;&nbsp;&nbsp;
    <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" />
    </ItemTemplate>
    </asp:TemplateField>
    
    </Columns>
    </asp:GridView>
    <br />
    <asp:Label ID="lblLogAction" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>








    public partial class _Default : System.Web.UI.Page
    {
        private DataTable GetData()
        {
            return Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(ConfigurationSettings.AppSettings["connstring"],
                CommandType.Text,
                "select * from [products]").Tables[0];
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                grdProducts.DataSource = GetData();
                grdProducts.DataBind();
            }
        }

        protected void grdProducts_DataBinding(object sender, EventArgs e)
        {
        }

        protected void grdProducts_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView oRow = e.Row.DataItem as DataRowView;
                Label lblId = e.Row.FindControl("lblId") as Label;
                lblId.Text = oRow["productid"].ToString();
                Label lblName = e.Row.FindControl("lblName") as Label;
                lblName.Text = oRow["productname"].ToString();

                Button oBut = e.Row.FindControl("btnEdit") as Button;
                oBut.CommandArgument = oRow["productid"].ToString();

                oBut = e.Row.FindControl("btnDelete") as Button;
                oBut.CommandArgument = oRow["productid"].ToString();
            }
        }

        protected void grdProducts_RowEditing(object sender, GridViewEditEventArgs e)
        {
            //Needed to implement (as empty doesn't matter)
        }

        protected void grdProducts_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.ToLower() == "edit")
            {
                long lId = Convert.ToInt32(e.CommandArgument);
                lblLogAction.Text = "Edit row " + lId.ToString() + "- here we should response.redirect to page but just logging now";
            }
            if (e.CommandName.ToLower() == "delete")
            {
                long lId = Convert.ToInt32(e.CommandArgument);
                lblLogAction.Text = "Delete row " + lId.ToString() + "- here we should response.redirect to page but just logging now";
            }
        }

        protected void grdProducts_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            //Needed to implement (as empty doesn't matter)
        }
    }

CONTINUE TO PART 2