Thursday, 28 March 2013

User Control: Add JavaScript & CSS in UserControl

You can still add them as you normally would. Here's a very simple example.

WebUserControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HomePastAttendance.ascx.cs" Inherits="UserControl_Print" %>

$(document).ready(function () {

$("#datepicker").datepicker();

});

</script>

<%@ Register src="PagerControl.ascx" tagname="PagerControl" tagprefix="uc1" %>

.style1

{

width: 100%;

}

</style>

<h1>Print past attendance:</h1>

<p>Start Date: <input type="text" id="datepicker" /></p>

<br />

jQuery: Datepicker is tied to a standard input field

Note:

Do not use<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
Use <p>Date: <input type="text" id="datepicker1" /></p>
Resource: http://jqueryui.com/datepicker/

Select a date from a popup or inline calendar

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

view source

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css" />

  <script>

  $(function() {

    $( "#datepicker" ).datepicker();

  });

  </script>

</head>

<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>

</html>

Want to learn more about the datepicker widget? Check out the API documentation.

Friday, 22 March 2013

GridView: Editing multiple Rows - Bulk Updates

Adding a Procedure to Perform Bulk Updates

After you have configured the GridView control to display editable data, you need to add code to perform the bulk update. In this section, you will do the following:

Add a Button control and in its Click handler, add code to bulk update the changes from each row of the GridView control.
Add a DataTable object that stores the original data values.
Add code to determine if a row has been modified. The current values displayed in the GridView control will be compared to the original values stored in theDataTable object. If one or more of the displayed values do not match the original value, the row will be updated in the database. Otherwise, the row will not be included in the bulk update.

To create a procedure for performing the bulk update

Switch to Design view.
Select the GridView control, and in the Properties window, click the Events button () to display the events for the GridView control.
In the RowDataBound field, type GridView1_RowDataBound and press ENTER.

Visual Web Developer creates an event handler for the RowDataBound event of the GridView control. The code will look like the following code example.
C#

VB
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { }

Replace the generated procedure with the following code (including the private variables).

private bool tableCopied = false;
private DataTable originalDataTable;

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
        if (!tableCopied)
        {
            originalDataTable = ((DataRowView)e.Row.DataItem).Row.Table.Copy();
            ViewState["originalValuesDataTable"] = originalDataTable;
            tableCopied = true;
        }
}

The code runs whenever the GridView control is performing data binding. While the first row is binding, the code saves a copy of the original database values in aDataTable object, which is in turn stored in ViewState.

Switch to Design view.
From the Standard tab in the Toolbox, drag a Button control onto the page.
In the Properties window, click the Properties button () to display the properties for the Button control.
In the (ID) field, enter UpdateButton.
In the Text field, enter Update.
Click the Events button () to display events for the Button control.
In the Click field, type UpdateButton_Click and press ENTER.

Visual Web Developer creates an event handler for the Button control's Click event. The code will look like the following code example.
C#

VB
protected void UpdateButton_Click(object sender, EventArgs e) { }

Replace the generated procedure with the following code.

protected void UpdateButton_Click(object sender, EventArgs e)
{
    originalDataTable = (DataTable)ViewState["originalValuesDataTable"];

    foreach (GridViewRow r in GridView1.Rows)
        if (IsRowModified(r)) { GridView1.UpdateRow(r.RowIndex, false); }

    // Rebind the Grid to repopulate the original values table.
    tableCopied = false;
    GridView1.DataBind();
}

protected bool IsRowModified(GridViewRow r)
{
    int currentID;
    string currentTitleOfCourtesy;
    string currentLastName;
    string currentFirstName;
    string currentTitle;
    string currentExtension;

    currentID = Convert.ToInt32(GridView1.DataKeys[0].Value);

    currentTitleOfCourtesy = ((TextBox)r.FindControl("TitleOfCourtesyTextBox")).Text;
    currentLastName = ((TextBox)r.FindControl("LastNameTextBox")).Text;
    currentFirstName = ((TextBox)r.FindControl("FirstNameTextBox")).Text;
    currentTitle = ((TextBox)r.FindControl("TitleTextBox")).Text;
    currentExtension = ((TextBox)r.FindControl("ExtensionTextBox")).Text;

    DataRow row =
        originalDataTable.Select(String.Format("EmployeeID = {0}", currentID))[0];

    if (!currentTitleOfCourtesy.Equals(row["TitleOfCourtesy"].ToString())) { return true; }
    if (!currentLastName.Equals(row["LastName"].ToString())) { return true; }
    if (!currentFirstName.Equals(row["FirstName"].ToString())) { return true; }
    if (!currentTitle.Equals(row["Title"].ToString())) { return true; }
    if (!currentExtension.Equals(row["Extension"].ToString())) { return true; }

    return false;
}

Note
The procedure performs a string comparison using the value in each editable TextBox control and the value stored in the cached DataTable object. If you have formatted the text in the TextBox control, the values might be equivalent, but their string representations will not match. For example, if you have formatted aDateTime value using the small date format (`{0:d}`), the value in the date TextBox control might be `3/2/2005`. The string representation of the date value from the DataTable object would be `3/2/2005 12:00 AM`. In these cases, you must add comparison logic that takes formats and localization settings into account.

Note

The procedure performs a string comparison using the value in each editable TextBox control and the value stored in the cached DataTable object. If you have formatted the text in the TextBox control, the values might be equivalent, but their string representations will not match. For example, if you have formatted aDateTime value using the small date format ({0:d}), the value in the date TextBox control might be 3/2/2005. The string representation of the date value from the DataTable object would be 3/2/2005 12:00 AM. In these cases, you must add comparison logic that takes formats and localization settings into account.

The procedure iterates through the rows of the GridView control and calls the custom IsRowModified function for each row. The function compares the current row to the corresponding row in the DataTable object, and returns true if the row has changed. For any rows that have changed, the code in the button's Click handler calls the UpdateRow method of the GridView control.