Client-Side Events of GridAttachmentColumn

[Peter]

Hey guys,
I am new to telerik controls and currently evaluate leveraging the radGrid with a GridAttachmentColumn. What we want to do is to write the filename of a currently uploaded file into a textfield outside of the grid into a textbox (called "latest upload"). Unfortunately I have no idea, how to attach to the Client-Side events of this column or the respective grid Event, thrown by this column type.

I read, that this column is rendered as a radUpload control when the grid is in edit mode, which is our case. This controls' documentation offers the clientFileSelected Event, that is not offered by a radGrid. In the AttachmentColumn Demo (here) there was shown a way to handle certain "GridCommands" by assigning an eventHandler to the "OnCommand" Event of the Grid and then asking for the commandName by such a function:

function gridCommand(sender, args) {
        if (args.get_commandName() == "DownloadAttachment") {
               // some logic here
        }
    }

What I wanted to do is to listen to the event, thrown by the radUpload control to retrieve the filename and then write it somewhere else, but no matter what I do in the radUpload, I am not stepping into this script, since it obviously does not throw GridCommands.
As far as I searched I could not find a way to attach to events "just inside this column". Can anyone tell me how to attach to what is presented as the "OnClientFileSelected" Event in the radUpload Control (here)?

Best regards!
Peter

[Angel Petrov]

Hi Peter,

I see that you have researched thoroughly the problem. In the demo the uploadFileSelected is attached to the uploadFileSelected (in the code behind). Using the uploadFileSelected method you get the name of the uploaded file. You can do that by splitting the absolute path. The modified javascript function which implements this functionality looks like this:

function uploadFileSelected(sender, args)
            {
                upload = sender;
                var uploadContainer = sender.get_element();
                var editTable = uploadContainer.parentNode.parentNode.parentNode.parentNode;
                var fileNameTextBox = editTable.rows[0].cells[1].getElementsByTagName('input')[0];

                fileNameTextBox.value = args.get_fileInputField().title;
                var nameWithPath = args.get_fileInputField().title;
                var realfileName = nameWithPath.split("\\");
                var fileName = realfileName[realfileName.length - 1];
                alert(fileName);
            }

Also you could extract the file name in the code behind while casting the attachment column to RadUpload. I am attaching the project based on our demo for you to review. Hope this examples serves you well.

All the best,
Angel Petrov
the Telerik team

[asimptota]

This uploadFileSelected function works only if RadGrid edit mode is "PopUp" or "EditForm". But when I use "InPlace" edit mode there's no way I could "find" FileName textbox through this JavaScript. Could you please help me because I've been struggling with this for hours...

[Angel Petrov]

Hi Jasmin,

Please modify the uploadFileSelected function like demonstrated in the code snippet below:

JavaScript:

function uploadFileSelected(sender, args)
            {
                upload = sender;
                var uploadContainer = sender.get_element();
                var fileNameTextBox = upload.getFileInputs()[0].title;
                fileNameTextBox.value = args.get_fileInputField().title;
                var nameWithPath = args.get_fileInputField().title;
                var realfileName = nameWithPath.split("\\");
                var fileName = realfileName[realfileName.length - 1];
                alert(realfileName[realfileName.length-1]);
            }

This approach should work for all edit modes and you should not experience problems extracting the file name.

All the best,
Angel Petrov
the Telerik team

[asimptota]

No. It doesn't work.

var fileNameTextBox = upload.getFileInputs()[0].title;

This only extracts file name from Upload control, but code should place file name string into a TextBox that is bound to "FileName" field in database. According to that fileNameTextBox should be something like

var fileNameTextBox = editTable.rows[0].cells[1].getElementsByTagName('input')[0];

But, it seems that editTable.rows[0].cells[1].getElementsByTagName('input')[0] is null when EditMode="InPlace".
I was trying to change rows and cells indexes in order to "shoot" it but nothing. Any help?

EDIT: Plus, if I set RadToolBar as CommandItemTemplate, it fires me "No files selected" which means that uploadedFileData.Length == 0

[Angel Petrov]

Hi Jasmin,

It seems that your requirements are different from the initial ones. Now if I understand correctly you want to change the text in "FileName" bound column after a file is selected. In order to achieve this you should modify the code like so:

function uploadFileSelected(sender, args)
            {
                upload = sender;
                var uploadContainer = sender.get_element();
                var fileNameTextBox = upload.getFileInputs()[0].title;
                fileNameTextBox.value = args.get_fileInputField().title;
                var nameWithPath = args.get_fileInputField().title;
                var realfileName = nameWithPath.split("\\");
                var fileName = realfileName[realfileName.length - 1];
                sender.get_parent().get_editItems()[0].get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];
            }

In attachments you can find a sample project which also illustrates this and should help you get a better understanding of the implementation.

All the best,
Angel Petrov
the Telerik team

[asimptota]

Yes, I just want to be able to attach files using RadGrid EditMode="InPlace".
Unfortunately sample you've provided won't work either. In the uploadFileSelected JavaScript function on this line

sender.get_parent().get_editItems()[0].get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];

it gives the following error:  Unable to get value of the property 'get_cell': object is null or undefined.
I must admit that this bugs me for days.
And another important issue is that when I use RadToolbar as RadGrid CommandItemTemplate it turns out that fileData.Length =0

if (e.CommandName == RadGrid.UpdateCommandName ||
    e.CommandName == RadGrid.PerformInsertCommandName)
{
    GridEditableItem item = e.Item as GridEditableItem;

    if (!(item is GridEditFormInsertItem))
    {
        fileId = (int)item.GetDataKeyValue("ID");
    }

    string fileName = (item.EditManager.GetColumnEditor("FileName") as GridTextBoxColumnEditor).Text;

    string test = ((item.EditManager.GetColumnEditor("AttachmentColumn") as GridAttachmentColumnEditor).RadUploadControl as RadUpload).UploadedFiles[0].FileName;

    fileData = (item.EditManager.GetColumnEditor("AttachmentColumn") as GridAttachmentColumnEditor).UploadedFileContent;
    DateTime? uploadDate = (item.EditManager.GetColumnEditor("UploadDate") as GridDateTimeColumnEditor).PickerControl.SelectedDate;
    string uploadedBy = (item.EditManager.GetColumnEditor("UploadedBy") as GridTextBoxColumnEditor).TextBoxControl.Text;

    if (fileData.Length == 0 || fileName.Trim() == string.Empty)
    {
        e.Canceled = true;
        RadGrid1.Controls.Add(new LiteralControl("<b style='color:red;'>No file uploaded. Action canceled.</b>"));
    }

    if (!uploadDate.HasValue || String.IsNullOrEmpty(uploadedBy.Trim()))
    {
        e.Canceled = true;
 HERE ->       RadGrid1.Controls.Add(new LiteralControl("<b style='color:red;'>Please, fill in all the fields.</b>"));
    }
}

Could you, please, help me get the RadGrid with GridAttachmentColumn that uses RadToolbar as CommandItemTemplate and EditMode="InPlace".

[Antonio Stoilkov]

Hello Jasmin,

I have modified the Default.aspx page in order to show the desired functionality implemented. Additionally, the changes are described below:

• In the uploadFileSelected handler change the JavaScript logic

var upload = null;
function uploadFileSelected(sender, args)
{
    upload = sender;
    var uploadContainer = sender.get_element();
    var fileNameTextBox = upload.getFileInputs()[0].title;
    fileNameTextBox.value = args.get_fileInputField().title;
    var nameWithPath = args.get_fileInputField().title;
    var realfileName = nameWithPath.split("\\");
    var fileName = realfileName[realfileName.length - 1];

    $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_editItems()[0].get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];
}

• In the onToolBarClientButtonClicking if the commandName is UpdateEdited disable the ajax so the file data could be uploaded properly

function onToolBarClientButtonClicking(sender, args)
{
    var button = args.get_item();
    if (button.get_commandName() == "DeleteSelected")
    {
        args.set_cancel(!confirm('Delete all selected customers?'));
    }
    else if (button.get_commandName() == "UpdateEdited")
    {
        var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
        manager.set_enableAJAX(false);
        setTimeout(function ()
        {
            manager.set_enableAJAX(true);
        }, 0);
    }
}

