Set checkbox to true/false from javascript

[kjellerik]

Hi!

I am trying to set a checkbox value to true/false based on a cookie on the client side. This works perfectly well outside the toolbar, but not when the checkboxes are inside. Nothing happens. Have anyone experienced this before? Here is the code:

function loadToolBar() {
        var toolBar = $find("<%=reportToolBar.ClientID %>");
        var tdTool = toolBar._findItemByText("timeVsDepth");
        var chkBoxTimeDepth = $telerik.findElement(tdTool.get_element(), ("chkBoxOptionsTvsD"));
        var wsTool = toolBar._findItemByText("wellSchematic");
        var chkBoxWellSchematic = $telerik.findElement(wsTool.get_element(), ("chkBoxOptionsWS"));
        var gantTool = toolBar._findItemByText("gant");
        var chkBoxGant = $telerik.findElement(gantTool.get_element(), ("chkBoxOptionsGant"));

        var gantChecked = (getCookie("currentGant"));
        var timeDChcked = getCookie("currentTimeDepth");
        var wellSChck = getCookie("currentWellSch");

        if (gantChecked != null && gantChecked == "true") {
            chkBoxGant.checked = true;
            document.getElementById("chkboxTest").checked = true;
            gantTool.check();
        }
        if (timeDChcked != null && timeDChcked == "true") {
            chkBoxTimeDepth.checked = true;
            tdTool.check();
        }
        if (wellSChck != null && wellSChck == "true") {
            chkBoxWellSchematic.checked = true;
            wsTool.check();
        }
    }

<telerik:RadToolBar ID="reportToolBar" Runat="server" Width="100%" OnClientButtonClicked="selectViewOptions" Skin="DBR" EnableEmbeddedSkins="false" OnClientLoad="loadToolBar" >
        <Items>
<telerik:RadToolBarDropDown runat="server" Text="Report Options" Width="50">
            <Buttons>
                <telerik:RadToolBarButton runat="server" Text="timeVsDepth" Value="timeDepth">
                    <ItemTemplate>
                    <div onclick="StopPropagation(event)">
                        <asp:CheckBox ID="chkBoxOptionsTvsD" runat="server" Text="Include time vs depth" Font-Size="12px" />
                    </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton runat="server" Text="wellSchematic" Value="wellSchematic">
                    <ItemTemplate>
                    <div onclick="StopPropagation(event)">
                        <asp:CheckBox ID="chkBoxOptionsWS" runat="server" Text="Include well schematic" Font-Size="12px" />
                    </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton runat="server" Text="gant" Value="gant">
                    <ItemTemplate>
                    <div onclick="StopPropagation(event)">
                        <asp:CheckBox ID="chkBoxOptionsGant" runat="server" Text="Include 1 week plan" Font-Size="12px" />
                    </div>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Buttons>
            </telerik:RadToolBarDropDown>
</Items>
    </telerik:RadToolBar>

[kjellerik]

 

[Yana]

Hello,

I've tested the method like this:

<script type="text/javascript">
        function loadToolBar() {
            var toolBar = $find("<%=reportToolBar.ClientID %>");
            var tdTool = toolBar._findItemByText("timeVsDepth");

            var chkBoxTimeDepth = $telerik.findElement(tdTool.get_element(), ("chkBoxOptionsTvsD"));
            var wsTool = toolBar._findItemByText("wellSchematic");
            var chkBoxWellSchematic = $telerik.findElement(wsTool.get_element(), ("chkBoxOptionsWS"));
            var gantTool = toolBar._findItemByText("gant");
            var chkBoxGant = $telerik.findElement(gantTool.get_element(), ("chkBoxOptionsGant"));

            var gantChecked = true;
            var timeDChcked = false;
            var wellSChck = true;

            if (gantChecked != null && gantChecked == true) {
                chkBoxGant.checked = true;
                //document.getElementById("chkboxTest").checked = true;
                //gantTool.check();
            }
            if (timeDChcked != null && timeDChcked == true) {
                chkBoxTimeDepth.checked = true;
                //tdTool.check();
            }
            if (wellSChck != null && wellSChck == true) {
                chkBoxWellSchematic.checked = true;
               // wsTool.check();
            }
        }
    </script>

and the checkboxes are checked without a problem. Please try it and let us know how it goes.

Best regards,
Yana
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.

[kjellerik]

Thanks for the fast answer!

You are partially right, it does work when i run the javascript through a button or something after the whole page have been loaded. However when i run it through the method OnClientLoad, in the RadToolBar, there is nothing happening

[Yana]

Hi kjellerik,

Actually I've tested it in OnClientLoad event handler and it worked. I've attached my test page for a reference.

All the best,
Yana
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.

[kjellerik]

I get the same result using your code example, the checkbox remains unchecked. I am however sitting with an older version of telerik, 2008.2.1001.35 I think, could this be the reason? 

Best Regards

Kjell Erik

[Yana]

Hello Kjellerik,

I've tested the page with this version and the checkboxes are still checked as expected. Could you please tell us which browser you're using?

Greetings,
Yana
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.

[kjellerik]

I use internet explorer 6.0...company standard, so not that much i can do there. Have also tried it out in Opera, but the toolbar doesn't seem to initiate correctly there, so I do not get access to the dropdown items and the checkboxes

[Yana]

Hi kjellerik,

Please use the following code in order to check the checkbox in IE6:

chkBoxGant.defaultChecked = true;

 
Kind regards,
Yana
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.

[kjellerik]

thanks alot! it worked! :)