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

Ajaxify RadAsyncUpload in GridCommandItemTemplate from codeBehind

4 Answers 125 Views

Grid

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

Guilhem asked on 23 Jun 2017, 02:31 AM

Hello !

Here is my situation:
I dynamically generate RadGrid from code behind (number of RadGrid, and their ID, is unknown before the page load, it depends of a database).
I have a unique PlaceHolder "Grids" (to insert my RadGrids), RadAjaxManager and RadAjaxLoadingPanel.
I create their ItemCommand and ajaxify each RadGrid basically as follow:

var grid = new RadGrid();

//...

grid.MasterTableView.CommandItemTemplate = new GridCommandItemTemplate();

Grids.Controls.Add(grid);

RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid, grid, RadAjaxLoadingPanel1);

Now I'm trying to add a RadAsyncUpload. The purpose is that the user upload a file, which will be read server-side, insert some data in the database, and will rebind the grid displaying the newly added rows. Each grid can have its own upload button, therefore I think placing it in the GridCommandItemTemplate makes sense and is user friendly. I've added the RadAsyncUpload and so far so good.

However. When my postback is triggered, it's not ajaxified. My whole page is reload. I was expecting my RadAsyncUpload to behave like the other RadButtons of the GridCommandItemTemplate but it's not.

I have tried to ajaxify it during the Item_created event of my RadGrid but I get an error about the collection being modified.

Does someone have a solution ?

4 Answers, 1 is accepted

answered on 28 Jun 2017, 01:41 AM

Hello Marin,

Yes I add the ajax settings in the Page_Load event.
I made a sample of my issue with 3 files, I think you can easily reproduce it.
I hope this will help you. Thank you for your help.

WebForm1.aspx:

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadLabel runat="server" ID="PageInfo" Visible="false" Width="100%" Text=""></telerik:RadLabel>

<asp:PlaceHolder ID="Grids" runat="server"></asp:PlaceHolder>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PageInfo"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function ClientFilesUploaded(source, args) {

__doPostBack(source.get_id().split('__')[1], args);

}

</script>

</telerik:RadCodeBlock>

</div>

</form>

</body>

WebForm1.aspx.cs:

namespace WebApplication1

{

public partial class WebForm1 : System.Web.UI.Page

{

private string[] MY_TABLES = { "XXX", "XXX" };

private string[] MY_DATAKEYS = { "XX", "XX" };

protected void Page_Load(object sender, EventArgs e)

{

for (int i = 0; i < 2; i++)

{

CreateGrid(i);

}

protected void CreateGrid(int id)

{

/* DATASOURCE */

var ds = new SqlDataSource();

ds.ID = "DS_TEST_" + id;

ds.ConnectionString = ConfigurationManager.ConnectionStrings["MY_CS"].ConnectionString;

ds.SelectCommand = "SELECT * FROM " + MY_TABLES[id];

/* RADGRID */

var grid = new RadGrid();

grid.ID = "TEST_"+id;

grid.DataSourceID = "DS_TEST_" + id;

grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;

grid.MasterTableView.CommandItemTemplate = new GridCommandItemTemplate(id);

grid.MasterTableView.DataKeyNames = new string[] { MY_DATAKEYS[id] };

/* Add everything in the page */

Grids.Controls.Add(ds);

Grids.Controls.Add(grid);

RadAjaxManager1.AjaxSettings.AddAjaxSetting(grid, grid, RadAjaxLoadingPanel1);

}

GridCommandItemTemplate.cs:

namespace WebApplication1

{

public class GridCommandItemTemplate : ITemplate

{

protected RadButton button1;

protected RadButton button2;

protected RadAsyncUpload uploadButton;

private readonly int id;

public GridCommandItemTemplate(int i)

{

this.id = i;

}

public void InstantiateIn(Control container)

{

button1 = new RadButton();

button1.Text = "Button 1";

button1.AutoPostBack = true;

button1.CommandName = "Command1";

container.Controls.Add(button1);

button2 = new RadButton();

button2.Text = "Button 2";

button2.AutoPostBack = true;

button2.CommandName = "Command2";

container.Controls.Add(button2);

uploadButton = new RadAsyncUpload();

uploadButton.Localization.Select = "Upload";

uploadButton.ID = "_UPLOAD_TEST_" + id;

uploadButton.OnClientFilesUploaded = "ClientFilesUploaded";

uploadButton.HideFileInput = true;

uploadButton.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;

uploadButton.MaxFileInputsCount = 1;

uploadButton.EnableInlineProgress = true;

uploadButton.FileUploaded += UploadButton_FileUploaded;

container.Controls.Add(uploadButton);

}

private void UploadButton_FileUploaded(object sender, FileUploadedEventArgs e)

{

//Some stuff

System.Threading.Thread.Sleep(5000);

}

Accepted

answered on 29 Jun 2017, 10:06 AM

gridWithAsync.zip

video.zip

Hello Guilhem,

Generally, another control POSTs the page after the files are uploaded. You could easily do that via one of the other buttons in the header template. A simple DOM traversal + the name attribute of the input element will give you a valid __doPostBack() call. This button could be hidden if it will not be used for other purposes.

An alternative is to use the full name of the async upload, because this is how MS AJAX traps requests:

__doPostBack(source.get_id(), args);

This approach worked for me (I am adding a small sample here) and if you do not wish to use other buttons, this should work.

Regards,

Marin Bratanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 30 Jun 2017, 01:55 AM

Hello Marin,

Using source.get_id() worked. It ajaxified my command. However my controls were not updated (not sure for the grid, but at least the RadLabel I'm using to show what happens server side was definitely not updated).

However your idea of the hidden button made me realize I just have to fire any command of my RadGrid after the upload.
Therefore I solved my issue by changing the javascript function:

function ClientFilesUploaded(source, args) {

var grid = source.get_parent();

var masterView = grid.get_masterTableView();

masterView.fireCommand();

}

Now it's working just as I wanted :)

Thank you !