This is a migrated thread and some comments may be shown as answers.

CheckBox seeking Row

5 Answers 80 Views
Grid
This is a migrated thread and some comments may be shown as answers.
WombatEd
Top achievements
Rank 1
WombatEd asked on 31 May 2010, 11:12 PM
I have a two-level grid with a checkbox in the inner row.  I want to do a JavaScript OnClick handler, but I don't see how to identify which row got checked.

I've tried the <ClientEvents OnRowClick="grdSchedule_ClientClick" /> construct, but that doesn't fire if I click the checkbox.

(This is my first serious foray into the client-side universe.  Thanks for all the help you've given me over the last week or so.)

    Ed

5 Answers, 1 is accepted

Sort by
0
Siingh
Top achievements
Rank 2
answered on 01 Jun 2010, 04:38 AM
Use this

Client:

<telerik:RadGrid Width="97%" ID="RadGrid1" runat="server"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView AutoGenerateColumns="false" Width="100%">
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Highlight <br/> ship name">
                        <ItemTemplate>
                            <asp:Panel ID="Panel1" runat="server">
                                <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckedChanged" />
                            </asp:Panel>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridDropDownColumn UniqueName="ddlOrderID" ListTextField="OrderID" ListValueField="OrderID"
                        ListDataMember="Orders" DataField="OrderID" HeaderText="Order ID" DropDownControlType="RadComboBox" />
                    <telerik:GridBoundColumn UniqueName="ShipName" DataField="ShipName" HeaderText="Ship name" />
                    <telerik:GridBoundColumn UniqueName="ShipAddress" DataField="ShipAddress" HeaderText="Ship address" />
                    <telerik:GridDropDownColumn UniqueName="ddlQuantity" ListTextField="Quantity" ListValueField="OrderID"
                        ListDataMember="OrderDetails" DataField="OrderID" HeaderText="Quantities in stock" DropDownControlType="RadComboBox" />
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" ButtonType="ImageButton" />
                </Columns>
                <EditFormSettings>
                    <EditColumn ButtonType="ImageButton"/>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>




Server:

Protected Sub CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Dim chkBox As CheckBox = CType(sender, CheckBox)
            'find the City field in the row and change its color
            'first reference the panel which wraps the checkbox control through the Parent property
            Dim myPanel As Panel = CType(chkBox.Parent, Panel)
            'then fetch the grid data item through the NamingContainer attribute of the container control (panel in this case)
            Dim dataItem As GridDataItem = CType(myPanel.NamingContainer, GridDataItem)
            'finally modify the color for the City field according to the checkbox status
            If chkBox.Checked Then
                dataItem("ShipName").Style("color") = "orange"
            Else
                dataItem("ShipName").Style("color") = "black"
            End If
        End Sub

0
Ed McCarroll
Top achievements
Rank 1
answered on 01 Jun 2010, 11:57 PM
Thanks Siingh, but that's a server-side solution.

I'm trying to do this without a postback, using JavaScript.
0
Yavor
Telerik team
answered on 04 Jun 2010, 11:30 AM
Hello Ed,

You can assign an onclick client side event handler to the particular cell, and the nested control (checkbox):

http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html

You can pass a single argument to the client side handler, specifying the row index, or any other meaningful data.
I hope this information helps.

Best wishes,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Ed McCarroll
Top achievements
Rank 1
answered on 09 Jun 2010, 03:01 AM
I'm sorry, Yavor, but either I fail to understand your answer, or you fail to understand my question.

I have a two-level RadGrid.  At the inner level, in a GridTemplateColumn, I have:

    <input id="chkSelect" type="checkbox" onclick="chkClass_clicked(self);" />

In the onclick handler, I need to access the data values in the same inner-level row.  To the best of my knowledge, if I click the checkbox, the row does not become selected, so get_selectedItems() doesnt' help.

At one point, I saw a post suggesting that I could access the row using something like this:

function chkClass_clicked(checkBox) {

    

 

var row = checkBox.parentNode.parentNode;
    var table =  whatever;   // some function, this is what's missing
    var cell = table.getCellByColumnUniqueName(row, "SectionNumber");
    alert('Section Number = ' + cell.innerHTML);
}

but this doesn't work.  IIRC, the poster was using the selected row, which I don't appear to have access to.

0
Yavor
Telerik team
answered on 14 Jun 2010, 08:11 AM
Hi Ed,

In the onclick handler, you are trying to get specific data - for example, the value of the ID cell. You can assign the onclick handler from the code behind, and pass this ID value as an argument to the client side handler. You will then be able to get the value directly. Let me know how this approach meets your requirements.

Regards,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
WombatEd
Top achievements
Rank 1
Answers by
Siingh
Top achievements
Rank 2
Ed McCarroll
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or