1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Using Uploader and Textarea in the Grid when edit record in ASP.NET MVC Grid

Using Uploader and Textarea in the Grid when edit record in ASP.NET MVC Grid

I have some problems with the Uploader control and a Textarea that I am using within a Grids when I edit or add records. The controls are displayed correctly, but I need to solve the following:

  • The TextArea saves the values ​​for the records, but when I want to edit an existing record it does not take the value it should, but it is shown in white, being necessary to reinsert values ​​in that field every time a record is edited.

With respect to the Uploader, should show the image that is loaded through this control every time a new record is created. At this point I have three problems:
  • Is there a way to wait for the image that is loaded by this control to finish being loaded to proceed with the creation of the record? When I create a new record and load the image and other data, the registration is done so fast that I see an empty image, since the function in charge of reading it has not finished doing it (this does not happen when I do debug step by step) . It is necessary to consider that these data will be loaded later to a MVC method.
  • Is there any way to limit the amount of items to be loaded? I need that it only allows the loading of an element, and this is read from the corresponding row if it is selected for editing. But every time I edit a row, the control appears empty 
RAZOR:

 @Html.EJS().Grid("eventSpeakers").DataSource((IEnumerable)Model.Speakers).Columns(col=> {
                   col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Width("120").Add();
                   col.Field("Image").HeaderText("Imagen").ValidationRules(new { required = true }).Edit(new { create = "createImage", read = "readImage", destroy = "destroyImage", write = "writeImage" }).Width("120").Add();
                   col.Field("Name").HeaderText("Nombre").ValidationRules(new { required = true }).Width("120").Add();
                   col.Field("Description").HeaderText("Descripción").ValidationRules(new { required = true }).Edit(new { create = "createSpeakerDescription", read = "readSpeakerDescription" }).Width("120").Add();
               }).Locale("es").QueryCellInfo("queryCellInfo").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List() { "Add", "Edit", "Delete" }).Render()

My JavaScript file:

var filt64String;
    function createSpeakerDescription() {
        countryElem = document.createElement('textarea');
        return countryElem;
    }

    function readSpeakerDescription(args) {
        return args.value;
    }

    function createImage(args) {
        elem = document.createElement('input');
        return elem;
    }

    function writeImage(args) {
        uploadObj = new ej.inputs.Uploader({
            selected: function (args) {
                for (var i = 0; i < args.filesData.length; i++) {
                    filt64String = getBase64(args.filesData[i].rawFile);
                }
            },
        });
        uploadObj.appendTo(elem);
    }

    function destroyImage() {
        uploadObj.destroy();
    }

    function readImage(args) {
        return filt64String;
    } 
    function getBase64(file) {
        var reader = new FileReader();
        reader.onloadend = function (evt) {
            reader.readAsDataURL(file);
            return reader.result;
        }
    } 

    function queryCellInfo(args) {
        if (args.column.field === "Image") {
            args.cell.setAttribute('aria-label', 'image')
            args.cell.innerText = '';
            var img = new Image();
            img.src = args.data.Image;
            args.cell.appendChild(img);
        }
    }

1 Reply
HJ Hariharan J V Syncfusion Team August 17, 2018 01:02 PM UTC

Hi Adolfo , 
 
Thanks for contacting Syncfusion support. 
 
 
We have validated your requirement and the provided code snippet. Please find the response. 
 
 
Query 
Response 
  1. Text area is not return value when edit existing record
The edit template feature , render and destroy the element in every edit action. So we need to set the value in column.edit.write method. Please find the code example for your reference. 
 
 
 
  @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").InsertUrl("Home/Add").RemoveUrl("Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 
    { 
        col.Field("OrderID").IsPrimaryKey(true).HeaderText("Order ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
        col.Field("CustomerID").HeaderText("Customer ID").Edit(new { create = "txtcreate", read = "txtread", destroy = "txtdestroy", write = "txtwrite" }).Width("150").Add(); 
        . . . 
 
).Render() 
</div> 
 
<script> 
    function txtcreate(args) { 
        var tarEle = document.createElement('div'); 
        txtEle = document.createElement('textarea'); 
        tarEle.append(txtEle); 
        return tarEle ; 
    } 
    function txtwrite(args) { 
        txtEle.value = args.rowData["CustomerID"]; 
        var titleEle = document.createElement("span"); 
        titleEle.innerText = args.column.headerText; 
        titleEle.style.opacity = 0.49; 
        args.element.parentElement.insertBefore(titleEle, args.element.parentElement.firstChild) 
    } 
 
    function txtread(args) { 
        return txtEle.value; 
    } 
    function txtdestroy(args) { 
       txtEle.remove(); 
    } 
 
     
</script> 
 
 
 
 
 
Note : when use column edit template feature, the default style appearance and default functionality (get the existing value/ read the value from text area) is not applied.  
 
  1. Image uploader show as empty when edit a record  
 
We have validated the provided code example , we need to set base 64 string for “Image” column when success read from “reader.readAsDataURL” method.  We have achieved your requirement by using workaround as follows. 
 
 
  @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").InsertUrl("Home/Add").RemoveUrl("Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col => 
    { 
. . . 
        col.Field("Image").HeaderText("Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 
    }).AllowPaging(true).QueryCellInfo("queryCellInfo").ActionBegin("actionBegin").DataBound("dataBound").ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
</div> 
 
<script> 
    var uploadObj, strm; 
    var elem, file, txtEle; 
    var filt64String = []; 
    var targetCell; 
 
    function queryCellInfo(args) { 
        if (args.column.field === "Image") { 
            args.cell.setAttribute('aria-label', 'image') 
            args.cell.innerText = ''; 
            var img = new Image(); 
            img.src = args.data.Image; 
            args.cell.appendChild(img); 
        } 
    } 
 
 
   // image uploader 
    function create(args) { 
        // create target element 
        elem = document.createElement('input'); 
        return elem; 
    } 
    
 
    function write(args) { 
        uploadObj = new ej.inputs.Uploader({ 
       asyncSettings: {  
                        saveUrl: 'http://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',  
                        removeUrl: 'http://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'  
                    },  
                    success: onUploadSuccess,  
                    failure: onUploadFailure  
        }); 
        uploadObj.appendTo(elem) 
    } 
    function destroy() { 
        uploadObj.destroy(); 
    } 
    function read(args) { 
        return strm; 
    } 
 
function onUploadSuccess(args) {  
                    if (args.operation === 'upload') {  
                         strm = getBase64(args.file.rawFile);  
                    }  
                }  
                function onUploadFailure(args) {  
                    console.log('File failed to upload');  
                }  
 
 
    function getBase64(file) { 
      var reader = new FileReader();  
        reader.readAsDataURL(file);  
        reader.onload = function () {  
            strm = reader.result;  
        };  
        reader.onerror = function (error) {  
            console.log('Error: ', error);  
        };  
 
    } 
</script> 
 
Please find the sample for your reference. 
 
 
Regards, 
Hariharan 


Loader.
Up arrow icon