• Change the ItemCommand logic in order to access the edit item from the RadGrid.EditItems collection

if (e.CommandName == RadGrid.UpdateCommandName ||
    e.CommandName == RadGrid.PerformInsertCommandName ||
    e.CommandName == RadGrid.UpdateEditedCommandName)
{
    GridEditableItem item = RadGrid1.EditItems[0] as GridEditableItem;

    if (!(item is GridEditFormInsertItem))
    {
        fileId = (int)item.GetDataKeyValue("ID");
    }

    string fileName = (item.EditManager.GetColumnEditor("FileName") as GridTextBoxColumnEditor).Text;

    string test = ((item.EditManager.GetColumnEditor("AttachmentColumn") as GridAttachmentColumnEditor).RadUploadControl as RadUpload).UploadedFiles[0].FileName;

    fileData = (item.EditManager.GetColumnEditor("AttachmentColumn") as GridAttachmentColumnEditor).UploadedFileContent;
    DateTime? uploadDate = (item.EditManager.GetColumnEditor("UploadDate") as GridDateTimeColumnEditor).PickerControl.SelectedDate;
    string uploadedBy = (item.EditManager.GetColumnEditor("UploadedBy") as GridTextBoxColumnEditor).TextBoxControl.Text;

    if (fileData.Length == 0 || fileName.Trim() == string.Empty)
    {
        e.Canceled = true;
        RadGrid1.Controls.Add(new LiteralControl("<b style='color:red;'>No file uploaded. Action canceled.</b>"));
    }

    if (!uploadDate.HasValue || String.IsNullOrEmpty(uploadedBy.Trim()))
    {
        e.Canceled = true;
        RadGrid1.Controls.Add(new LiteralControl("<b style='color:red;'>Please, fill in all the fields.</b>"));
    }
}

• Use GridDateTimeColumn instead of GridBoundColumn for the UploadDate field

<telerik:GridDateTimeColumn DataField="UploadDate" HeaderText="UploadDate" DataType="System.DateTime"
                        FilterControlAltText="Filter UploadDate column" SortExpression="UploadDate" UniqueName="UploadDate">
                    </telerik:GridDateTimeColumn>

All the best,
Antonio Stoilkov
the Telerik team

[asimptota]

Thank you for your answer! Using RadToolbar as a CommandItemTemplate now works but EditMode="InPlace" fails again.

var upload = null;
function uploadFileSelected(sender, args)
{
    upload = sender;
    var uploadContainer = sender.get_element();
    var fileNameTextBox = upload.getFileInputs()[0].title;
    fileNameTextBox.value = args.get_fileInputField().title;
    var nameWithPath = args.get_fileInputField().title;
    var realfileName = nameWithPath.split("\\");
    var fileName = realfileName[realfileName.length - 1];

  HERE-> $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_editItems()[0].get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];
}

with the following error: Unable to get value of the property 'get_cell': object is null or undefined.

[Antonio Stoilkov]

Hi Jasmin,

I have created a video showing the behavior working on my side. Additionally, I have used another approach which could also be used.

• http://screencast.com/t/hHDEs5eSi

var upload = null;
function uploadFileSelected(sender, args)
{
    upload = sender;
    var uploadContainer = sender.get_element();
    var fileNameTextBox = upload.getFileInputs()[0].title;
    fileNameTextBox.value = args.get_fileInputField().title;
    var nameWithPath = args.get_fileInputField().title;
    var realfileName = nameWithPath.split("\\");
    var fileName = realfileName[realfileName.length - 1];

    //$find("<%= RadGrid1.ClientID %>").get_masterTableView().get_editItems()[0].get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];

    $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();
    $find(Telerik.Web.UI.Grid.GetFirstParentByTagName(sender.get_element(), "tr").id).get_cell("FileName").getElementsByTagName("input")[0].value = realfileName[realfileName.length - 1];
}

All the best,
Antonio Stoilkov
the Telerik team