CheckBox seeking Row

[WombatEd]

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

[Siingh]

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

[Ed McCarroll]

Thanks Siingh, but that's a server-side solution.

I'm trying to do this without a postback, using JavaScript.

[Yavor]

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.

[Ed McCarroll]

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.

[Yavor]

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.