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

[Alexandru - Paul]

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();

[Alexandru - Paul]

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.

[Ivan Danchev]

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

[Alexandru - Paul]

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');
                    }              
        }
    }; 

 

[Ivan Danchev]

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

[Alexandru - Paul]

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

[Ivan Danchev]

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

[Alexandru - Paul]

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

[Ivan Danchev]

Hi Alexandru - Paul,

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