DataGrid ItemDataBound

Wyatt70 · November 17th, 2004, 03:53 PM

I'm attempting to implement a javascript popup calendar in a DataGrid. The calendar will be used to insert a date into a textbox. I know that I need to work with the ItemDataBound event in order to get the ClientID of the textbox in which I want the date to be inserted. What I don't know is where to place the code to look up the ClientID.

Here is the relevant code from the main page:

Code:

<form id="Form1" method="post" runat="server">
<asp:DataGrid id="dgProjectSummary" runat="server" ShowHeader="True"
  ShowFooter="False" BorderColor="black" AutoGenerateColumns="False"
  OnEditCommand="EditRecord" OnUpdateCommand="UpdateRecord"
  OnCancelCommand="CancelEdit">

  <HeaderStyle BackColor="lightgray" Font-Name="arial" Font-Size="8"
    Font-Bold="true" ForeColor="black" HorizontalAlign="center" />

  <ItemStyle Font-Name="arial" Font-Size="8" HorizontalAlign="left"
    VerticalAlign="top" />
 
  <Columns>
  <asp:TemplateColumn>
    <HeaderTemplate>
      <B>Estimated Deploy</B>
    </HeaderTemplate>
    <ItemTemplate>
      <asp:Label text='<%#
      Container.DataItem"EstimatedDeploy").ToShortDateString %>'
      font-name="arial" font-size="8" width="65" runat="server"/>
    </ItemTemplate>
    <EditItemTemplate>
      <asp:TextBox id="txtEstimatedDeploy" text='<%#
      Container.DataItem("EstimatedDeploy").ToShortDateString %>'
      font-name="arial" font-size="8" rows="1" width="65"
      runat="server">
      </asp:TextBox>
      <a href="javascript:;" onclick="window.open('Calendar.aspx?
      textbox=txtEstimatedDeploy','cal','width=220,height=210,
      left=330,top=365')">Calendar</a>
    </EditItemTemplate>
  </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>
</form>

And here is the code on the popup calendar page:

Code:

<%@ Page Language="vb" %>
<%@ import Namespace="System.Web.UI.HtmlControls.HtmlGenericControl" %>
<%@ import Namespace="System.Web.UI.HtmlControls.HtmlInputHidden" %>
<%@ import Namespace="System.Web.UI.WebControls.Calendar" %>
<%@ import Namespace="System.Web.UI.Page" %>
<script runat="server">

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      control.Value = Request.QueryString("textbox").ToString()
    End Sub

    Protected Sub Change_Date(Sender As System.Object, E As System.EventArgs)
      Dim strScript As String = "<script>window.opener.document.forms(0)." + control.Value + ".value = '"
                   strScript += calEstimatedDeploy.SelectedDate.ToString("MM/dd/yyyy")
                   strScript += "';self.close()"
                   strScript += "</" + "script>"
      RegisterClientScriptBlock("anything", strScript)
    End Sub

</script>
<html>
  <head>
    <title>
      Calendar
    </title>
  </head>
<form method="post" runat="server">
<asp:Calendar id="calEstimatedDeploy" OnSelectionChanged="Change_Date" Runat="server" />
<input type="hidden" id="control" runat="server" />
</form>

I have two basic questions:

1) I want to use an ASP:Hyperlink control for the link to the popup calendar. How can I do this?

2) How can I change my javascript command to reference
e.Item.Cells(0).FindControl("txtEstimatedDeploy"). ClientID()?

planoie · November 22nd, 2004, 10:55 AM

Create the hyperlink and textbox control in the EditItemTemplate. In the ItemDataBound grid event handler in the codebehind, find the textbox and hyperlink controls, then set the hyperlink click attribute to the proper text using the textbox's clientid:

Dim txtEstimatedDeploy As TextBox
Dim lnkCalendar As HyperLink

txtEstimatedDeploy = e.Item.FindControl("txtEstimatedDeploy")
lnkCalendar = e.Item.FindControl("lnkCalendar")

