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
  1. Home
  2. Forum
  3. LightSwitch HTML
  4. Text alignment and paragraphs ignored in RichTextBox?

Text alignment and paragraphs ignored in RichTextBox?

Apologies for the lengthy post - but I'm not very experienced in Lightswitch HTML development so not 100% sure what could affect what - so I've written everything down :)

I am trying to create a very simple project (just a single data item) which links to a RichTextBox. When I run the project I get the following issues:

 

  1. In the RTB control, type in "hello"
  2. Press enter
  3. Start to type "goodbye"
  4. As soon as "g" is pressed, the cursor moves back up to the previous line and "goodbye" is appended on to the end of the "hello" text

 

  1. In the RTB control, click the "Align text center" button
  2. The cursor aligns to the center of the control waiting for input
  3. As soon as a key is pressed, the cursor moves back to the left hand side of the control

 

The steps I have done are shown below:

  1. Created a Lightswitch HTML application (Framework 4.5, Visual Basic) in Visual Studio 2013 (with Update 4)
  2. Enabled Syncfusion extensions, "DataVisualization for HTML Lightswitch" & "Web for HTML Lightswitch", both version 12.4.0.24
  3. Based on the information from http://help.syncfusion.com/ug/lightswitch/default.htm#!documents/lightswitchforhtmlcl.htm I did the following:
  4. Created a new subfolder under "Contents" called "ej"
  5. Drag/drop all the files in "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\css\web" into the new Contents/ej folder
  6. Added the following line into the <head> section of default.aspx, just before the "Content/user-customization.css" line:
    1. <link rel='nofollow' href="Content/ej/default-theme/ej.web.all.min.css" rel="stylesheet" />
  7. Drag & drop the following files from "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\external" into the Scripts folder:
    1. jquery.easing.1.3.js
    2. jquery.globalize.js
    3. jquery-1.10.2.min.js
    4. Jsrender.js
  8. Added the following references into the >body> section of default.aspx, just before the generatedAssets.js line:
    1.  <script src="Scripts/jquery-1.10.2.min.js"></script>
    2. <script src="Scripts/jquery.easing.1.3.js"></script>
    3. <script src="Scripts/jquery.globalize.js"></script>
    4. <script src="Scripts/jsrender.js"></script>
  9. Create a subfolder called "ej" under the Scripts folder
  10. Drag/Drop all the files in "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\scripts\web" into the new "Scripts/ej" folder
  11. Added an additional line into default.aspx immediately after the ones I just entered:
    1. <script src="Scripts//ej/ej.web.all.min.js"></script>
  12. Add blank "browse data" screen to HTMLClient
  13. Add new data item as string (called "RTFInfo")
  14. Drag RTFInfo to screen
  15. Change the type of RTFInfo to an "EJ Value Control"
  16. Change the "Control Name" property to "RichTextEditor"
  17. Click the "Edit render Code" link to create the initial code

I have also run your Syncfusion samples and it works fine so it's obviously something that I've done wrong - I just can't figure out what!  I have included the project "as is" to this ticket just in case that helps.

Any help/guidance would be much appreciated.

Thanks,
Steve.

 


Attachment: Application1_3ba2cc79.zip

5 Replies
SC Steve Cliff replied to Steve Cliff March 18, 2015 04:10 PM UTC

Apologies for the lengthy post - but I'm not very experienced in Lightswitch HTML development so not 100% sure what could affect what - so I've written everything down :)

I am trying to create a very simple project (just a single data item) which links to a RichTextBox. When I run the project I get the following issues:

 

  1. In the RTB control, type in "hello"
  2. Press enter
  3. Start to type "goodbye"
  4. As soon as "g" is pressed, the cursor moves back up to the previous line and "goodbye" is appended on to the end of the "hello" text

 

  1. In the RTB control, click the "Align text center" button
  2. The cursor aligns to the center of the control waiting for input
  3. As soon as a key is pressed, the cursor moves back to the left hand side of the control

 

