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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Text editor with toolbar inside Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

147625 Sep 17,2019 10:10 PM UTC Sep 19,2019 01:37 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Javier A Aguilera
Asked On September 17, 2019 10:10 PM UTC

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);
        }











Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


Javier A Aguilera
Replied On 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!











Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon