Rich Text Box to edit grid cell

[Leon]

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]

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, 

https://help.syncfusion.com/aspnet-core/grid/cell#clipmode 

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8_(2)-1202145897 

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

Help documentation: https://help.syncfusion.com/aspnet-core/grid/editing#edit-modes 

Online demo: http://mvc.syncfusion.com/demos/web/grid/externalformediting 

Regards, 

Venkatesh Ayothiraman. 

[Leon]

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]

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. 

Link: https://help.syncfusion.com/api/js/ejrte#members:width 

Regards, 

Thavasianand S. 

[Leon]

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]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8_(2)-1202145897  

 

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 5^th 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]

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]

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]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/131205/ze/WebApplication82144763944.zip 

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]

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]

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, 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8-2012119273.zip 

 

Regards, 

Renjith Singh Rajendran. 

[Leon]

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]

Sorry I was trying to say:

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

[Leon]

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]

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.