Updating GridView EditItem textbox with popupextender panel checkboxlist values

[deepakthegeek]

I dont know if this kind of issue has been addressed earlier.

I have a gridview control on a form, in the EditItem Template when a textbox is clicked, I have a popupcontrolext ender displaying an AP Panel which contains

a checkboxlist and two buttons "OK" and "Cancel". What I want to do is, after the selections are made and after the "OK" button is clicked I want to display

the selected items of the checkboxlist seperated by commas, (ex, French, English, German) in the textbox which was the targetcontrol of the popupextender.

I have the following code

<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("LanguagesKnown") %>'></asp:TextBox>
 
<cc1:PopupControlExtender ID="PopupControlExtender2" runat="server"
TargetControlID="TextBox2" PopupControlID="Panel1" Position="Bottom"
CommitProperty="Value" CommitScript="e.Value">
</cc1:PopupControlExtender>
 
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl" >
 
<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="AccessDataSource2" AppendDataBoundItems="True" DataTextField="LanguagesList" 
 
AutoPostBack="False">
</asp:CheckBoxList>
<asp:Button ID="Button2" runat="server" Text="OK" UseSubmitBehavior="True" />
<asp:Button ID="Button3" runat="server" Text="Cancel" UseSubmitBehavior="False" />
</asp:Panel>
 
</EditItemTemplate>
 

I would appreciate if someone get help me out in achieving my objective.

Deepak Jadhav

[Frinavale]

In the "Ok Button" Click Event, display the selected items of the CheckBoxList separated by commas, in the TextBox....

[deepakthegeek]

Frinavale, what you have replied to is exactly my question. If I knew how I could have done that I would have never posted my question. BTW the "OK" button will not have an OnClick event since it is placed inside the ASP panel which in return is placed inside the EditItem template of the GridView.

I know for sure know that it has to be handled by a javascript function on the client side. My question is "How will I do it?" "How will I be able to find the checkboxlist so that I can retreive the selected items and pass on the info to the appropriate textbox of the edititem of GridView?"

[Frinavale]

Ahh now things become more clear: the button is within a GridView and you don't know how to handle the button click event. Sorry I missed the <EditItemTempla te> tag surrounding your code there.

Let me find you some resource that can help.

[Frinavale]

Actually it turns out that it's quite easy.
All you have to do is supply a CommandArugment for the buttons:

 <asp:Button ID="Button2" runat="server" Text="OK" UseSubmitBehavior="True" CommandArgument="OkClick"/>
<asp:Button ID="Button3" runat="server" Text="Cancel" UseSubmitBehavior="False"  CommandArgument="CancelClick" />

Then handle the RowCommand and check if the CommandArugment is "OkClick"
(Sorry if you're using C#, the following code is VB.NET...but you'll get the idea)

Private Sub myGridView_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles myGridView.RowCommand
 
    If String.Compare(e.CommandArgument, "OkClick", True) = 0 Then
 
            Dim index As Integer = myGridView.EditIndex
            Dim row As GridViewRow = myGridView.Rows(index)
            Dim txt2 As TextBox = row.FindControl("TextBox2")
 
            Dim selectedItems As New StringBuilder
 
            Dim chkList As CheckBoxList = row.FindControl("CheckBoxList1")
            For Each ckbox As ListItem In chkList.Items
                If ckbox.Selected Then
                    selectedItems.Append(ckbox.Value)
                    selectedItems.Append(", ")
                End If
            Next
 
            txt2.Text = selectedItems.ToString
        End If
End Sub

:)

