Cascading DropDownList on GridView

Cascading DropDownLists on GridView

Cascading DropDownLists on GridView


In this Blog, we will learn how to get the current Row of GridView inside the SelectedIndexChanged Event of a DropDownList present on the GridView itself and then find the other DropDownList and bind that.

Background

The requirement came up in one of my projects to Bind one DropDownList present on a Column based on the selection of DropDownList present on another Column. So, it was like the Cascading DropDownLists, where both the DropDownLists are present on the same GridView.

So, steps to get the solution would be like…

  1. Attach the SelectedIndexChanged Event for the first DropDownList on GridView
  2. Inside the Event, first get the GridView Row, from which the first DropDownList is selected
  3. Then from the current GridView Row, find the second DropDownList and bind it with a DataTable or something

The step which is bold is very important. Let’s go step by step.

GridView Markup

In the Markup, you can see that I have two DropDownLists Declared inside the GridView. One is for Country and another one for City. Just for demo purpose, I have hard coded the Items for Country. You can dynamically populate that using code.

Note: According to Step – 1, I have attached the OnSelectedIndexChanged Event to the Country DropDownList.
Goal: Our goal is to populate the City DropDownList for the particular row, when Country is selected in that row.

<asp:GridView ID="gvWithCascadingDropDownList" runat="server" AutoGenerateColumns="false">
	<Columns>
		<asp:BoundField DataField="RowNumber" />
		<asp:TemplateField HeaderText="Country">
			<ItemTemplate>
				<asp:DropDownList 
                        ID="ddlCountry" runat="server" 
                        AutoPostBack="true" 
                        OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
					<asp:ListItem Text="-1">Select Country</asp:ListItem>
					<asp:ListItem Text="India">India</asp:ListItem>
					<asp:ListItem Text="Nepal">Nepal</asp:ListItem>
					<asp:ListItem Text="Bangladesh">Bangladesh</asp:ListItem>
					<asp:ListItem Text="Sri lanka">Sri lanka</asp:ListItem>
				</asp:DropDownList>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="City">
			<ItemTemplate>
				<asp:DropDownList ID="ddlCity" runat="server">
				</asp:DropDownList>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>

What’s Next?

Let’s write code inside the Country Change Event and populate the City DropDownList.
So, according to the Step – 2

Inside the Event, first get the GridView Row, from which the first DropDownList is selected

For the above, we have to get the current Country DropDownList first, which we can easily get by.

// Get the Country DropDownList first.
DropDownList ddlCountry = (DropDownList)sender;

Now the important Step – 3.

Then from the current GridView Row, find the second DropDownList and bind it with a DataTable or something

In order to get the Containing Row for the DropDownList, we have to use the Control.NamingContainer Property.

The naming container for a given control is the parent control above it in the hierarchy that implements the INamingContainer interface. A server control that implements this interface creates a unique namespace for the ID property values of its child server controls. You can use the NamingContainer property of a naming container’s child control to get a reference to its parent container.

So, after getting the current GridView Row, now it is just a matter of finding the City DropDownList on that particular row and bind that with appropriate Data.

Below is the full code. I have used one Service to get the Cities Data. To use the Service, add Service Reference to your Project by right clicking on the Project in Visual Studio.

Service Reference Dialog

Service Reference Dialog


Service URL is – http://www.webservicex.net/globalweather.asmx?WSDL

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
	// Get the Country DropDownList first.
	DropDownList ddlCountry = (DropDownList)sender;

	// Get the current GridView Row, from which the DropDownList is selected.
	GridViewRow currentRow = (GridViewRow)ddlCountry.NamingContainer;

	// Now let's find the City DropDownList on the same GridView Row.
	DropDownList ddlCity = (DropDownList)currentRow.FindControl("ddlCity");

	if (ddlCountry != null && ddlCountry.SelectedIndex > 0 && ddlCity != null)
	{
		string selectedCountry = ddlCountry.SelectedValue;

		// Get the Cities from the Service.
		string xmlCities = GetCitiesByCountry(selectedCountry);

		// Let's parse the XML into DataTable.
		XmlTextReader citiesReader = new XmlTextReader(new System.IO.StringReader(xmlCities));
		DataSet dsCities = new DataSet();
		dsCities.ReadXml(citiesReader);

		// Bind the City DropDownList.
		if (dsCities != null && dsCities.Tables.Count > 0 && dsCities.Tables[0].Rows.Count > 0)
		{
			ddlCity.DataSource = dsCities.Tables[0];
			ddlCity.DataTextField = "City";
			ddlCity.DataValueField = "City";
			ddlCity.DataBind();
		}
	}
	else if (ddlCity != null)
	{
		ddlCity.Items.Clear();
	}
}

