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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Rich Text Box to edit grid cell

Thread ID:

Created:

Updated:

Platform:

Replies:

131205 Jun 27,2017 06:43 PM UTC Jul 7,2017 12:10 PM UTC ASP.NET Core 14
loading
Tags: Grid
Leon
Asked On June 27, 2017 06:43 PM UTC

I need to edit a cell in a grid but I want to use a rich text box: The idea is to display only the first ten characters of the text in the cell and do something like a lazy loading to edit the value using a Rich text box. The reason is that the value can include images, formatted html, etc. 

Is this possible?

Venkatesh Ayothi Raman [Syncfusion]
Replied On June 28, 2017 01:35 PM UTC

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have built-in support of Clip mode in Grid. This feature supports the cell value will be displayed with ellipsis or with clipped content when the text overflows inside a column cell. So, we can show the first 10 or 15 characters of the text in Grid for long text. Please refer to the following Help documentation, 

Do you want to display the whole text in RTE control while editing?  If so,we suggest you to use ExternalFormTemplate edit mode in the EditSettings with ExternalFormTemplateID and set the textarea inside the script template for RTE control. We can render the RTE control in the ActionComplete client side event when the request type as “beginedit”.  
Please refer the below code snippet for further details. 
 
@Grid 
 
@{Html.EJ().Grid<object>("FlatGrid") 
            . . . 
                 .AllowPaging() 
                 .ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("begin"); }) 
 
                 .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).InlineFormTemplateID("#ExternalTemplate"); }) 
 
                 }) 
             .Columns(col => 
             { 
                 col.Field("CustomerID").HeaderText("Customer ID").ClipMode(ClipMode.Ellipsis).Width(80).Add(); 
                 . . . 
                
 
             }).Render(); 
} 
<script id="ExternalTemplate" type="text/template"> 
    <b>Order Details</b> 
    <table cellspacing="10"> 
        <tr> 
            . . . 
        </tr> 
    </table> 
    CustomerID: 
    <textarea id="RTE" rows="5" cols="30" style="width: 400px; height: 150px"> {{:CustomerID}}</textarea> 
</script> 
<script> 
 
    function complete(args) { 
 
         
            if (args.requestType == "beginedit") 
                $("#RTE").ejRTE(); // Rendering RTE 
      
 
    } 
</script> 
 
  

We have also prepared a sample for your convenient which can be download from following link, 

Please refer to the following Help documentation and online demo for more information about ExternalForm template editing, 



Regards, 
Venkatesh Ayothiraman. 


Leon
Replied On June 29, 2017 09:23 PM UTC

I was able to get the RTE in the custom form. The only problem I have is that it is not using the full with of the table:


<script id="template" type="text/template">
    <table cellspacing="10" style="width:100%">
        <tr>
            <td>Employee ID</td>
            <td>
                <input id="EmployeeID" name="EmployeeID" disabled="disabled" value="{{:EmployeeID}}" class="e-field e-ejinputtext" style="width:116px;height:28px" />
            </td>
            <td>Name</td>
            <td>
                <input id="Name" name="Name" value="{{:Name}}" class="e-field e-ejinputtext" style="width: 116px; height: 28px" />
            </td>
            <td>Employee ID</td>
            <td>
                <input type="text" id="LastName" name="LastName" value="{{:LastName}}" />
            </td>
        </tr>
        <tr>
            <td>DOB</td>
            <td>
                <input type="text" id="DOB" name="DOB" value="{{:DOB}}" />
            </td>
            <td>Department</td>
            <td colspan="3">
                <select id="DepartmentID" name="DepartmentID">
                    <option value="Calims">Claims</option>
                    <option value="Network Management">Network Management</option>
                </select>
            </td>
            </tr>
            <tr>
            <td colspan="6">
                Comments<br/>
                <textarea id="RTE"> {{:Resume}}</textarea>
            </td>
        </tr>
    </table>
