How to make the Radbutton unavailable when uploading pictures

1 Answer 46 Views
AsyncUpload PushButton
Colin
Top achievements
Rank 1
Iron
Colin asked on 24 Apr 2023, 07:59 AM

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>


1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 26 Apr 2023, 05:31 PM

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:

 

Regards,
Attila Antal
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Tags
AsyncUpload PushButton
Asked by
Colin
Top achievements
Rank 1
Iron
Answers by
Attila Antal
Telerik team
Share this question
or