Toggle button visibility in Add new record template

[RB]

I have a Radgrid in an Update Panel. It has a template for "Add new Record". This template has a dropdownlist and a RadAsyncUpload control in a panel. When a value is selected from the dropdown and a file is uploaded, the Upload button is enabled. Else it is disabled.  For this I have a javascript function as follows:

function SetUploadButtonEnabled(controlPanel, fileUploadId) {
     var docTypesList = controlPanel.find("select");
     var gotListVal = docTypesList.val() != "";
     var fileUpload = $find(fileUploadId);
     var gotFileVal = fileUpload.getUploadedFiles().length > 0;
     var enable = gotListVal && gotFileVal;
     if (enable) {
         controlPanel.find(".GxButtonBlue").removeAttr("disabled");
     }
     else {
         controlPanel.find(".GxButtonBlue").attr("disabled", true);
     }
 }

I am trying to call it from code behind as follows, but the function is not being called:

string script = "<script type=\"text/javascript\">"
                + "\n  $(document).ready(function (){"
                    + "\n    $(document).on(\"change\", \"#" + this._DdDocumentTypes.ClientID + "\", function(event){"
                    + "\n      var docUploadControlPanel = $(this).closest(\"#" + this._DocUploadControlPanel.ClientID + "\");"
                    + "\n      SetUploadButtonEnabled(docUploadControlPanel, \"" + this._fiInput.ClientID + "\");"
                    + "\n    });"
                    + "\n  });"
                    + "\n "
                    + "</script>";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script);

Since an Update Panel is there I even tried:

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "DocumentAjaxUploadCtrlScript_" + this.ClientID, script, true);

But the javascript function is never called! Can you suggest a solution?

[Shinu]

Hi,

Please have a look into the sample code snippet to enable the  upload button after  uploading the file and select a value from the dropdownlist.

ASPX:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" >
            <MasterTableView CommandItemDisplay="Top">
                <CommandItemTemplate>
                    <telerik:RadButton ID="RadButton1" runat="server" Text="Add New Record" CommandName="InitInsert">
                    </telerik:RadButton>
                    <asp:Panel ID="Panel1" runat="server">
                        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" OnClientFileUploaded="Validate">
                        </telerik:RadAsyncUpload>
                        <telerik:RadDropDownList ID="RadDropDownList1" runat="server" DefaultMessage="--select--" DataSourceID="SqlDataSource1" DataTextField="OrderID" OnClientSelectedIndexChanged="Validate">
                        </telerik:RadDropDownList>
                        <telerik:RadButton ID="RadButton2" runat="server" Text="Upload" Enabled="false">
                        </telerik:RadButton>
                    </asp:Panel>
                </CommandItemTemplate>
            </MasterTableView>
        </telerik:RadGrid>
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript:

function Validate() {
    var radGrid = $find("<%=RadGrid1.ClientID %>");
    var radUpload = $telerik.findControl(radGrid.get_element(), "RadAsyncUpload1");
    var radDropdownlist = $telerik.findControl(radGrid.get_element(), "RadDropDownList1");
    var radButton;
    if (radUpload.getUploadedFiles().length > 0) {
        if (radDropdownlist.get_selectedItem() != null) {
            radButton = $telerik.findControl(radGrid.get_element(), "RadButton2");
            radButton.set_enabled(true);
        }
    }
}

Let me know if you have any concern.
Thanks,
Shinu.

[RB]

Shinu,
The function is unable to get the RadGrid.
The Radgrid has an ID:  this._RadGrid1.ID = "RadGrid1";
I have a condition to add template as follows:
 

if (ShowAdd)
            {
                this._RadGrid1.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = true;
                this._RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
                this._RadGrid1.MasterTableView.CommandItemSettings.AddNewRecordText = "Add Document";
                this._RadGrid1.MasterTableView.EditFormSettings.EditFormType = GridEditFormType.Template;
                this._RadGrid1.MasterTableView.EditFormSettings.FormTemplate = new AddDocumentTemplate(this._EntityId,
                           this._EntityType,
                           this._QuoteId,
                           this.CustomerNumber,
                           this.CompanyId,
                           this.ProposalNumber,
                           this.CatalogProductId);
            }

The add template calls another class DocUpload and in the Instantiate method it is added to container as follows:
 container.Controls.Add(_DocUpload);
In the class DocUpload I have a RadDropdownList:

this._DdDocumentTypes = new RadDropDownList();
this._DdDocumentTypes.ID = "DDLDocumentTypes";
this._DdDocumentTypes.DataTextField = docTypeTable.FormattedDescriptionColumn.ColumnName;
this._DdDocumentTypes.DataValueField = docTypeTable.EntityDocumentTypeIdColumn.ColumnName;
this._DdDocumentTypes.OnClientSelectedIndexChanged = "Validate";
this._DdDocumentTypes.DefaultMessage = "--Select Document Type--";

The validate method is unable to find the radgrid.

[Shinu]

Hi,

In order to achieve your scenario you have to pass the ClientID of the dynamically created controls RadDropDownList, RadAsyncUpload and RadButton. First Step is  you have to declare the "OnClientFileUploaded"  event of RadAsyncUpload and "OnClientSelectedIndexChanged" event of  RadDropDownList as follows.

C#:

...
//declaring Controls
upload = new RadAsyncUpload();
upload.ID = "RadAsyncUpload1";
dlist = new RadDropDownList();
dlist.ID = "RadDropDownList1";
dlist.DefaultMessage = "Select";
dlist.DataSourceID = "SqlDataSource1";
dlist.DataTextField = "OrderID";
btn = new RadButton();
btn.ID = "RadButton1";
btn.Text = "Upload";
btn.Enabled = false;
//declaring the Events
upload.OnClientFileUploaded = "Validate";
dlist.OnClientSelectedIndexChanged = "Validate";
...

Second Step is OnItemCreated event of RadGrid you have to pass the ClientID of the Controls as Attribute.

C#:

void grid_ItemCreated(object sender, GridItemEventArgs e)
{
    RadGrid radgrid=(RadGrid)sender;
    if (e.Item is GridCommandItem)
    {
        GridCommandItem item = e.Item as GridCommandItem;
        RadAsyncUpload upload = item.FindControl("RadAsyncUpload1") as RadAsyncUpload;
        RadDropDownList droplist = item.FindControl("RadDropDownList1") as RadDropDownList;
        RadButton btn = item.FindControl("RadButton1") as RadButton;
        //adding attributes
        upload.Attributes.Add("RadButton", btn.ClientID);
        upload.Attributes.Add("DropDownList",droplist.ClientID );
        upload.Attributes.Add("RadAsyncUpload", upload.ClientID);
        droplist.Attributes.Add("RadButton", btn.ClientID);
        droplist.Attributes.Add("DropDownList", droplist.ClientID);
        droplist.Attributes.Add("RadAsyncUpload", upload.ClientID);
    }
}

Finally from JavaScript you can validate the RadAsyncUpload and RadDropDownList.
JavaScript:

function Validate(sender, args) {
    //accessing the control using the getAttribute() method
    var upload = document.getElementById(sender.get_id()).getAttribute("RadAsyncUpload");
    var droplist = document.getElementById(sender.get_id()).getAttribute("DropDownList");
    var button = document.getElementById(sender.get_id()).getAttribute("RadButton");
    var uploadid = document.getElementById(upload);
    var droplistid = document.getElementById(droplist);
    var buttonid = document.getElementById(button);
    if (uploadid.control.getUploadedFiles().length > 0) {
        if (droplistid.control.get_selectedItem() != null) {
            buttonid.control.set_enabled(true)
        }
    }
}

Thanks,
Shinu.