</script>

I tried this but not working:

<script>
              function complete(args) {
                  $("#EmployeeID").ejNumericTextbox();
                  $("#Name").ejNumericTextbox();
                  $("#LastName").ejNumericTextbox();
                  $("#DOB").ejNumericTextbox();
                  $("#Department").ejDropDownList();
              }

              function complete2() {
                  $("#RTE").ejRTE();
                  $("#RTE").width= "100 %";
              }
</script>



Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 30, 2017 11:07 AM UTC

Hi Juan, 

We have analyzed your query and we suspect that you want to render the ejRTE while editing but need to set the ejRTE width as “100%”. In your given code example you have mention the RTE width as “$("#RTE").width= "100 %";” this is not a recommended way.  

So, please change code according to the given code example. 


function complete2() { 
        $("#RTE").ejRTE({ width: "100%" }); 
         
    } 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Leon
Replied On June 30, 2017 10:36 PM UTC

I still have two issues in the code below:

<script>

              function complete(args) {

                  $("#EmployeeID").ejNumericTextbox();

                  $("#Name").ejNumericTextbox();

                  $("#LastName").ejNumericTextbox();

                  $("#DOB").ejNumericTextbox();

                  if (args.requestType == "beginedit") {

                      $("#DepartmentID").ejDropDownList("setSelectedValue", args.row.children().eq(5).text());

                  }

              }


              function complete2(args) {

                  $("#RTE").ejRTE({ width: "100%" });

              }

</script>

when I save: all the fields are being saved, except the value in the RTE (rich text box).

The selected value of the department is not getting selected when it opens the custom form: the code below is not working:

$("#DepartmentID").ejDropDownList("setSelectedValue", args.row.children().eq(5).text());

Please advise.



Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 3, 2017 12:50 PM UTC

Hi Juan, 

Query 1: When I save: all the fields are being saved, except the value in the RTE (rich text box). 
 
We have analyzed your query and we are unable to reproduce the reported issue from our end.  
 
We have prepared a sample and it can be downloadable from the below location. 
 
 
Note: Whether you have a field for the RTE values in your database. 
 
Provide the following details for better assistance. 
 
  1. Exact scenario that the issue get reproduce.
  2. Share the Grid code example.
  3. Screen shot or video demonstration of the issue.
  4. Share the sample or reproduce the issue in the attached sample.
  5. Essential Studio version.
 
Query 2: The selected value of the department is not getting selected when it opens the custom form. 
 
In the previous code example you have shared with the template of the custom form and we suspect that you have the “DepartmentID” column is in  the 4(calculated from 0) of the args.row details but in the sample you mentioned as 5th children. 
 
Please change the code according to the given code example. 
 
 
if (args.requestType == "beginedit") { 
 
                      $("#DepartmentID").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); 
 
                  } 
 
 
 
If you still face the same issue then provide the following details for better assistance. 
 
  1.Share the Grid code example. 
  2.Screen shot or video demonstration of the issue.  
  3.Share the sample or reproduce the issue in the attached sample. 
  4.Essential Studio version. 

Regards, 
Thavasianand S. 


Leon
Replied On July 3, 2017 01:35 PM UTC

I am attaching a sample file with the code. The issue is in the code below:

<script>

    function complete(args) {

                  $("#EmployeeID").ejNumericTextbox();

                  $("#Name").ejNumericTextbox();

                  $("#LastName").ejNumericTextbox();

                  $("#DOB").ejNumericTextbox();

              }


              function complete2(args) {

                  $("#RTE").ejRTE({ width: "100%" });

                  if (args.requestType == "beginedit") {

                      $("#DepartmentID").ejDropDownList("setSelectedValue", args.row.children().eq(4).text());

                  }

              }

</script>

In the line:  $("#DepartmentID").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); I get the following error:


Thanks


Attachment: IndexSample_1aa17b94.zip

Leon
Replied On July 3, 2017 05:13 PM UTC