lnkCalendar.Attributes("OnClick") = String.Format("window.open('Calendar.aspx?textbox= {0}','cal','...')", txtEstimatedDeploy)

Wyatt70 · November 22nd, 2004, 03:31 PM

I created a codebehind page and tried to implement the code you provided. Now I keep getting a "System.NullReferenceException: Object reference not set to an instance of an object" error, which points to the following line:

Code:

lnkCalendar.Attributes("OnClick") = String.Format("window.open('Calendar.aspx?textbox={0}','cal','...')", txtEstimatedDeploy)

Here is the complete code for the aspx page and its codebehind page"

aspx page:

Code:

<%@ Page Language="vb" Src="BURSInsertSuccessful.aspx.vb" Inherits="PSDataGrid" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.SqlClient" %>
<%@ import Namespace="System.Web.UI.WebControls" %>
<html>
  <head>
    <title>BURS - Insert Successful</title>
         <style>
        H3 {
            font: 8pt arial;
              font-weight: 600;
              text-align: center;
             }
           H1 {
               font: 8pt arial;
               font-weight: 400;
               text-align: center;
              }
       A {
               font: 8pt arial;
              font-weight: 400;
          }
      </style>
  </head>
  <body>
    <h3>Corporate Information Services<br>Insert Successful</h3>
      <h1>A new project record has been created.<br>Click "<b>[u]Edit</u></b>" in the last column to make changes to the report.</h1>
        <table>
         <form id="Form1" method="post" runat="server">
          <asp:datagrid id="dgProjectSummary"
                  runat="server"
                  ShowHeader="True"
                  ShowFooter="False"
                  BorderColor="black"
                  AutoGenerateColumns="False"
                  OnEditCommand="EditRecord"
                  OnUpdateCommand="UpdateRecord"
                  OnCancelCommand="CancelEdit">

            <headerstyle BackColor="lightgray"
                  Font-Name="arial"
                  Font-Size="8"
                  Font-Bold="true"
                  ForeColor="black"
                  HorizontalAlign="center"
          />

          <itemstyle
                  Font-Name="arial"
                  Font-Size="8"
                  HorizontalAlign="left"
                  VerticalAlign="top"
          />

       <columns>

        <asp:templatecolumn>
          <itemtemplate>
            <b>Project ID:</b>
            <asp:label text='<%# Container.DataItem("ProjectID")%>' font-name="arial"
            font-size="8" runat="server" ID="Label1" NAME="Label1"/>
          </itemtemplate>
          <edititemtemplate>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Project</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("ProjectName")%>' font-name="arial"
            font-size="8" width="70" runat="server" ID="Label2" NAME="Label2"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtProjectName" text='<%# Container.DataItem("ProjectName")%>' font-name="arial"
            font-size="8" rows="10" width="70" textmode="multiline" wrap="true"
            style="overflow:hidden" runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Project Description</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("ProjectDescription")%>' font-name="arial"
            font-size="8" width="100" runat="server" ID="Label3" NAME="Label3"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtProjectDescription" text='<%# Container.DataItem("ProjectDescription")%>'
            font-name="arial" font-size="8" rows="10" width="100" textmode="multiline" wrap="true"
            runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Phase</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("Phase")%>' font-name="arial"
            font-size="8" width="39" runat="server" ID="Label4" NAME="Label4"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtPhase" text='<%# Container.DataItem("Phase")%>' font-name="arial"
            font-size="8" rows="10" width="39" textmode="multiline" wrap="true"
            style="overflow:hidden" runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Estimated Deploy</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("EstimatedDeploy").ToShortDateString %>' font-name="arial"
            font-size="8" width="65" runat="server" ID="Label5" NAME="Label5"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtEstimatedDeploy" text='<%# Container.DataItem("EstimatedDeploy").ToShortDateString %>'
            font-name="arial" font-size="8" rows="1" width="65" runat="server">
            </asp:textbox>
            <asp:hyperlink id="lnkCalendar" runat="server" navigateurl="Calendar.aspx" target="_blank">Calendar</asp:hyperlink>
            </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Recent Accomplishments</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("RecentAccomplishments")%>' font-name="arial"
            font-size="8" width="100" runat="server" ID="Label6" NAME="Label6"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtRecentAccomplishments" text='<%# Container.DataItem("RecentAccomplishments")%>'
            font-name="arial" font-size="8" rows="10" width="100" textmode="multiline" wrap="true"
            runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Focus Items</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("FocusItems")%>' font-name="arial"
            font-size="8" width="100" runat="server" ID="Label7" NAME="Label7"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtFocusItems" text='<%# Container.DataItem("FocusItems")%>' font-name="arial"
            font-size="8" rows="10" width="100" textmode="multiline" wrap="true" runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Est. Benefits</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("EstBenefits")%>' font-name="arial"
            font-size="8" width="51" runat="server" ID="Label8" NAME="Label8"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtEstBenefits" text='<%# Container.DataItem("EstBenefits")%>' font-name="arial"
            font-size="8" rows="10" width="51" textmode="multiline" wrap="true" style="overflow:hidden"
            runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>IS Cost</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("ISCost")%>' font-name="arial"
            font-size="8" width="51" runat="server" ID="Label9" NAME="Label9"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtISCost" text='<%# Container.DataItem("ISCost")%>' font-name="arial"
            font-size="8" rows="10" width="51" textmode="multiline" wrap="true" style="overflow:hidden"
            runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Corporate<br>IS Lead</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("CorporateISLead")%>' font-name="arial"
            font-size="8" width="70" runat="server" ID="Label10" NAME="Label10"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtCorporateISLead" text='<%# Container.DataItem("CorporateISLead")%>'
            font-name="arial" font-size="8" rows="10" width="70" textmode="multiline" wrap="true"
            style="overflow:hidden" runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Business Lead</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("BusinessLead")%>' font-name="arial"
            font-size="8" width="70" runat="server" ID="Label11" NAME="Label11"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:textbox id="txtBusinessLead" text='<%# Container.DataItem("BusinessLead")%>'
            font-name="arial" font-size="8" rows="10" width="70" textmode="multiline" wrap="true"
            style="overflow:hidden" runat="server">
            </asp:textbox>
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Department</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("Department")%>' font-name="arial"
            font-size="8" width="100" runat="server" ID="Label12" NAME="Label12"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:listbox id="lbxDepartment" font-name="arial" font-size="8" width="100" rows="1"
            DataTextField="DepartmentName" DataValueField="DepartmentName" DataSource="<%# GetDepartmentNames() %>"
            runat="server" />
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:templatecolumn>
          <headertemplate>
            <b>Status</b>
          </headertemplate>
          <itemtemplate>
            <asp:label text='<%# Container.DataItem("Status")%>' font-name="arial"
            font-size="8" width="58" runat="server" ID="Label13" NAME="Label13"/>
          </itemtemplate>
          <edititemtemplate>
            <asp:listbox id="lbxStatus" font-name="arial" font-size="8" width="58" rows="1"
            DataTextField="Status" DataValueField="Status" DataSource="<%# GetStatus() %>"
            runat="server" />
          </edititemtemplate>
        </asp:templatecolumn>

        <asp:editcommandcolumn ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel"
            EditText="Edit" />
        </columns>
      </asp:datagrid>
        <br>
        <tr>
          <td>
            <asp:button id="btnReturn" font-size="8" runat="server" text="Return to Main Page" OnClick="btnReturn_Click"/>
          </td>
        </tr>
        <tr>
          <td>
            <asp:Button id="btnInsert" font-size="8" runat="server" text="Insert Another Project" OnClick="btnInsert_Click"/>
          </td>
        </tr>
      </form>
    </table>
  </body>
