I need to remove the widget that is used for table selection to prevent selecting and potentially deleting the entire table afterwards.
I just want to show and edit table data that I get in raw html string, without any other functionalities, toolbars, widgets, ...
Hiding this widget can be done by removing class names, but I hope there is a better way of doing this.
I suppose this widget is a part of Table plugin.
I want to get more clear look, like this:
I'm using "react": "^16.8.3" and "#ckeditor/ckeditor5-react": "^1.1.3".
This is my CKEditor React component config.
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
<CKEditor
editor={ClassicEditor}
config={{
toolbar: null // To remove default CKEditor toolbar
}}
data={tableContent}
disabled={disabled}
/>
We do not support this functionality (it is impossible to achieve this through editor configuration), however, there are two directions / ideas we could point you if you'd like to try to write it yourself.
When the table becomes selected, you could turn read-only mode. This should prevent any modifications except of moving the selection to another place. Switch off read-only mode when the selection is changed.
Similarly, when the table is selected, you could disable DeleteCommand.
To check if the table is selected you need to check if the model selection contains exactly the table element.
Below, I link you to the important part of API docs:
editor.model.document.selection
editor.isReadOnly
Command class - check forceDisabled and clearForceDisabled methods
editor.commands - to get a command
After all, I just hid the widget. It doesn't completely prevent the selection but it looks cleaner and "selecting" space is very narrow.
.ck.ck-widget__selection-handler {
display: none;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred > figure,
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused > figure {
margin: 16px 0;
}
Related
So, I just started on Syncfusion and it's annoying. I have <ejs-grid> with columnMenuOptions and Filter in the header in a angular project. When I try to create UI for the Filter menu, I am doing as follows:
Code
public filter: IFilter = {
ui: {
create: (args: {
target: Element;column: Column
}) => {
const flValInput: HTMLElement = createElement("input", {
className: "flm-input",
});
args.target.appendChild(flValInput);
});
read: //read
write: //write
}
}
<ejs-grid [columnMenuItems]="columnMenuItems" [allowFiltering]="true">
<e-columns>
<e-column field="Id" headerText='OrderNo' [filter]="filter">
</e-column>
</e-columns>
</ejs-grid>
My Issue
So, from what I understood is that the Filter menu created using ui is appending to the table column. So, my issue here is as my filter menu is a sub-menu of filter as in the image. But, the sub menu is appended to the table column. This makes the UI break. Since, the UI element created is appended to the table column its alignment is respective to the table header and not the filter menu.
My issue with UI
What I need
I want the created element to be respective to the Filter menu and not the table column. Any idea how to fix this. I want to append the element to another element instead of the column.
Based on your requirement you have added a custom filter component to a particular column in EJ2 Grid, when you try open the sub menu of the filter menu it is getting appended to the table column.
Using the code example and the screenshot provided we have prepared a sample, but we were not able to reproduce the mentioned issue. Hence we would like you to provide the following details so that we provide you a better solution.
• If possible replicate the mentioned problem in below sample.
• Share the complete Grid rendering code.
• Ensure whether you have rendered the grid in any third party component or inside any EJ2 components.
• If you have rendered the grid inside any third party component or EJ2 components, please provide the complete details of the component.
• Share the Syncfusion package version you are using.
Sample: https://stackblitz.com/edit/angular-ykhisf?file=app.component.ts
I am using an 'Ext.grid.GridPanel' to disaply tabular data, and I am looking for a way to disable selection and focus on the HTML generated.
So far I have seen that using the disableSelection config, works for disable the selection, but is still possible to focus a row or cell in the grid.
To disable focus and selection, I have seen that the disabled config option do what I want, but I was thinking it is rather a side a side effect, as my understading of disabling something something applies ontly to form elements.
Is this a safe practise ?
Try this CSS for your grid to avoid selections
.x-grid-item-selected .x-grid-td {
background-color: transparent;
}
I have a Custom Command button in a Kendo Grid, however its functionality is linked to the row itself. Is there any way to only show the custom command button AFTER an insert?
The grid is currently in inline edit mode, so when you click insert the custom command is shown all the time, and clicking on it produces an error since the data does not yet exist (the user hasn't clicked the update button)
See image for example :-
I'm trying to have the Edit Teams, Export and Set Active button only visible after the data has been entered into the DB (ie after the update button is clicked).
You can handle onEdit event and disable the custom command button using jquery code.
please post your code in order to get it working.
I've found a way to do this using CSS only - Kendo applies the k-grid-edit-row class to any grid row thats in the editable state, Using that I can do :-
/* Hide the buttons on an edit row */
.k-grid-edit-row .k-grid-EditTeams,
.k-grid-edit-row .k-grid-Export,
.k-grid-edit-row .k-grid-SetActive {
visibility: hidden;
}
Where k-grid-EditTeams, Export and SetActive are my button classes.
I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});
I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.