Your sample does not work either. Try changing the text on the Rich text box and then saving. The new text is not saved and the previous value is cleared. You need to test saving anew text from the rich text box, to see the issue.Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8_(2)-1202145897  

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 4, 2017 04:41 PM UTC

Hi Juan, 

Query 1: Your sample does not work either. Try changing the text on the Rich text box and then saving. 
 
Sorry for the inconvenience caused. 
 
We have checked our given sample and we are able to reproduce the reported issue from our end. 
 
We have modified the sample and it can be downloadable from the following location. 
 

Query 2: Issue in ejDropDownList. 

We have checked your given code example and we found that before set the value for the dropdownlist we need to change the normal text box to ejDropDownList. 

Refer the below code example. 


<script> 
 
    function complete(args) { 
 
 
        if (args.requestType == "beginedit") { 
            $("#CustomerID").ejRTE({ width: "100%" }); 
            $("#EmployeeID").ejDropDownList({ width: '116px' }); 
 
            $("#EmployeeID").ejDropDownList("setSelectedText", args.row.children().eq(2).text()); // Rendering RTE 
        } 
 
    } 
    </script> 



Note: For both the queries we have prepared a single sample and it can be downloadable from the first query sample. 

Regards, 
Thavasianand S.

Leon
Replied On July 5, 2017 05:38 PM UTC

The issue with the drop down list is resolved. However the Rich Text Box still has some issues:

AS you can see in the image:


The ClipMode.Ellipsis works if the text is plain text. The "R222222222..." comes from the database (plain text). The R1111111 was saved from the screen. 

As you can see in the image below, now the the text has some html and that is why (I believe) the  ClipMode.Ellipsis does not work:

 

My final goal is to be able to include an image and that works perfect! but I want to use the ClipMode to only show a few characters and not the full image (in the Grid):


Thanks in advance for all your help.


Renjith Singh Rajendran [Syncfusion]
Replied On July 6, 2017 04:54 PM UTC

Hi Juan, 
 
Since the content width is less than the column width the clipMode will not be applied to the column in the Grid.But we have achieved your requirement by placing the data and image inside div elements and applying width and Ellipsis clipmode css styles. 
 
Please refer the code below, 
 
 
<script type="text/x-jsrender" id="columnTemplate"> 
    <div class="e-gridellipsis" style="width:50px;overflow: hidden;">R1111111111111111</div><br /> 
    <div style="width:50px;overflow: hidden;"> 
        <img style="width: 75px; height: 20px" src="../content/images/grid/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
    </div> 
</script> 
 
 
We have also prepared a sample based on your requirement which can be downloaded from the below link, 
 
 
Regards, 
Renjith Singh Rajendran. 


Leon
Replied On July 6, 2017 06:36 PM UTC

It is not about the size of the text as you can see in the image below. Is there a way to make the height of the column fixed on the grid? I want o keep the images in the database. This is a sample not the real application, so the alternative of saving to a path will not work. if I can keep the row height fixed that may be a solution. 


I still believe the ClipMonde is working on HTML text.

Thanks


Leon
Replied On July 6, 2017 06:44 PM UTC

Sorry I was trying to say:

I still believe the ClipMonde is not working on HTML text.


Leon
Replied On July 6, 2017 07:06 PM UTC

I did some testing with your code and I think this solution is acceptable for me: This is what I did:

On the grid:

<e-column field="Resume" header-text="Resume" text-align="Left" width="100" clip-mode="@(ClipMode.Ellipsis)" Template="#columnTemplate" ></e-column>

The Script:

<script type="text/x-jsrender" id="columnTemplate">

    <div class="e-gridellipsis" style="width:150px;overflow: hidden">Click Edit to see full text</div>

</script>

Result:



Thank you very much.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 7, 2017 12:10 PM UTC

Hi Juan, 

We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
 
Regards, 
Thavasianand 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.

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

;