how to show/hide editor/textarea based on dropdown box selection using jQuery and PHP

9 posts, 0 answers
  1. Alexandru - Paul
    Alexandru - Paul avatar
    9 posts
    Member since:
    Jan 2019

    Posted 11 Mar Link to this post

    Hi!
    I want to show and hide the editor based on the dropdown selection or selected option in a select box using the jQuery and PHP.

    Also when I select the "text/plain" from dropdown list I want to hide the editor and show the textarea and for "text/plain" I want to show the editor and hide the textarea.

    $editor = new \Kendo\UI\Editor('content');
    $editor->resizable(true);
    $deserialization = new \Kendo\UI\EditorDeserialization();
    $custom = new \Kendo\JavaScriptFunction($(function() { $(\"#content\").data(\"kendoEditor\").wrapper.hide(); }););
    $deserialization->custom($custom);
    $editor->deserialization($deserialization);
    if ($mimeTag == 'text/html') {
        print_r('show editor');
    } elseif ($mimeTag == 'text/plain') {
        print_r('show textarea');
    } else {

    //hide the textarea or editor

    $editor->deserialization($deserialization);
       print_r('hide');
     
    }

     
    $dropDownList = new \Kendo\UI\DropDownList('dropdownlist');
     
    $dropDownList->dataTextField('mimeTag')
                 ->dataValueField('value')
                 ->dataSource(array(
                    array('text' => 'text/html', 'value' => 'Html'),
                    array('text' => 'text/plain', 'value' => 'Text')
                 ))
                 ->select('onTADropDownSelect');
     
    function onTADropDownSelect(e) {                 
          var value = e.sender.dataSource.options.data;  
          var content = $('#content').data('kendoEditor');    
          for (var i=0; i < value.length; i++) {
              if (value[i].value != 'Text'){            
                  $(function() { $('#content').data('kendoEditor').wrapper.hide(); });             
              }  
              else
              {
                  $(function() { $('#content').data('kendoEditor').wrapper.show(); });
              }  
              if (value[i].value != 'Html'){            
                  $(function() { $('#content').data('kendoEditor').wrapper.hide(); });             
              }  
              else
              {
                  $(function() { $('#content').data('kendoEditor').wrapper.show(); });
              }
          }
      };
    echo $dropDownList->render();
    echo $editor->render();

  2. Alexandru - Paul
    Alexandru - Paul avatar
    9 posts
    Member since:
    Jan 2019

    Posted 12 Mar in reply to Alexandru - Paul Link to this post

    Edit: when I select the "text/plain" from dropdown list I want to hide the editor and show the textarea and for "text/html" I want to show the editor and hide the textarea.
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1887 posts

    Posted 13 Mar Link to this post

    Hello,

    Could you elaborate more on the textarea you want to hide? In the onTADropDownSelect handler I see logic for showing/hiding only the Editor:

    $('#content').data('kendoEditor').wrapper.show();

    and:

    $('#content').data('kendoEditor').wrapper.hide();

    And this is the proper way of showing and hiding the Editor. However, I don't see a textarea element being accessed by its id, which makes me believe you could be talking to the Editor's editable area. The Editor is both the toolbar and the editable area below it. So please elaborate more on the textarea you want to show when "text/plain" is selected. If it is a separate element independent of the Editor, you can access it with jQuery: $("#MyTextareaId").hide()

    And if by "textarea" you mean the Editor's editable area, do you want to show only it without the Editor's toolbar?

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Alexandru - Paul
    Alexandru - Paul avatar
    9 posts
    Member since:
    Jan 2019

    Posted 13 Mar in reply to Ivan Danchev Link to this post

    Hello Ivan, 

    Thank you for replying.

    I was think about to show the Editor as textarea with toolbar disabled.

    Something like that:

     function onTADropDownSelect(e) {                  
            var value = e.sender.dataSource.options.data;   
            var content = $('#content').data('kendoEditor');     
            for (var i=0; i < value.length; i++) {
                if (value[i].value === 'Text'){
                             
                   $(document).ready(function() {
                        // create Editor from textarea HTML element with default set of tools
                        $('#content').kendoEditor({ resizable: {
                            content: true,
                            toolbar: false
                        }});
                    });
                    console.log('text');        
                }   
                else if(value[i].value === 'Html')
                {               
                    $(document).ready(function() {
                        // create Editor from textarea HTML element with default set of tools
                        $('#content').kendoEditor({ resizable: {
                            content: true,
                            toolbar: true
                        }});
                    });
                    console.log('html');
                } 
                else {
                $(function() { $('#content').data('kendoEditor').wrapper.hide(); });
                        console.log('nothing');
                        }              
            }
        }; 

     

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1887 posts

    Posted 17 Mar Link to this post

    Hi Alexandru - Paul,

    I've simplified the logic in the"select" event handler:

    function onTADropDownSelect(e) {                  
      var value = e.item.text();  
      
      var content = $('#content').data('kendoEditor'); 
    
      if (value === 'Text'){
        content.wrapper.show();
        content.toolbar.element.hide();
      }   
      else if(value === 'Html')
      {               
        content.wrapper.show();
        content.toolbar.element.show()
      } 
      else {
        content.wrapper.hide();
      }              
    }

    Instead of re-initializing the Editor when different items in the DropDownList are selected you can hide/show the toolbar of the Editor, based on the selected value.

    Here's a dojo example: https://dojo.telerik.com/aTahUZIR

    Regards,
    Ivan Danchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Alexandru - Paul
    Alexandru - Paul avatar
    9 posts
    Member since:
    Jan 2019

    Posted 23 Mar in reply to Ivan Danchev Link to this post

    Hi Ivan Danchev,

    Thank you for answer!

    This example helped me a lot.

    I have a question. If I select "Text" it is possible to have textarea's content encoded as false?

    I was thinking for example like

    $("#content").kendoEditor({content: true,
              toolbar: false, encoded: false});

    Regards,

    Alexandru-Paul

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1887 posts

    Posted 25 Mar Link to this post

    Hi Alexandru - Paul,

    This is possible and requires calling 2 methods, the setOptions method to set the encoded option to false/true respectively, and the refresh method to refresh the content afterwards:

    content.setOptions({
      encoded: false
    })
    content.refresh();
    console.log($("#content").val());

    Here's the modified dojo example: https://dojo.telerik.com/UsOGAtuV

    You can see the difference on selecting "Text" and "Html" in the console.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  8. Alexandru - Paul
    Alexandru - Paul avatar
    9 posts
    Member since:
    Jan 2019

    Posted 26 Mar in reply to Ivan Danchev Link to this post

    Hi Ivan Danchev,

    Thank you for replying! That was very helpful!

    I was thinking on selecting "Text", instead of hiding toolbar what if I hide the editor and add textarea by using .append() method.

    function onTADropDownSelect(e){
        
        var value = e.dataItem.value;
        var content = $('#content').data('kendoEditor');
        if(value == 'Text')
           {
                content.wrapper.show();
                content.toolbar.element.hide();
                $($("#content").kendoEditor().wrapper.hide()).append("<textarea></textarea>");
    content.setOptions({
                  encoded: false
                })
                content.refresh();
                console.log($("#content").val());
            }
            else if(value == 'Html')
            {
                content.toolbar.element.show();
                content.wrapper.show();
            }
        else{
                content.wrapper.hide();
            }
        };

    Regards,

    Alexandru-Paul

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1887 posts

    Posted 30 Mar Link to this post

    Hi ,

    Appending/prepending Html (in this case a textarea) to the widgets Html is not recommended, since it can lead to unexpected behavior. Why is appending a textarea needed?

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top