The steps I have done are shown below:

  1. Created a Lightswitch HTML application (Framework 4.5, Visual Basic) in Visual Studio 2013 (with Update 4)
  2. Enabled Syncfusion extensions, "DataVisualization for HTML Lightswitch" & "Web for HTML Lightswitch", both version 12.4.0.24
  3. Based on the information from http://help.syncfusion.com/ug/lightswitch/default.htm#!documents/lightswitchforhtmlcl.htm I did the following:
  4. Created a new subfolder under "Contents" called "ej"
  5. Drag/drop all the files in "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\css\web" into the new Contents/ej folder
  6. Added the following line into the <head> section of default.aspx, just before the "Content/user-customization.css" line:
    1. <link rel='nofollow' href="Content/ej/default-theme/ej.web.all.min.css" rel="stylesheet" />
  7. Drag & drop the following files from "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\external" into the Scripts folder:
    1. jquery.easing.1.3.js
    2. jquery.globalize.js
    3. jquery-1.10.2.min.js
    4. Jsrender.js
  8. Added the following references into the >body> section of default.aspx, just before the generatedAssets.js line:
    1.  <script src="Scripts/jquery-1.10.2.min.js"></script>
    2. <script src="Scripts/jquery.easing.1.3.js"></script>
    3. <script src="Scripts/jquery.globalize.js"></script>
    4. <script src="Scripts/jsrender.js"></script>
  9. Create a subfolder called "ej" under the Scripts folder
  10. Drag/Drop all the files in "C:\Program Files (x86)\Syncfusion\Essential Studio\12.4.0.24\JavaScript\assets\scripts\web" into the new "Scripts/ej" folder
  11. Added an additional line into default.aspx immediately after the ones I just entered:
    1. <script src="Scripts//ej/ej.web.all.min.js"></script>
  12. Add blank "browse data" screen to HTMLClient
  13. Add new data item as string (called "RTFInfo")
  14. Drag RTFInfo to screen
  15. Change the type of RTFInfo to an "EJ Value Control"
  16. Change the "Control Name" property to "RichTextEditor"
  17. Click the "Edit render Code" link to create the initial code

I have also run your Syncfusion samples and it works fine so it's obviously something that I've done wrong - I just can't figure out what!  I have included the project "as is" to this ticket just in case that helps.

Any help/guidance would be much appreciated.

Thanks,
Steve.

 


Attachment: Application1_3ba2cc79.zip

There was a typo in my initial post, sorry!

<script src="Scripts//ej/ej.web.all.min.js"></script>
Should have been
<script src="Scripts/ej/ej.web.all.min.js"></script>

HP Harikrishnan P Syncfusion Team March 19, 2015 01:50 PM UTC

Hi Steve,

Query: Text Alignment and Paragraph ignore in RTE

Sorry about the inconvenience caused

We have checked the sample that you have attached and we are able to reproduce the above reported issue, also have logged a report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let me know if you have any questions.

Regards,

HariKrishnan


CR croma October 2, 2015 11:20 AM UTC

Could you please share how this was solved?

I have very similar problems with latest version (13.3.0.7) on VS2013 upd 4, I must be missing including some script or css.

Thanks



CR croma October 2, 2015 12:57 PM UTC

Never mind...I think I've solved...

I checked script and content reference in local samples and also found that this documentation page is wrong:  http://help.syncfusion.com/lightswitch/html-client/richtexteditor/create-a-simple-richtexteditor
Please change into:
 contentItem.value = args.htmlText;

Anyway I'd like to have a suggestion from you:
As I need to add RTE control only to an existent project of mine (with only Syncfusion dlls server side but no HTML EJ Value controls),which is the bare minimum set of script and content items to add in Client project?

Thank you in advance


HP Harikrishnan P Syncfusion Team October 6, 2015 09:30 AM UTC

Hi Marco,


Thanks for your update.


We will change the code block in RTE getting started document and refresh in online as soon as possible.


Query: As I need to add RTE control only to an existent project of mine (with only Syncfusion dlls server side but no HTML EJ Value controls),which is the bare minimum set of script and content items to add in Client project?


We have provided custom script generator utility for this purpose (To load minimal scripts and CSS based on the needed components).


You can select the component that you are going to use and generate the script and CSS file. CSG will generate the script and css files only for the selected components. You can use these files in your application.


To learn about the CSG tool, please refer the below link


http://help.syncfusion.com/js/include-only-the-needed-widgets


You can refer the following knowledge base article for more information


http://www.syncfusion.com/kb/3048/how-to-use-js-components-with-minimal-js-and-css-loaded


Regards,

HariKrishnan


Loader.
Up arrow icon