</html>

Codebehind page:

Code:

Imports System
Imports System.Collections
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web
Imports System.Web.UI.WebControls

Public Class PSDataGrid

  Inherits System.Web.UI.Page
  Protected WithEvents dgProjectSummary As System.Web.UI.WebControls.DataGrid

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    If Not IsPostBack Then
      LoadGrid()
    End If
  End Sub

  Private Sub LoadGrid()
    Dim intProjectID As Integer
    intProjectID = Session("ProjectID")

    Dim dsProjectSummary As New DataSet()
    Dim strConnection As String = "" 'Connection string omitted from post
    Dim objConnection As New SqlConnection(strConnection)
    Dim objCommand As New SqlCommand("dbo.ap_DisplayNewProject", objConnection)

    objCommand.CommandType = CommandType.StoredProcedure

    Dim objParameter As New SqlParameter("@ProjectID", SqlDbType.Int)
    objCommand.Parameters.Add(objParameter)
    objParameter.Direction = ParameterDirection.Input
    objParameter.Value = intProjectID

    objConnection.Open()
    dgProjectSummary.DataSource = objCommand.ExecuteReader()
    dgProjectSummary.DataBind()
    objConnection.Close()
  End Sub

  Public Sub btnReturn_Click(ByVal Source As Object, ByVal E As EventArgs)
    Response.Redirect("default.htm")
  End Sub

  Public Sub btnInsert_Click(ByVal Source As Object, ByVal E As EventArgs)
    Response.Redirect("BURSProjectInsert.aspx")
  End Sub

  Public Sub EditRecord(ByVal Sender As Object, ByVal E As DataGridCommandEventArgs)
    dgProjectSummary.EditItemIndex = E.Item.ItemIndex
    LoadGrid()
  End Sub

  Public Sub CancelEdit(ByVal Sender As Object, ByVal E As DataGridCommandEventArgs)
    dgProjectSummary.EditItemIndex = -1
    LoadGrid()
  End Sub

  Public Sub UpdateRecord(ByVal Sender As Object, ByVal E As DataGridCommandEventArgs)
    Dim strConnection As String = "" 'Connection string omitted from post
    Dim objConnection As New SqlConnection(strConnection)
    Dim objCommand As New SqlCommand("ap_UpdateProjectSummary", objConnection)

    Dim idProjectName As String = CType(e.Item.FindControl("txtProjectName"), TextBox).Text
    Dim idProjectDescription As String = CType(e.Item.FindControl("txtProjectDescription"), TextBox).Text
    Dim idPhase As String = CType(e.Item.FindControl("txtPhase"), TextBox).Text
    Dim idEstimatedDeploy As String = CType(e.Item.FindControl("txtEstimatedDeploy"), TextBox).Text
    Dim idRecentAccomplishments As String = CType(e.Item.FindControl("txtRecentAccomplishments"), TextBox).Text
    Dim idFocusItems As String = CType(e.Item.FindControl("txtFocusItems"), TextBox).Text
    Dim idEstBenefits As String = CType(e.Item.FindControl("txtEstBenefits"), TextBox).Text
    Dim idISCost As String = CType(e.Item.FindControl("txtISCost"), TextBox).Text
    Dim idCorporateISLead As String = CType(e.Item.FindControl("txtCorporateISLead"), TextBox).Text
    Dim idBusinessLead As String = CType(e.Item.FindControl("txtBusinessLead"), TextBox).Text

    objCommand.CommandType = CommandType.StoredProcedure

    Dim objParameter1 As New SqlParameter("@ProjectName", SqlDbType.VarChar, 100)
    objCommand.Parameters.Add(objParameter1)
    objParameter1.Direction = ParameterDirection.Input
    objParameter1.Value = idProjectName

    Dim objParameter2 As New SqlParameter("@ProjectDescription", SqlDbType.VarChar, 2000)
    objCommand.Parameters.Add(objParameter2)
    objParameter2.Direction = ParameterDirection.Input
    objParameter2.Value = idProjectDescription

    Dim objParameter3 As New SqlParameter("@Phase", SqlDbType.VarChar, 30)
    objCommand.Parameters.Add(objParameter3)
    objParameter3.Direction = ParameterDirection.Input
    objParameter3.Value = idPhase

    Dim objParameter4 As New SqlParameter("@EstimatedDeploy", SqlDbType.DateTime)
    objCommand.Parameters.Add(objParameter4)
    objParameter4.Direction = ParameterDirection.Input
    objParameter4.Value = idEstimatedDeploy

    Dim objParameter5 As New SqlParameter("@RecentAccomplishments", SqlDbType.VarChar, 2000)
    objCommand.Parameters.Add(objParameter5)
    objParameter5.Direction = ParameterDirection.Input
    objParameter5.Value = idRecentAccomplishments

    Dim objParameter6 As New SqlParameter("@FocusItems", SqlDbType.VarChar, 2000)
    objCommand.Parameters.Add(objParameter6)
    objParameter6.Direction = ParameterDirection.Input
    objParameter6.Value = idFocusItems

    Dim objParameter7 As New SqlParameter("@EstBenefits", SqlDbType.VarChar, 200)
    objCommand.Parameters.Add(objParameter7)
    objParameter7.Direction = ParameterDirection.Input
    objParameter7.Value = idEstBenefits

    Dim objParameter8 As New SqlParameter("@ISCost", SqlDbType.VarChar, 15)
    objCommand.Parameters.Add(objParameter8)
    objParameter8.Direction = ParameterDirection.Input
    objParameter8.Value = idISCost

    Dim objParameter9 As New SqlParameter("@CorporateISLead", SqlDbType.VarChar, 50)
    objCommand.Parameters.Add(objParameter9)
    objParameter9.Direction = ParameterDirection.Input
    objParameter9.Value = idCorporateISLead

    Dim objParameter10 As New SqlParameter("@BusinessLead", SqlDbType.VarChar, 50)
    objCommand.Parameters.Add(objParameter10)
    objParameter10.Direction = ParameterDirection.Input
    objParameter10.Value = idBusinessLead

    objConnection.Open()
    dgProjectSummary.DataSource = objCommand.ExecuteReader()
    dgProjectSummary.DataBind()
    objConnection.Close()

    dgProjectSummary.EditItemIndex = -1
    LoadGrid()
  End Sub

  Public Sub Item_Bound(Sender As Object, E As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgProjectSummary.ItemDataBound
    Dim txtEstimatedDeploy As TextBox
    txtEstimatedDeploy = e.Item.FindControl("txtEstimatedDeploy")

    Dim lnkCalendar As Hyperlink
    lnkCalendar = e.Item.FindControl("lnkCalendar")

    lnkCalendar.Attributes("OnClick") = String.Format("window.open('Calendar.aspx?textbox={0}','cal','...')", txtEstimatedDeploy)
  End Sub

  Public Function GetDepartmentNames() As ICollection
    Dim strConnection As String = "" 'Connection string omitted from post
    Dim objConnection As New SqlConnection(strConnection)
    Dim daDeptNames As SqlDataAdapter = New SqlDataAdapter("SELECT DepartmentName FROM Department", objConnection)
    Dim dsDeptNames As DataSet = New DataSet()

    daDeptNames.Fill(dsDeptNames)
    Return dsDeptNames.Tables(0).DefaultView
  End Function

  Public Function GetStatus() As ICollection
    Dim strConnection As String = "" 'Connection string omitted from post
    Dim objConnection As New SqlConnection(strConnection)
    Dim daStatus As SqlDataAdapter = New SqlDataAdapter("SELECT Status FROM Status", objConnection)
    Dim dsStatus As DataSet = New DataSet()

    daStatus.Fill(dsStatus)
    Return dsStatus.Tables(0).DefaultView
  End Function

End Class