setting cancel to true in Radrotator OnClientItemClicking is canceling my checkbox onClick Event

2 posts, 1 answers
  1. CJ chavez
    CJ chavez avatar
    12 posts
    Member since:
    May 2010

    Posted 27 Oct 2012 Link to this post

    Hi.
    I'm using a Radrotator with Item template inside as follows:

    ASPX
    <telerik:RadRotator runat="server" ID="rotatorImagesList" RotatorType="Buttons" Width="100%"
        Height="150px" WrapFrames="false" OnItemClick="rotatorImagesList_SelectImage"
        OnClientItemClicking="rotatorImagesList_OnClientItemClicking">
        <ItemTemplate>
            <div>
                <asp:CheckBox ID="chkSel" runat="server" Checked='<%#Eval("isSelected")==DBNull.Value?false:Eval("isSelected") %>'
                    onclick="chkClick(this)" />
                <asp:ImageButton ID="btnDel" runat="server" OnClientClick="CancelItemClick(this)"
                    CssClass="deletebutton" ImageUrl="~/App_Themes/Office2007/Grid/Cancel.gif"></asp:ImageButton>
            </div>
            <div>
                <telerik:RadBinaryImage EnableTheming="false" runat="server" ID="binaryImageThumbnail"
                    Width="103px" Height="103px" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem,"ThumbnailData") %>'
                    BorderColor="Black" BorderStyle="Solid" onClick="ImageClick(this)" />
            </div>
            <div>
                <asp:HiddenField ID="hiddenFieldPhotoRIDContainer" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"NCO_RID") %>' />
                <asp:HiddenField ID="hiddenFieldIsDeleted" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"isDeleted") %>' />
            </div>
        </ItemTemplate>
    </telerik:RadRotator>

    I only want to "Click" on the item when user clicks on the image, since at this time, I run the rotatorImagesList_SelectImage in which I do some server code. otherwise I do not want a postback to run the rotatorImagesList_SelectImage event.

    I cancel ItemClick when I click the btnDel, since I will be deleting this image. this works fine.

    but when I cancel click when the checkbox is clicked, the Checkbox can not be "checked".

    here is my Javascript:
    var currIndex;
    var isDeleting;
    var allowClick;
     
    function pageLoad() {
     
        isDeleting = false;
        allowClick = false;
    }
     
    function CancelItemClick(sender, eventArgs) {
     
        currIndex = getIndexFromId(sender.id);
        allowClick = true;
        isDeleting = true;
    }
     
    function ImageClick(sender) {
     
        currIndex = getIndexFromId(sender.id);
        isDeleting = false;
        allowClick = true;
    }
     
    function chkClick(sender) {
        currIndex = getIndexFromId(sender.id);
        isDeleting = false;
        allowClick = false;
     
    }
     
    function rotatorImagesList_OnClientItemClicking(sender, eventArgs) {
        if (allowClick == true) {
     
            var hfVal = document.getElementById(sender.get_id() + "_i" + currIndex + "_" + "hiddenFieldPhotoRIDContainer").value;
     
            if (isDeleting == true) {
                __doPostBack("btnDel", hfVal);
                eventArgs.set_cancel(true);
            }
     
        }
        else {
            eventArgs.set_cancel(true);
        }
    }
     
    function getIndexFromId(string) {
        var matches = string.match(/_i([0-9]+)/);
        return matches[1];
     
    }


    Any Suggestions?

    Thanks.
  2. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 31 Oct 2012 Link to this post

    Hi,

    When you cancel the click client-side event of the RadRotator's item, the click event of the elements in its content is also canceled. As a result the checkbox in the items is not checked.

    I would suggest a different approach if you want to initiate a postback only then the RadBinaryImage is clicked. Please remove the handlers specified in the properties OnItemClick and OnClientItemClicking of RadRotator and call the method  __doPostBack to postback when handling the client-side click event of the binary image and then execute your logic on the server-side.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top