private string GetCitiesByCountry(string selectedCountry)
{
	GlobalWeatherServiceReference.GlobalWeatherSoapClient client = new GlobalWeatherSoapClient();
	return client.GetCitiesByCountry(selectedCountry);
}

Hope You Enjoyed Reading

If you have any queries, please comment below. I will come back to you. Feel free to Like and Share the Blog in Social Sites.

Thanks for reading. 🙂

ASP.NET GridView Client Side Validation

Email Validation Failed Alert

Email Validation Failed Alert


We will explore the technique in jQuery to validate the ASP.NET GridView.

Setting up the GridView First

On aspx Page

We will show following fields in GridView.

  • Name – TextBox
  • Age – TextBox
  • Email – TextBox
  • Date of Birth – TextBox (with jQuery DatePicker)
  • Gender – RadioButtonList

For each field, we will have one TemplateField with

  1. ItemTemplate (shows when Grid is loaded) – Inside this, a Label to show the value.
  2. EditItemTemplate (shows when Grid is in Edit Mode) – Inside this, actual TextBox or RadioButtonList.
<asp:GridView ID="gvTestValidations" runat="server" AutoGenerateColumns="false" OnRowEditing="gvTestValidations_RowEditing"
	OnRowUpdating="gvTestValidations_RowUpdating" OnRowCancelingEdit="gvTestValidations_RowCancelingEdit">
	<Columns>
		<asp:TemplateField HeaderText="Name">
			<ItemTemplate>
				<asp:Label ID="lblName" runat="server" Text='<%#Bind("Name") %>'></asp:Label>
			</ItemTemplate>
			<EditItemTemplate>
				<asp:TextBox ID="txtName" runat="server" Text='<%#Bind("Name") %>' />
			</EditItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Age">
			<ItemTemplate>
				<asp:Label ID="lblAge" runat="server" Text='<%#Bind("Age") %>'></asp:Label>
			</ItemTemplate>
			<EditItemTemplate>
				<asp:TextBox ID="txtAge" runat="server" Text='<%#Bind("Age") %>' />
			</EditItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Email">
			<ItemTemplate>
				<asp:Label ID="lblEmail" runat="server" Text='<%#Bind("Email") %>'></asp:Label>
			</ItemTemplate>
			<EditItemTemplate>
				<asp:TextBox ID="txtEmail" runat="server" Text='<%#Bind("Email") %>' />
			</EditItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Date Of Birth">
			<ItemTemplate>
				<asp:Label ID="lblDOB" runat="server" Text='<%#Bind("DOB") %>'></asp:Label>
			</ItemTemplate>
			<EditItemTemplate>
				<asp:TextBox ID="txtDOB" runat="server" Text='<%#Bind("DOB") %>' />
			</EditItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Gender">
			<ItemTemplate>
				<asp:Label ID="lblGender" runat="server" Text='<%#Bind("Gender") %>'></asp:Label>
			</ItemTemplate>
			<EditItemTemplate>
				<asp:RadioButtonList ID="rblGender" runat="server" SelectedValue='<%#Bind("Gender") %>'>
					<asp:ListItem Value="Male">Male</asp:ListItem>
					<asp:ListItem Value="Female">Female</asp:ListItem>
				</asp:RadioButtonList>
			</EditItemTemplate>
		</asp:TemplateField>
		<asp:CommandField ShowEditButton="true" HeaderText="Edit" />
	</Columns>
</asp:GridView>

On aspx.cs Page

As I am not using Database, so to bind the GridView, we can have one DataTable property stored in ViewState. We will edit, update to the ViewState Table and bind that to the GridView. Inside the Page Load, we will declare hard-coded rows and add them to DataTable. Then bind that to the Grid.

