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

RTE cannot be used in EditTemplate mode of column

Hi

according to documents, RTE component will be created on "textarea" element.
when i try to use a column in Grid in EditTemplate mode, in Write mode, that textarea element is not identified, therefore i cannot create a RTE on it.

<ej:Column Field="Body" DataType="string" HeaderText="News Body">
     <EditTemplate Write="wB" Read="rB" Create="crB" />
</ej:Column>

        function crB(args) {
            return $("<textarea />");
        }
        function wB(args) {
            var obj = args.element;
            obj.ejRTE();
        }

when i debugged the scripts i found out the problem is with line 5743 in ej.Grid.js (14.1.0.46):
var $formElement = $(form).find("input,select,div.e-field"), percent = 86;

no "textarea" elements are selected in $formElement, and therefore " function wB " will not be called.

Regards
Mahyar

9 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 16, 2016 04:57 AM UTC

Hi Mahyar, 
 
To place a ejRTE control in the EditTemplate, you have to wrap the textArea element within the e-field class as shown in the below code example. Create event of EditTempalte property used to place the custom elements and then render the ejRTE in the Write event. Refer to the following code example. 
 
        <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" > 
            <Columns> 
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"/> 
                  . . . .    
                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"> 
                    <EditTemplate Create="create" Read="read" Write="write" /> 
                </ej:Column> 
            </Columns> 
            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
        </ej:Grid> 
        <script type="text/javascript"> 
            function create() { 
                return $(" <div class='e-field'><textarea></textarea></div>  "); //creating a textarea 
            } 
            function write(args) { 
                ars.element.find("textarea").ejRTE({ 
                    value: args.rowdata["CustomerID"], width: "100%", minWidth: "150px", isResponsive: true 
                }).attr("name", "CustomerID") 
 
            } 
            function read(args) { 
                return args.ejRTE("getText");//Getting the Edited text value 
            } 
       </script> 
 
Regards, 
Seeni Sakthi Kumar S. 



MA Mahyar May 16, 2016 11:20 AM UTC

Thanks for your solution
it works as you mentioned, but as I'm using InlineForm for editing, RTE cannot be displayed correctly in the screen.
i decided to work with InlineFormTemplate.

I have 2 questions regarding Grid if it's ok to ask it in this thread.

i'm using WebMethodAdapter for grid datamanager with "Offline=true" settings,
and have defined both URL and CrudURL for it which are placed in ws.asmx

1st) when i try to insert row data using InlineForm into the grid, data inserts successfully at server side and i can see in browser developer tools that it retrieves last updated data from server URL, but the grid will not be updated and it does not show the inserted row!
i should refresh the page to see inserted row, why this happens?

2nd) i have created the CRUD function according to example in this url , but when i try to remove a row from grid i receive following error:
Message:"Invalid web service call, missing value for parameter: 'value'."

Regards
Mahyar


JK Jayaprakash Kamaraj Syncfusion Team May 17, 2016 04:00 PM UTC

Hi Mahyar, 

Thanks for the update. 
Query 1: i'm using WebMethodAdapter for grid datamanager with "Offline=true" settings, i should refresh the page to see inserted row, why this happens? 
We were unable to reproduce the issue while using DataManager with WebMethodAdaptor and Offline=”true”. Please share the following information to analyze the issue and update the details as early as possible.  
1.       Version details of IE browser, Essential studio. 
2.       Is there any script error thrown in console? If so, please attach a screenshot of the error with call stack. 
3.       Are you hosting a separate sample or sample browser samples in server? 
4.       Full client and server-side code example. 
5.       An issue reproducing sample if possible or a sample hosted link  
  
Query2: Message:"Invalid web service call, missing value for parameter: 'value'." 
 
If you want to remove a row from grid we suggest you to use RemoveURL in DataManager. Please refer to the below code example and sample. 

