[Solved] Get Value of a GridCheckBoxColumn (Clientside)

[Laz]

Hi to all,

i need support to access a RadGrid GridCheckBoxColumn clientside.

I want to check if a GridCheckBoxColumn is checked to show Message in a RadWindow if the selected item (depending of the GridCheckBoxColumn value) is really to deleted?

In the JavaScript - Function "OnClientButtonClicking" it is not possible for me to access the value of the GridCheckBoxColumn.

<script type="text/javascript">

    var RadGrid1;

    function GetGridObject(sender, eventArgs) {
        RadGrid1 = sender;
    }


    function OnClientButtonClicking(sender, args) {
        var comandName = args.get_item().get_commandName();
        if (comandName == "Save") {
            alert('arrived');
            var DataItems = $find("<%=Grid1.ClientID %>").get_masterTableView().get_dataItems();
            for (i = 0; i < DataItems.length; i++) {

        // HOW can i get the Checkbox value by UniqueName (ckbDelete)
        var combo = $telerik.findControl(DataItems[i].get_element(), "ckbDelete"); // = FAILED
                alert(combo.get_id());
                }
            }
            return false;
        }


</script>


<table class="style1" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 100%">
            <telerik:RadToolBar ID="rtbOne"
                                style="display: block; float: none"
                                runat="server"
                                OnClientButtonClicking="OnClientButtonClicking"
                                OnButtonClick="rtbOne_ButtonClick"
                                Width="100%">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                <Items>

                    <telerik:RadToolBarButton runat="server"
                        ImageUrl="~/Image_01.png"
                        CommandName="Save" Text="Save"
                        ToolTip="Save...">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
        </td>
     </tr>
</table>
    <telerik:RadGrid ID="Grid1" runat="server" BorderStyle="Solid"
        AllowMultiRowEdit="True" Width="100%"
        AutoGenerateColumns="False" onitemdatabound="Grid1_ItemDataBound"
        OnItemCreated="Grid1_ItemCreated"
        OnNeedDataSource="Grid1_OnNeedDataSource"
        oncancelcommand="Grid1_CancelCommand" GridLines="None">
        <HeaderContextMenu>
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </HeaderContextMenu>
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <ClientSettings allowrowsdragdrop="false" AllowColumnsReorder="false"
                ReorderColumnsOnClient="false">
                <Selecting AllowRowSelect="True" />
                <Scrolling AllowScroll="false" UseStaticHeaders="false" />
                <ClientEvents OnGridCreated="GetGridObject"></ClientEvents>
        </ClientSettings>
        <MasterTableView EditMode="InPlace" GridLines="Both" BorderStyle="Solid" GroupsDefaultExpanded="true" runat="server">

            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField
                                FieldName="Text_one"
                                HeaderText=" "
                                HeaderValueSeparator=" ">
                        </telerik:GridGroupByField>
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField
                                FieldName="Text_one"
                                SortOrder="Ascending">
                        </telerik:GridGroupByField>
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>

            <Columns>
                <telerik:GridEditCommandColumn  UniqueName="editCommand"
                    HeaderImageUrl="~/Images/Edit.gif"
                    ButtonType="ImageButton"
                    CancelImageUrl="~/Images/Cancel.gif"
                    UpdateImageUrl="~/Images/Save.gif"
                    EditImageUrl="~/Images/Edit.gif">
                <ItemStyle Width="20px"></ItemStyle>
                </telerik:GridEditCommandColumn>

                <telerik:GridCheckBoxColumn UniqueName="ckbDelete"
                    HeaderImageUrl="~/Images/Close.gif">

                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                    <ItemStyle Width="20px" />
                </telerik:GridCheckBoxColumn>

                <telerik:GridBoundColumn DataField="Id" UniqueName="Id"
                    Visible="false">
                </telerik:GridBoundColumn>


                <telerik:GridTemplateColumn HeaderText="Text Group" GroupByExpression="" Groupable="true"
                    DataField="CT" UniqueName="CT" Visible="false">
                    <ItemStyle Width="200px"/>
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%# Eval("text") %>'
                            CssClass=""></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

                <telerik:GridTemplateColumn HeaderText="Description" DataField="Temptext"
                    UniqueName="Temptext">
                    <ItemTemplate>
                        <asp:Label runat="server" Text='<%# Eval("Temptext") %>' CssClass=""></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

            </Columns>
        </MasterTableView>
        <FilterMenu>
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>

    </telerik:RadGrid>

This doesn´t work:

// HOW can i get the Checkbox value by UniqueName (ckbDelete)
var combo = $telerik.findControl(DataItems[i].get_element(), "ckbDelete"); // = FAILED
alert(combo.get_id());

Thanks for your support.
Regards Laz

[Daniel]

Hello Laz,

Try the following approach:

var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
var cell = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[0], "ckbDelete");
var checkbox = cell.getElementsByTagName("input")[0];

I hope this helps.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Laz]

Hi Daniel,

var checkbox = cell.getElementsByTagName("INPUT")[0];

if i wrote uppercase "INPUT" than i can get it!