// This ViewState DataTable Property holds the GridView Data.
DataTable dtGridData
{
    get
    {
        return (DataTable)ViewState["dtGridData"];
    }
    set
    {
        ViewState["dtGridData"] = value;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		// Add Column for the DataTable.
		DataTable dt = new DataTable();
		dt.Columns.Add(new DataColumn("Name"));
		dt.Columns.Add(new DataColumn("Age"));
		dt.Columns.Add(new DataColumn("Email"));
		dt.Columns.Add(new DataColumn("DOB"));
		dt.Columns.Add(new DataColumn("Gender"));

		// Add Rows to DataTable.
		DataRow dr = dt.NewRow();
		dr["Name"] = "Deepak Mahapatra";
		dr["Age"] = 24;
		dr["Email"] = "abc@anything.com";
		dr["DOB"] = "09/28/1990";
		dr["Gender"] = "Male";

		dt.Rows.Add(dr);

		dr = dt.NewRow();
		dr["Name"] = "Dillip Das";
		dr["Age"] = 24;
		dr["Email"] = "def@anything.com";
		dr["DOB"] = "10/02/1990";
		dr["Gender"] = "Male";

		dt.Rows.Add(dr);

		dr = dt.NewRow();
		dr["Name"] = "Tadit Dash";
		dr["Age"] = 24;
		dr["Email"] = "ghi@anything.com";
		dr["DOB"] = "07/05/1990";
		dr["Gender"] = "Male";

		dt.Rows.Add(dr);

		// Assign the DataTable to dtGridData, so that it is stored in ViewState.
		// After that, bind the GridView.
		dtGridData = dt;
		BindGrid();
	}
}

private void BindGrid()
{
	gvTestValidations.DataSource = ViewState["dtGridData"];
	gvTestValidations.DataBind();
}

What’s on Browser?

Initial Load

GridView on Browser

GridView on Browser

On Row Edit Button Click

First Row in Edit Mode

First Row in Edit Mode

Now, the Actual Show Begins !!!

We will do following validation…

  • For Age Field – Only Allow Numbers
  • For Email Field – Email Validation

You can do more validations, you just need to learn how to do it.

So, How to?

Logic is that, inside the document Ready Event, we will try to find all the Age TextBoxes and Email TextBoxes inside the GridView and handle the keydown and change events respectively.

For Age TextBox

The highlighted code lines are important.

$("#gvTestValidations tr input[id*='txtAge']").each(function () {
	$(this).keydown(function (event) {
        // Just to find all non-decimal characters and replace them with blank.
		$(this).val($(this).val().replace(/[^\d].+/, ""));

		var charCode = (event.which) ? event.which : event.keyCode;
		if (charCode > 31 && (charCode < 48 || charCode > 57)) {
			event.preventDefault();

			isValidated = false;
		}
		else { isValidated = true; }
	});
});

The first important line is…

$("#gvTestValidations tr input[id*='txtAge']")

This is actually searching for all the TextBoxes inside the Grid with the help of Attribute Contains Selector [name*=”value”].
Then the following code attaches the keydown Event with all those matched Age TextBoxes.

$(this).keydown(function (event) {
    // Validation code here...
});

For Email TextBox

The same logic is used for Email TextBox. The only difference is that we are handling the change Event here instead of keydown Event.

$("#gvTestValidations tr input[id*='txtEmail']").each(function () {
	$(this).change(function (event) {
		if (!validateEmail($(this).val())) {
			alert("Email not in correct format.");
			$(this).addClass('errorClass');
			event.preventDefault();

			isValidated = false;
		}
		else {
			$(this).removeClass('errorClass');

			isValidated = true;
		}
	});
});

NOTE: The CSS class “errorClass” is used to make Email TextBox Border Red-Coloured, when validation fails.

One more interesting thing…

We are also restricting User to Update one record, if the row is not validated. Suppose, User has typed one wrong Email Id and then directly hits the Update Button, so it won’t allow the User to Update and show one message. For that, we are using the variable isValidated, which you have already seen inside the code.
We are just checking the isValidated value inside the Update Button click and taking action according to that. Again the same logic, which is searching all the links and finds the Button, which is having Text as “Update” and fires its click Event.

$("#gvTestValidations a").each(function () {
	if ($(this).text() == "Update") {
		$(this).click(function (event) {
			if (!isValidated) {
				alert("There are issues with input fields. Please correct and then try.");
				return false;
			}
			else { return true; }
		});
	}
});
Update Button not working if Validation Fails

