Moving items from one listbox to another during server side event.

[David]

I am working on a process where a user uploads multiple files for processing. When the file has been uploaded it's name is added to a listbox. The user can then delete any files in the listbox that they didn't want processed. When the processing of the files start I am adding the processed file to another listbox and removing it from the first. This all works well except of course you don't see the move from one list to another until the entire server side event is finished.

I need to show those moves while the processing is going on. Is there a way to call a JavaScript routine to emulate this transfer until the server side processing is complete? My process flow is like this:

1) get filename from ListBox1.Item[0]
2) process file.
3) add filename to ListBox2
4) remove ListBox1.Item[0]
5) repeat until list empty.

Like I said, it works fine and displays after the server side processing completes. How can I show the change during processing?

And yes I looked at the client side examples.

[Dimitar Terziev]

Hi David,

From what you have explained I'm assuming that you are uploading file using our RadAsyncUpload. So if this is the case and you have ajax on your page, my suggestion is to use a loading panel which will be shown on the listboxes until the files are being processes.

I'm am mistaken about what is your scenario, please try to provide me with more information.

All the best,
Dimitar Terziev
the Telerik team

[David]

I'm just using the standard FileUpload component and it's really not part of the process. I suspect that this needs to be done as a client process (javascript) by perhaps adding the list item to the second listbox and then deleting it. I've looked at the one clientside example and it really doesn't show much in the way of examples. This is the original code.:

protected void RadButton1_Click(object sender, EventArgs e)
{
    {
        int tcount = UploadListBox.Items.Count;
        if (tcount < 1)
        {
            lblMessage.Text= "You must have files to process.";
            return;
        }
        string pfile;
        string[] fileparts;
        for (int i = 0; i < (tcount); i++)
        {
            string filetype;
            InitMstrVariables();
            InitFGVariables();
            InitTransactionSet();
            pfile = UploadListBox.Items[0].Value.ToString();
            fileparts = pfile.Split('_');
            MstrType = Right(fileparts[1], 1).ToUpper();
            Batch = Convert.ToInt32(fileparts[0]);
            MstrYearMonth = Convert.ToInt32(Left(fileparts[3], 6));
            DateCreated = StrToDate(fileparts[3]);
            filetype = Left(fileparts[1], 3);
            if (filetype == "834")
            {
                DeleteBatch834();
                ProcessFile834(pfile);
            }
            else if (filetype == "820")
            {
                DeleteBatch820();
                ProcessFile820(pfile);
            }
            var item = new Telerik.Web.UI.RadListBoxItem();
            item.Value = pfile;
            item.Text = pfile;
            UploadListBox.Transfer(UploadListBox.Items[0], UploadListBox, ProcessedListBox);
            File.Delete(filepath + pfile);
            RadButton1.Visible = false;
        }
    }

What I need is to update the two listboxes after the transfer command is made. This would have to be clientside and I would love to see an example for OnClientTransferring or anything similar. It might be a javascript function to add the item to the second listbox prior to deleting. I just need some concrete examples dealing with PageLoad and scripting on the HTML side.

[David]

I've also taken some of the HTML code to show you.

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            //<![CDATA[
            var listBox;

            function transferRight() {
                var listBox2 = $find("<%= UploadListBox.ClientID %>");
                var selectedItem = listBox2.Items[0];
                if (selectedItem == null) {
                    alert("Item not found.");
                    return false;
                }

                listBox2.transferToDestination(selectedItem);
                return false;
            }

            //]]>
        </script>
    </telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="RP1" runat="server" Width="100%">

<telerik:RadListBox ID="UploadListBox" runat="server" Visible="False" Width="350px"
  AllowDelete="True" TransferToID="ProcessedListBox"
  OnClientTransferring="return transferRight()">
 <ButtonSettings TransferButtons="All"></ButtonSettings>
</telerik:RadListBox>

<telerik:RadListBox ID="ProcessedListBox" runat="server" Visible="False"
  Width="350px" >
 <ButtonSettings TransferButtons="All"></ButtonSettings>
  </telerik:RadListBox>

</telerik:RadAjaxPanel>

Hopefully you can see any errors I've made. I can't understand why it won't work.

[David]

And finally an image to give you an idea of what I am trying to accomplish. As files are processed they are move from one listbox to another.

[Dimitar Terziev]

Hello David,

I've prepared a sample page which could be used as a starting point in order to implement the desired functionality.

All the best,
Dimitar Terziev
the Telerik team

[David]

OK I'm confused. I've looked at the code changes and tried to incorporate them but outside of actually clicking on a listbox button how can I get this  to work? The user needs to click a RadButton which starts the whole process. Could you incorporate that into your example? I can see I'm close to the solution.

[David]

I  finally resolved this by linking my function to another Javascript function by someone elses third party control. Sometimes I wonder if telerik actually understands the questions they are asked.