<DataManager   URL="GridFeatures.aspx/Data" RemoveURL="GridFeatures.aspx/CrudRemove" CrudURL="GridFeatures.aspx/CrudUpdate" Adaptor="WebMethodAdaptor" /> 
GridFeatures.aspx.cs 
       [WebMethod] 
       [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
       public static object CrudRemove(int key) 
       { 
           OrderRepository.Delete(key); 
           var data = OrderRepository.GetAllRecords(); 
           return data; 
       } 


Regards, 

Jayaprakash K. 



MA Mahyar May 18, 2016 11:20 AM UTC

Hi Jayaprakash

Thanks for your response

I should apologize for my wrong information, i use datamanger in WebMethodAdapter mode using Offline='false' setting.
but the result is the same, after inserting row data, last json dataset will be retrieved (can be seen in developer tools/network), while grid will not be updated with last dataset!

Information you asked:
1) i use google chrome (50.0.2661.94) and syncfusion asp.net (14.1.0.46)
2) no script error will be thrown in console
3) i wrote my own application, but used some hints from samples
4,5) i wrote a test project to reproduce the issue, and have attached it to this post

just to clarify, after inserting row using inlineform, grid will not be updated with last modified data
and you should use ( $("#OrdersGrid").ejGrid('instance').refreshContent() ) manually to refresh the grid!

---

for Crud Operations using WebMethodAdapter i followed instructions in syncfusion website samples for asp.net, so if removing a record cannot be handled within CrudURL, it's better to inform samples team to update that section!

Regards
Mahyar

Attachment: syncfusion_grid_webmethod_test_c9ea5fe5.zip


MA Mahyar May 18, 2016 11:30 AM UTC

Just forgot to mention after opening attached sample solution, run " Update-Package -Reinstall " in nuget manager console to restore scripts and content folders.

Regards
Mahyar


PK Prasanna Kumar Viswanathan Syncfusion Team May 19, 2016 10:21 AM UTC

Hi Mahyar, 

By checking your code example, we found that you have returned the data with count in the OrdersCRUDmethod. To update the grid with new data, we suggest you to return the new data in the CRUD URL Method.   

Find the code example: 


public static object OrdersCRUD(Orders value, string action) 
        { 
            DataResult result = new DataResult(); 
            List<Orders> order = new List<Orders>(); 
            if (HttpContext.Current.Session["Orders"] != null) 
                order = (List<Orders>)HttpContext.Current.Session["Orders"]; 
            Orders ord = new Orders(); 
            ------------------------------------------- 
               else if (action == "insert") 
                { 
                    int orderId = order.OrderByDescending(o => o.OrderID).First().OrderID; 
                    int empId = order.OrderByDescending(o => o.EmployeeID).First().EmployeeID; 
                    orderId++; 
                    empId++; 
                    ord = new Orders(orderId, "Test_" + orderId, empId, 32.38, DateTime.Now, "Reims_" + orderId); 
                    order.Add(ord); 
                    HttpContext.Current.Session["Orders"] = order; 
                } 
                else 
                { 
 
                } 
            } 
            return ord; 
        } 

Please find the below modified sample.   


Regards, 
Prasanna Kumar N.S.V 



MA Mahyar May 20, 2016 07:03 PM UTC

Hi Prasanna 

Thanks for your solution, grid now updates with modified data

besides i think Help section and Samples section (for asp.net server side editing of dataset and adapters) for syncfusion controls, should be revised.
i did many try and errors to make some of components to work because of lacking of documents.
of course i should admit that syncfusion really fulfilled my requirements in website designing, my regards to you all.

Regards
Mahyar



PK Prasanna Kumar Viswanathan Syncfusion Team May 23, 2016 10:21 AM UTC

Hi Mahyar, 

We regret for the inconvenience caused. 

We have created an improvement task for the UG documentation and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
 

Regards,
Prasanna Kumar N.S.V
 



PK Prasanna Kumar Viswanathan Syncfusion Team May 24, 2016 07:28 AM UTC

Hi Mahyar, 

Please ignore the previous update. 

Based on your suggestion, we have considered “CRUD URL UG document” by specifying the return format while performing CRUD operations as an improvement and will be refreshed shortly. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Live Chat Icon For mobile
Up arrow icon