We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Text editor with toolbar inside Grid

Good afternoon gentlemen,

I'm having trouble tying to put a text editor inside a Grid for editing a column, I have already searched for it in the forums and tried to implement solutions without positive results, here is the actual code of my view.

Second point,
Do I need something special for getting the value of "PromotionDetails" (the coumn intended to have the text editor (text area) with the toolbar in the controller side?


*****************************VIEW****************************
<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("PromotionsCatalogGrid").ej2_instances[0];
        if (args.item.id === 'PromotionsCatalogGrid_excelexport') {
            var excelExportProperties = {
                fileName: "PromotionsCatalog.xlsx"
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

<h1>Promotions</h1>

<ejs-grid id="PromotionsCatalogGrid" allowFiltering="true" allowGrouping="true" allowPaging="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add", "Edit", "Update", "ExcelExport", "Search", "Cancel", "Delete"})">
    <e-grid-pagesettings pageSizes="true" pageSize="50">
    </e-grid-pagesettings>
    <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
    <e-grid-searchSettings operator="contains" ignoreCase="true"></e-grid-searchSettings>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-data-manager url="/Catalogs/PromotionsGrid_Read" crudUrl="/Catalogs/PromotionsGrid_CRUD" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="PromotionsID" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>
        <e-grid-column field="PromotionDetails" headerText="Promotion Details" edit="@(new { create = "create", read = "read", write = "write" })" visible="true"></e-grid-column>
        <e-grid-column field="Active" headerText="Active" displayAsCheckBox="true" editType="booleanedit" type="boolean" visible="true"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script type="text/javascript">
    
    function create(args) {
        //return $(" <div class='e-field'><textarea></textarea></div>  "); //creating a textarea 
        return "<textarea style='resize:none; width:100%'>{{:PromotionDetails}}</textarea>";
    }

    function read(args) {
        //return args.ejRTE("getText");
        return args.val();
    }

    //function write (args) {
    //    ars.element.find("textarea").ejRTE({ 
    //                value: args.rowdata["PromotionDetails"], width: "100%", minWidth: "150px", isResponsive: true 
    //            }).attr("name", "PromotionDetails") 
    //}
</script>


*****************************CONTROLLER****************************

[HttpPost]
        public async Task<IActionResult> PromotionsGrid_CRUD([FromBody]CRUDModel<Promotions> obj)
        {
            switch (obj.Action)
            {
                case "insert":
                    await _repository.CreateAsync(obj.Value);
                    break;
                case "update":
                    await _repository.UpdateAsync(obj.Value);
                    break;
                case "remove":
                    var del = await _repository.FindById<Promotions>(Convert.ToInt32(obj.Key));
                    await _repository.DeleteAsync(del);
                    break;
            }
            return Json(obj.Value);
        }











3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 18, 2019 12:09 PM UTC

Hi Javier,  
 
Greetings from Syncfusion. 
 
We could see you would like to render a EJ1 RTE control in the Edit Template of the Grid. Since EJ1 controls deals with the jQuery object, we cannot directly chain the JavaScript object to them. So, we suggest to use the ‘$’, a jQuery identifier which will render required RTE component. Refer to the following code example. 
 
<script type="text/javascript"> 
    function create(args) { 
        elem = document.createElement('textarea'); 
        return elem; 
    } 
    function read(args) { 
        return $(args).ejRTE("getText");//; 
    } 
    function(args) { 
        $(args.element).ejRTE({ 
            value: args.rowData["CustomerID"], 
            width: "100%" 
        }). 
            attr("name", "CustomerID") 
    } 
</script> 

Regards,  
Seeni Sakthi Kumar S 



JA Javier A Aguilera September 18, 2019 08:53 PM UTC

Thanks for the fast replay!! Unfortanetaly I didn't success on getting this work completly,

1) The text area is indeed shown, but when I pressed "enter key" I got the error you can see in the next image.

2) The information in the view that I'm getting from my model data is not bidding with the text area, the second row should read "Promocion 2" for that column but when I'm editing the column it shows empty the text area

3) I need to find a way to show the toolbar of the textarea in the cells of the column "PromotionDetails" (this is actually the reason Im trying to put the text area in this column for editing with html the data here)




*******************************************************************************

Here is my current code:

NOTE: I tried putting and removing the "write" part for the edit of the column since when I put that I got the same error of ejRTE is not a function in the begining of the view when it loaded.

**********************************************************VIEW**********************************************************

<script>
    function toolbarClick(args) {
        var gridObj = document.getElementById("PromotionsCatalogGrid").ej2_instances[0];
        if (args.item.id === 'PromotionsCatalogGrid_excelexport') {
            var excelExportProperties = {
                fileName: "PromotionsCatalog.xlsx"
            };
            gridObj.excelExport(excelExportProperties);
        }
    }
</script>

<h1>Promotions</h1>

<ejs-grid id="PromotionsCatalogGrid" allowFiltering="true" allowGrouping="true" allowPaging="true" allowExcelExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() { "Add", "Edit", "Update", "ExcelExport", "Search", "Cancel", "Delete"})">
    <e-grid-pagesettings pageSizes="true" pageSize="50">
    </e-grid-pagesettings>
    <e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
    <e-grid-searchSettings operator="contains" ignoreCase="true"></e-grid-searchSettings>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-data-manager url="/Catalogs/PromotionsGrid_Read" crudUrl="/Catalogs/PromotionsGrid_CRUD" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="PromotionsID" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>
        @*<e-grid-column field="PromotionDetails" headerText="Promotion Details" edit="@(new { create = "create", read = "read", write = "write" })" visible="true"></e-grid-column>*@
        <e-grid-column field="PromotionDetails" headerText="Promotion Details" edit="@(new { create = "create", read = "read" })" visible="true"></e-grid-column>
        <e-grid-column field="Active" headerText="Active" displayAsCheckBox="true" editType="booleanedit" type="boolean" visible="true"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script type="text/javascript">
    var elem;

    function create(args) {
        elem = document.createElement('textarea'); 
        return elem;
    }

    function read(args) {
        return $(args).ejRTE("getText");
    }

    function write(args) {
        $(args.element).ejRTE({ 
            value: args.rowData["PromotionDetails"], 
            width: "100%" 
        }).attr("name", "PromotionDetails") 
    }

</script>


Thanks for your hard work!












SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 19, 2019 01:37 PM UTC

Hi Javier, 

We suspect that you are referring multiple jQuery files in your application. We have already discussed about the consequences of the multiple jQuery references in a application. Refer to the following KB. Avoid the multiple jQuery references and render the EJ1 controls in the application. 
 

We have prepared a sample that can be downloaded from the following location.  
 

Regards, 
Seeni Sakthi Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon