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!