This is a migrated thread and some comments may be shown as answers.

Binary Image Column with Ajaxified Grid, multiple click problem when insert or edit.

14 Answers 181 Views

Grid

This is a migrated thread and some comments may be shown as answers.

14 Answers, 1 is accepted

answered on 24 Nov 2011, 10:42 AM

Hello Asa'ad,

Generally speaking you have to ensure that once clicked, the button will be disabled. This can be achieved using several approaches. For example you can add some kind of a modal control that would appear in front of the button so that it can not be clicked. This option could be achieved by adding RadAjaxLoadingPanel to your page. Another option is to add a client side handler to the button that once clicked would make it disabled / readonly.

I hope this helps.

Kind regards,
Milena
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

answered on 24 Nov 2011, 04:15 PM

Hi Asa'ad,

Another option for achieving your goal is to hide the update button after it is clicked. You can see how to access and hide it in the code below:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;

TableCell cell = (TableCell)editor.RadUploadControl.Parent;

CustomValidator validator = new CustomValidator();

validator.ErrorMessage = "Please select file to be uploaded";

validator.ClientValidationFunction = "validateRadUpload";

validator.Display = ValidatorDisplay.Dynamic;

cell.Controls.Add(validator);

GridEditFormItem item = e.Item as GridEditFormItem;

string buttonId = (item.FindControl("CancelButton") as Button).ClientID;

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".addEventListener('click', MyClick, false);");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

}

function MyClick() {

this.style.visibility = "hidden";

}

I hope this helps.

Kind regards,
Milena
the Telerik team

answered on 27 Nov 2011, 09:56 AM

Hi Melina,

t ried your code, but i give me the error saying that the button is null object....

so i changed it as the below

if ((e.Item is GridEditableItem) && (!e.Item.OwnerTableView.IsItemInserted) && (e.Item.IsInEditMode))

{

GridEditFormItem editItem = (GridEditFormItem)e.Item;

ImageButton updBtn = (ImageButton)editItem.FindControl("UpdateButton");

string buttonId = updBtn.ClientID;

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".addEventListener('click', MyClick, false);");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

}

if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)

{

GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;

ImageButton insertBtn1 = (ImageButton)insertItem.FindControl("PerformInsertButton");

string buttonId = insertBtn1.ClientID;

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".addEventListener('click', MyClick, false);");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

}

but it also goves me an error saying the object doesn't support this property or method!!!

Please Help....

answered on 28 Nov 2011, 04:05 PM

Hello Asa'ad,

In order to implement the desired functionality you need to make some additional changes to your code. I would suggest you to remove the following code from the ItemCreated event and add it to the ItemDataBound event as it is shown in the code below:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

GridBinaryImageColumnEditor editor = ((GridEditableItem)e.Item).EditManager.GetColumnEditor("Upload") as GridBinaryImageColumnEditor;

RadAjaxPanel1.ResponseScripts.Add(string.Format("window['UploadId'] = '{0}';", editor.RadUploadControl.ClientID));

GridEditFormItem item = e.Item as GridEditFormItem;

string buttonId = (item.FindControl("UpdateButton") as ImageButton).ClientID;

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".addEventListener('click', MyClick, false);");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

}

}

Please, consider that the addEventListener method does not work in Internet Explorer version 9. For earlier Internet Explorer versions, use the attachEvent method to register the event handler.

Note that the above solution is one way for implement the desired custom functionality, and it might need further adjustment.

Greetings,
Milena
the Telerik team

answered on 30 Nov 2011, 11:58 AM

Hi Milena again...

thanks for you help....

i tried the solution you suggested and after changing the addEventListener to use the attachEvent

the MyClick script is called but the button has not become hidden...it give an error saying 'style' is null or not an object

if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)

{

GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;

ImageButton insertBtn1 = (ImageButton)insertItem.FindControl("PerformInsertButton");

string buttonId = insertBtn1.ClientID;

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".attachEvent('onclick', function(){  MyClick();});");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

RadAjaxManager1.ResponseScripts.Add(script);

}

i tried another way;
by defining Click Event Handler to the insert image button;;;
and the event is called but i cannot change any propperty of the button except for the enabled...
but also with solution;;;user can click multiple time!!!!

if (e.Item is GridEditFormInsertItem && e.Item.OwnerTableView.IsItemInserted)

{

GridEditFormInsertItem insertItem = (GridEditFormInsertItem)e.Item;

ImageButton insertBtn1 = (ImageButton)insertItem.FindControl("PerformInsertButton");

insertBtn1.Click += new System.Web.UI.ImageClickEventHandler(insertClick);

}

protected void insertClick(object sender, ImageClickEventArgs e)

{

ImageButton btn = (ImageButton)sender;

btn.Enabled = false;

//btn.BackColor = System.Drawing.Color.Red;

//btn.Style["visibility"] = "hidden";

}

i dont know what to do else!!!!

if you have any other suggestion i will be happy to know!!!!

Thanks
Asa'ad

Accepted

answered on 01 Dec 2011, 04:32 PM

Hi Asa'ad,

The following code is one of the ways, which you can use to overcome this problem.

string script = String.Format("document.getElementById('{0}'){1}", buttonId, ".attachEvent('onclick', function(){MyClick('"+buttonId+"');});");

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "DisableButton", script, true);

function MyClick(o) {

if (o) {

$get(o).style.visibility = "hidden";

}

Additionally, .attachEvent will work only in Internet Explorer. For any other browsers you should use .addEventListener and in order your page to be cross-browser you need to modify the code.

Please note, that is only one possible approach for overcoming your problem and might need further adjustments for your specific case.

I hope this helps.

Kind regards,
Milena
the Telerik team

answered on 08 Dec 2011, 02:26 PM

Hello Asa'ad,

Note that the approach we have been discussing was just for demonstration purposes and does not pretend to be the perfect one neither the only one. Please feel free to customize it so that your final result is achieved. For example you can add some javascript code that can find the RadUpload Client Object and by using its getFileInputs method verify whether its file Input element is empty. Based on that check, you can apply the custom code that disables the button.

I hope this helps.

All the best,
Martin
the Telerik team