This is a migrated thread and some comments may be shown as answers.

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

8 Answers 447 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alexandru - Paul
Top achievements
Rank 1
Alexandru - Paul asked on 11 Mar 2020, 01:52 PM

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

8 Answers, 1 is accepted

Sort by
0
Alexandru - Paul
Top achievements
Rank 1
answered on 12 Mar 2020, 02:36 PM
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.
0
Ivan Danchev
Telerik team
answered on 13 Mar 2020, 11:20 AM

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.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 13 Mar 2020, 11:53 AM

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

 

0
Ivan Danchev
Telerik team
answered on 17 Mar 2020, 12:51 PM

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.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 23 Mar 2020, 09:53 PM

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

0
Ivan Danchev
Telerik team
answered on 25 Mar 2020, 05:37 PM

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.
0
Alexandru - Paul
Top achievements
Rank 1
answered on 26 Mar 2020, 07:56 AM

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

0
Ivan Danchev
Telerik team
answered on 30 Mar 2020, 08:23 AM

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.
Tags
General Discussions
Asked by
Alexandru - Paul
Top achievements
Rank 1
Answers by
Alexandru - Paul
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or