The following is a working code example.
In your aspx page:

 <asp:GridView ID="myGridView" runat="server" AutoGenerateColumns="false">
    <Columns>
       <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="PersonID" Text='<%#Eval("PersonID") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="PersonIDUpdateValue" Text='<%#Eval("PersonID") %>' ></asp:TextBox>
              </EditItemTemplate>
        </asp:TemplateField> 
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="PersonName" Text='<%#Eval("PersonName") %>' runat="server"></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="PersonNameUpdateValue" Text='<%#Eval("PersonName") %>' runat="server" ></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Position">
            <ItemTemplate>
                <asp:Label ID="PersonPostition" Text='<%#Eval("Position") %>' runat="server" ></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="PersonPostitionUpdateValue" Text='<%#Eval("PersonName") %>' runat="server" ></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LanguagesKnown">
            <ItemTemplate>
                 <asp:Label ID="PersonPostition" Text='<%#Eval("LanguagesKnown") %>' runat="server" ></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                 <asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("LanguagesKnown") %>'></asp:TextBox>
                 <cc2:PopupControlExtender ID="PopupControlExtender2" runat="server"
                 TargetControlID="TextBox2" PopupControlID="Panel1" Position="Bottom"
                 CommitProperty="Value" CommitScript="e.Value">
                 </cc2:PopupControlExtender>
 
                 <asp:Panel ID="Panel1" runat="server" style="background-color:White; border:solid 1px black;">
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                        DataTextField="LanguagesList" 
                        AutoPostBack="False">
                        <asp:ListItem Text="English" Value="English"></asp:ListItem>
                        <asp:ListItem Text="French" Value="French"></asp:ListItem>
                        <asp:ListItem Text="Spanish" Value="Spanish"></asp:ListItem>
                        <asp:ListItem Text="Mouse" Value="Mouse"></asp:ListItem>
                        <asp:ListItem Text="Duck" Value="Duck"></asp:ListItem>
                        <asp:ListItem Text="Dog" Value="Dog"></asp:ListItem>
                     </asp:CheckBoxList>
                     <asp:Button ID="Button2" runat="server" Text="OK" UseSubmitBehavior="True" CommandArgument="OkClick"/>
                     <asp:Button ID="Button3" runat="server" Text="Cancel" UseSubmitBehavior="False"  CommandArgument="CancelClick" />
                 </asp:Panel>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:CommandField EditText="Edit" ButtonType="Link" ShowEditButton="true" />
    </Columns>
   </asp:GridView>

And in your VB code:

 Private _source As List(Of MySourceClass)
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
 
        If IsPostBack = False Then
            _source = New List(Of MySourceClass)
            _source.Add(New MySourceClass(1, "Micky Mouse", "Engineer", "English, Mouse"))
            _source.Add(New MySourceClass(2, "Mini Mouse", "House Wife", "English, Mouse"))
            _source.Add(New MySourceClass(3, "Donald Duck", "Sailor", "English, Duck"))
            ViewState("_source") = _source
            myGridView.DataSource = _source
            myGridView.DataBind()
 
        End If
    End Sub
    Private Sub myGridView_RowCancelingEdit(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCancelEditEventArgs) Handles myGridView.RowCancelingEdit
        _source = ViewState("_source")
        myGridView.DataSource = _source
        myGridView.EditIndex = -1
        myGridView.DataBind()
    End Sub
 
    Private Sub myGridView_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles myGridView.RowCommand
        If String.Compare(e.CommandArgument, "OkClick", True) = 0 Then
 
            Dim index As Integer = myGridView.EditIndex
            Dim row As GridViewRow = myGridView.Rows(index)
            Dim txt2 As TextBox = row.FindControl("TextBox2")
 
            Dim selectedItems As New StringBuilder
 
            Dim chkList As CheckBoxList = row.FindControl("CheckBoxList1")
            For Each ckbox As ListItem In chkList.Items
                If ckbox.Selected Then
                    selectedItems.Append(ckbox.Value)
                    selectedItems.Append(", ")
                End If
            Next
 
            txt2.Text = selectedItems.ToString
        End If
 
 
    End Sub
 
    Private Sub myGridView_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles myGridView.RowEditing
        'myGridView.DataBind()
        _source = ViewState("_source")
        myGridView.DataSource = _source
        myGridView.EditIndex = e.NewEditIndex
        myGridView.DataBind()
    End Sub
 
    Private Sub myGridView_RowUpdated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdatedEventArgs) Handles myGridView.RowUpdated
        _source = ViewState("_source")
        myGridView.DataSource = _source
        myGridView.EditIndex = -1
        myGridView.DataBind()
    End Sub
 
    Private Sub myGridView_RowUpdating(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewUpdateEventArgs) Handles myGridView.RowUpdating
        Dim index As Integer = myGridView.EditIndex
        Dim row As GridViewRow = myGridView.Rows(index)
 
    End Sub
 
 
 <Serializable()> Protected Class MySourceClass
        Private _id As Integer
        Private _name As String
        Private _position As String
        Private _knownLanguages As String
        Public Property PersonID() As Integer
            Get
                Return _id
            End Get
            Set(ByVal value As Integer)
                _id = value
            End Set
        End Property
        Public Property PersonName() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property
        Public Property Position() As String
            Get
                Return _position
            End Get
            Set(ByVal value As String)
                _position = value
            End Set
        End Property
        Public Property LanguagesKnown() As String
            Get
                Return _knownLanguages
            End Get
            Set(ByVal value As String)
                _knownLanguages = value
            End Set
        End Property
        Public Sub New(ByVal id As Integer, ByVal name As String, ByVal position As String, ByVal languages As String)
            _id = id
            _name = name
            _position = position
            _knownLanguages = languages
        End Sub
    End Class
 
 

-Frinny

[deepakthegeek]

Thank you very much Frinavale. The code that you had provided was very helpful.