Update Button not working if Validation Fails

Thanks !!!

For taking time and reading the Blog. Download the Project and play with it. If you find it useful, then share within your circle, by pressing the Social Icons.

Why GridView RowUpdating Event is not giving the updated values?

Debugger Inside GridView RowUpdating Event

Debugger Inside GridView RowUpdating Event


This is a most common question in Forums. We will find the actual cause, for which the RowUpdating Event behaves abnormal.

Walk Through

  1. Add a GridView in aspx page and define all its required properties and Events.
    <asp:GridView ID="gvTestGrid" runat="server" AutoGenerateColumns="false" 
                  OnRowCancelingEdit="gvTestGrid_RowCancelingEdit"
                  OnRowEditing="gvTestGrid_RowEditing" 
                  OnRowUpdating="gvTestGrid_RowUpdating">
        <Columns>
            <asp:BoundField DataField="Column1" HeaderText="Some Column"/>
            <asp:CommandField ShowEditButton="true" />
        </Columns>
    </asp:GridView>
    
  2. Bind the GridView from back end. For our example, we will bind one DataTable.
    private void BindGrid()
    {
        // Add Column for the DataTable.
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Column1"));
    
        // Add Rows to DataTable.
        for (int i = 1; i < 5; i++)
        {
    	    DataRow dr = dt.NewRow();
    	    dr["Column1"] = "Old Value" + i;
    	    dt.Rows.Add(dr);
        }
    
        gvTestGrid.DataSource = dt;
        gvTestGrid.DataBind();
    }
  3. Define the GridView Events for Edit and Update operation.
    protected void gvTestGrid_RowEditing(object sender, GridViewEditEventArgs e)
    {
        //Set the edit index.
        gvTestGrid.EditIndex = e.NewEditIndex;
    
        //Bind data to the GridView control.
        BindGrid();
    }
    
    protected void gvTestGrid_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        //Get the new Values.
        GridViewRow row = gvTestGrid.Rows[e.RowIndex];
        string column1Value = ((TextBox)row.Cells[0].Controls[0]).Text;
    
        // Code to update the DataSource.
        //.....
    
        //Reset the edit index.
        gvTestGrid.EditIndex = -1;
    
        //Bind data to the GridView control.
        BindGrid();
    }
    
    protected void gvTestGrid_RowCancelingEdit(object sender, 
                                               GridViewCancelEditEventArgs e)
    {
        //Reset the edit index.
        gvTestGrid.EditIndex = -1;
    
        //Bind data to the GridView control.
        BindGrid();
    }
    
  4. GridView on Browser would look like…

    GridView on Browser

    GridView on Browser

    Now, Let’s Test

    To test the Edit and Update features, let’s click on Edit Button in any Row. We can see that GridView adds TextBoxes in all the cells of that Row immediately. It also shows you Update and Cancel Buttons where it was previously showing Edit Button.
    Let’s do some editing in the cells and click Update Button.

    GridView Cell Showing Updated Value

    GridView Cell Showing Updated Value


    It hits the breakpoint, we have set inside the RowUpdating Event. If we move our mouse on to the variables, which hold the cell values, we can see the old value instead of new updated value (Refer the debugging Screen Shot at the Top). So, we are stuck now, this is the bug.

    What to do now?

    Don’t panic. We need to find out what exactly in code is helping RowUpdating Event to give old values. So, the most wild guess is that, something is causing the Grid to bind again before RowUpdating Event, as we initially did during load.

    If you remember, in Step-2, we did bind the Grid, which is actually called on the Page Load like…

    protected void Page_Load(object sender, EventArgs e)
    {
        BindGrid();
    }
    

    According to the Event Life Cycle, when any Control Event is fired (here Grid RowUpdating), it first goes to Page Load. As it is coming to Page Load, so it calls the Bind method again and re-binds the Grid. Now, it goes to RowUpdating Event, but the updated values are lost because Grid is already reset in Page Load.

    So, How to Resolve?

    IsPostBack() is the answer. We have to check if the Page is posted back or not. If not, then we will bind the Grid.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
    }
    

    Go and Share this with your friends

    This issue sometimes kills time. So, don’t wait, just share with everybody you know, who can understand this. Also provide your valuable feedback here. Thanks for reading.

