How to make the Radbutton unavailable when uploading pictures

[Colin]

Hello, everyone. I need your help. How can I disable the button when uploading an image, and the button becomes enable after the image is uploaded successfully. I'd prefer to do it in JavaScript but I failed. just like

var btnMove = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_commandItem().findControl("btnMove");             
btnMove.set_enabled(false);

It's useless,how can I do it. there are my code.

 <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="outerMultiPage">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Height="740px" BackColor="#FFFFFF">                   
                    <div class="ContentRow">
                        <div class="column c1 ">
                            <telerik:RadLabel ID="LabContainer" runat="server" Text="LabContainer" CssClass="LabOnRight" ForeColor="#000000"></telerik:RadLabel>
                        </div>
                        <div class="column c2 ">
                             <telerik:RadTextBox ID="txtContainer" runat="server" ></telerik:RadTextBox>
                        </div>
                    </div>     
                    <div class="ContentRow">                  
                           <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" AllowedFileExtensions="jpeg,jpg,gif,png,bmp"   OnClientFileUploading="OnClientFileUploading" OnClientValidationFailed="onClientValidationFailed"  MaxFileInputsCount="1" PostbackTriggers="btnMove" >                                
                            </telerik:RadAsyncUpload>                            
                     </div>
                    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" Height="700px" AllowPaging="true" PageSize="10" AllowAutomaticDeletes="true" 
                        AllowAutomaticUpdates="false" AllowAutomaticInserts="false"  AllowFilteringByColumn="false" AllowMultiRowSelection="false"
                        OnNeedDataSource="RadGrid_NeedDataSource" OnItemCommand="RadGrid_ItemCommand" OnItemDataBound="RadGrid_ItemDataBound" 
                        OnItemCreated="RadGrid_ItemCreated" OnDeleteCommand ="RadGrid_DeleteCommand" >
                        <PagerStyle Position="Bottom" AlwaysVisible="true" PageSizes="10,20,30"></PagerStyle>
                        <ClientSettings EnableAlternatingItems="true" AllowKeyboardNavigation="False" EnablePostBackOnRowClick="true">
                            <Selecting AllowRowSelect="false" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                        </ClientSettings>
                         <AlternatingItemStyle BackColor ="LightBlue" />
                        <MasterTableView DataKeyNames="ContainerName" AutoGenerateColumns="false" CommandItemDisplay="Top" EditMode="PopUp">
                            <CommandItemTemplate>
                                <telerik:RadPushButton ID="btnClearAll" runat="server" UniqueName="btnClearAll" Text="Clear All" OnClick ="btnClearAll_Click"></telerik:RadPushButton>
                                <telerik:RadPushButton ID="btnMove" runat="server" UniqueName="btnMove" Text="Move In" OnClientClicking="ShowMoveForm"></telerik:RadPushButton>                               
                            </CommandItemTemplate>
                            <CommandItemSettings ShowAddNewRecordButton="false" />
                            <Columns>
 </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>

                </telerik:RadAjaxPanel>
            </telerik:RadPageView>
<telerik:RadPageView runat="server" ID="RadPageView2">
//
//
</telerik:RadMultiPage>

[Attila Antal]

Hello Colin,

For the described behavior, the AsyncUpload control will have to trigger two client events. One that triggers before the upload, and another that triggers after. When the event is triggered, you can access the Command items using the CSS class selectors, then find the button by its ID and disable/enable it accordingly.

Example:

// When Upload begins
function OnClientFileUploading(sender, args) {
    enableButton(false);
}
// After Upload finished
function OnClientFileUploaded(sender, args) {
    enableButton(true);
}

function enableButton(shouldEnable) {
    var grid = $find("<%= RadGrid1.ClientID %>");

    // using jQuery to find the CommandItem Cell by CSS class names
    var commandItem = $telerik.$(grid.get_element()).find('.rgMasterTable .rgCommandRow .rgCommandCell')[0];

    // Telerik static function to find the Telerik.Web.UI.RadButton object
    var btnMove = $telerik.findControl(commandItem, "btnMove");

    // use the Button's Client-Side API to disable it
    btnMove.set_enabled(shouldEnable);
}

 

For more details, you can check out the following articles:

• OnClientFileUploading
• OnClientFileUploaded
• Using the jQuery Brought by Telerik
• jQuery.find()
• Telerik Static Client Library
• Client-side Programming Overview
• Getting Client-Side References to Control Objects

 

Regards,
Attila Antal
Progress Telerik