Cancel GridView Edit on Escape Key Press

[DEMO] Cancel GridView Edit on Escape KeyPress

[DEMO] Cancel GridView Edit on Escape KeyPress

This is one interesting research resulting a Trick to Cancel the GridView Editing Mode, when you press the Escape Key. Many guys asked this question in forums and those are still unanswered. Let’s learn and explore.

Is there a Logic?

Ofcourse, there is and its really very simple. When GridView Default Edit Button is clicked on a particular Row, it shows one TextBox for each Cell and one Update and Cancel Button. So, we just need to find that Cancel Button and hit its Click Event explicitly, that’s hit.

Seems Simple, but How to?

With the help of jQuery, which always makes a Developer’s life easier.
Okay, let’s click the Edit Button on First Row. You can see one TextBox, Update and Cancel Button appearing on the Row.

First Row in Edit Mode

First Row in Edit Mode


Referring to the generated HTML (following image), we can see that the Cancel Button does not have any Identity (ID) attribute associated with it.

<a href="javascript:__doPostBack('gvTestEscapePress','Cancel$0')">Cancel</a>

First Row Cancel Button Source HTML

First Row Cancel Button Source HTML


So, the only option here is to find the Button which has the Text as “Cancel“.

Using the Code

For GridView Editing

I have added one CommandField for the Edit Button. You can also use AutoGenerateEditButton="true".

<asp:GridView ID="gvTestEscapePress" 
              runat="server" 
              OnRowEditing="gvTestEscapePress_RowEditing"
              OnRowUpdating="gvTestEscapePress_RowUpdating" 
              OnRowCancelingEdit="gvTestEscapePress_RowCancelingEdit">
    <Columns>
        <asp:CommandField ShowEditButton="true" HeaderText="Edit" />
    </Columns>
</asp:GridView>

To handle the Edit, Update and Cancel Events, we have declared the respective Events (OnRowEditing, OnRowUpdating and OnRowCancelingEdit) inside GridView Markup.
Now, let’s define these Events on Code Behind Page.

/// <summary>
/// This Event shows a particular Row in Editing Mode.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowEditing(object sender, GridViewEditEventArgs e)
{
    // Set the New Edit Index.
    gvTestEscapePress.EditIndex = e.NewEditIndex;

    // Bind data to the GridView control.
    BindGrid();
}

/// <summary>
/// This Event Cancels the Row Editing on Cancel Button Click.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvTestEscapePress_RowCancelingEdit(Object sender, 
                                                         GridViewCancelEditEventArgs e)
{
    // Reset the edit index.
    gvTestEscapePress.EditIndex = -1;

    // Bind data to the GridView control.
    BindGrid();
}

I am not writing the Update Event code here as it is not important in our discussion. You can refer see that Event in the Source Code by Downloading it.

For Escape Key Press

We will use the following code in order to check the Event KeyCode. If that is 27, it would refer to Escape Key.

<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Here we will put the Cancel GridView Editing Logic.    
        }
    });
</script>

For Cancelling the GridView Edit Mode

  1. Here we are searching all anchor (a) tags inside the GridView by .find('a').
  2. Then to get only the Cancel Button, we need to filter by Text using .filter(function () { return $(this).text() === "Cancel" }).
  3. Now it is just a matter of clicking the Button by .click(). Before that, I am just showing one message and on .fadeOut() function, I am clicking the Button.
<script type="text/javascript">
    $(document).keyup(function (e) {
        if (e.keyCode == 27) {
            // Find the Generated Cancel Button for the Row in Edit Mode.
            var cancelButton = $('#<%= gvTestEscapePress.ClientID %>')
                               .find('a')
                               .filter(function () { return $(this).text() === "Cancel" });

            // If Cancel Button is found, then show message and click the Cancel Button.
            if (cancelButton != null && cancelButton.length > 0) {
                $("#lblShowMessage")
                .html("You pressed Escape. Cancelling the GridView Edit...")
                .fadeOut(3000, function () {
                    buttonClick(cancelButton[0]);
                });
            }
        }
    });

    // This function fires the Button Click Event.
    function buttonClick(button) {
        button.click();
    }
</script>

Did you like the post?

Feel free to comment. Please Like and Share the Blog, if you find it interesting.