how do i make admin on rest main grid labels in regular case .as my application requires too many columns in the grid and all together it looks very bad and messy .i have created an en.json file and it's taking the value from there that is if the property is channelType and I have given in en.json as "channelType": "Channel ", its showing "CHANNEL" itself in the grid but I want it to be in regular case such as "Channel", what should I do
You can use the style property on the Datagrid component. See the documentation
const styles = {
header: {
textTransform: 'none',
}
}
<Datagrid styles={styles}>
Related
My application uses CKEditor 5 to allow users to edit rich text data. These texts support some application-specific custom elements (Web Components), and I want to extend CKEditor with custom plugins that support inserting such custom elements. I seem to be almost there, but I'm having some difficulties getting these custom elements into and out of the CKEditor instance properly.
Current plugin implementations
I mainly followed the Implementing an inline widget tutorial from the CKEditor 5 documentation. As an example, I would like to support a custom element like <product-info product-id="123"></product-info>, which in CKEditor should be rendered as a simple <span> with a specific class for some styling.
In my editing plugin, I first define the extension to the schema:
const schema = this.editor.model.schema;
schema.register('product-info', {
allowWhere: '$text',
isInline: true,
isObject: true,
allowAttributes: [ 'product-id' ]
});
I then define the upcast and downcast converters, closely sticking to the tutorial code:
const conversion = this.editor.conversion;
conversion.for('upcast').elementToElement({
view: {
name: 'span',
classes: [ 'product-info' ]
},
model: (viewElement, { writer: modelWriter }) => {
const id = viewElement.getChild(0).data.slice(1, -1);
return modelWriter.createElement('product-info', { 'product-id': id });
}
});
conversion.for('editingDowncast').elementToElement({
model: 'product-info',
view: (modelItem, { writer: viewWriter }) => {
const widgetElement = createProductInfoView(modelItem, viewWriter);
return toWidget(widgetElement, viewWriter);
}
});
conversion.for('dataDowncast').elementToElement({
model: 'product-info',
view: (modelItem, { writer: viewWriter }) => createProductInfoView(modelItem, viewWriter)
});
function createProductInfoView(modelItem, viewWriter) {
const id = modelItem.getAttribute('product-id');
const productInfoView = viewWriter.createContainerElement(
'span',
{ class: 'product-info' },
{ isAllowedInsideAttributeElement: true }
);
viewWriter.insert(
viewWriter.createPositionAt(productInfoView, 0),
viewWriter.createText(id)
);
return productInfoView;
}
Expected behavior
The idea behind all this is that I need to support the custom <product-info> elements stored in user data in the backend. CKEditor, which is used by users to edit that data, should load these custom elements and transform them into a styled <span> for display purposes while editing. These should be treated as inline widgets since they should only be able to be inserted, moved, copied, pasted, deleted as a whole unit. A CKEditor plugin should allow the user to create new such elements to be inserted into the text, which will then also be <span>s in the editing view, but <product-info>s in the model, which should also be written back to the backend database.
In other words, I expected this to ensure a direct mapping between element <product-info product-id="123"></product-info> in the model, and <span class="product-info">123</span> in the view, to support inserting and moving of <product-info> elements by the user.
Actual result
In short, I seem to be unable to get CKEditor to load data containing <product-info> elements, and unable to retrieve the model representation of these custom elements for backend storage. All operations to insert data to CKEditor from source, or to retrieve CKEditor data for sending to the backend, seem to operate on the view.
For example, if I preload CKEditor contents either by setting the inner content of the element that is replaced with the editor instance, or inserting it like this:
const viewFragment = editor.data.processor.toView(someHtml);
const modelFragment = editor.data.toModel(viewFragment);
editor.model.insertContent(modelFragment);
I see the following behavior (verified using CKEditor Inspector):
When inserting the custom element, i.e. <product-info product-id="123"></product-info>, the element is stripped. It's not present in either the model nor the view.
When inserting the view representation, i.e. <span class="product-info">123</span> I get the representation that I want, i.e. that same markup in CKEditor's view, and the <product-info product-id="123"></product-info> tag in the model.
This is exactly the opposite of what I want! In my backend, I don't want to store the view representation that I created for editing purposes, I want to store the actual custom element. Additionally:
My UI plugin to insert new product info elements, uses a command that does the following:
execute({ value }) {
this.editor.model.change( writer => {
const productInfo = writer.createElement('product-info', {
'product-id': value
});
this.editor.model.insertContent(productInfo);
writer.setSelection(productInfo, 'on');
});
}
which also works as I want it to, i.e. it generates the product-info tag for the model and the span for the view. But, of course, when loading an entire source text when initialising the editor with data from the backend, I can't use this createElement method.
Conversely, in order to retrieve the data from CKEditor for saving, my application uses this.editor.getData(). There, these proper pairs of <product-info> model elements and <span> view elements get read out in their view representation, instead of their model representation – not what I want for storing this data back!
The question
My question is: what do I need to change to be able to load the data into CKEditor, and get it back out of the CKEditor, using the custom element, rather than the transformed element I want to show only for editing purposes? Put differently: how can I make sure the content I insert into CKEditor is treated as the model representation, and how do I read out the model representation from my application?
I'm confused about this because if the model representation is something that is only supposed to be used internally by CKEditor, and not being able to be set or retrieved from outside – then what is the purpose of defining the schema and these transformations in the first place? It will only ever be visible to CKEditor, or someone loading up the CKEditor Inspector, but of no use to the application actually integrating the editor.
Sidenote: an alternative approach
For a different approach, I tried to forgo the transformation to <span>s entirely, and just use the custom element <product-info>, unchanged, in both the model and the view, by using the General HTML Support functionality. This worked fine, since this time no transformation was needed, all I had to do was to set the schema in order for CKEditor to accept and pass through the custom elements.
The reason I can't go with this approach is that in my application, these custom components are handled using Angular Elements, so they will actually be Angular components. The DOM manipulation seems to interfere with CKEditor, the elements are no longer treated as widgets, and there are all manner of bugs and side effects that come with it. Elements show up fine in CKEditor at first, but things start falling apart when trying to select or move them. Hence my realisation that I probably need to create a custom representation for them in the CKEditor view, so they're not handled by Angular and preventing these issues.
Im new to wix code. I created a simple database with a title field and some other fields as a test.
I created a text edit box so i can type in a search text, and a grid object so i can see the results.
I connect the grid to the data base and all the fields such as image, description etc.
Then i run the preview mode without typing anything, the grid shows all the table elements.
When i type into the search, even if i type something that is in the table, the grid is blank, seems the filter doesnt work??
Anybody knows why???
here is my code attached to the page
import wixData from "wix-data"
$w.onReady(function () {
});
export function iAddress_keyPress(event, $w) {
filter($w('#iAddress').value); // iAddress is the name of the input text box
}
function filter(title) {
$w('#dataset1').setFilter(wixData.filter().contains('Title',title));
}
Simple. This is problem:
contains('Title',title)
Title - it's "name" of the column. You should use "field name" from collection, it's displayed when you press "manage properties" on some column - it's actually id.
In your case, "title" is correct field name (as it's default)
Your example will work with this:
contains('title',title)
I have a module called GridView in which i extend Marionette.ItemView like given below:
GridView.View = Marionette.ItemView.extend({
template: "#grid-view-template",
showGrid: function(gridName) {
....
},
....
}
Whenever a grid is to be displayed the caller extends GridView and invokes the showGrid method with a parameter (as given below)
//Module A code
var View = GridView.View.extend({
});
....
someregion.view.showGrid("GridA");
//Module B code
var View = GridView.View.extend({
});
....
someOtherregion.view.showGrid("GridB");
The problem is that when i show Grid A first and then click (on some menu) to show Grid B, i get a blank screen. If i come back to Grid A it shows the grid. If i show Grid B first, it shows the Grid but get a blank screen when Grid A is clicked. (i.e is only shows the grid which is invoked first). I can always go back to the grid that is shown first and is shows :-(
In a moment of frustration i did the following:
a) Removed the template from GridView
b) Added the template to each module
If I do this, it works as expected (code snippet below)
GridView.View = Marionette.ItemView.extend({
//template: "#grid-view-template", (COMMENTED OUT)
showGrid: function(gridName) {
....
},
....
}
//Module A code
var View = GridView.View.extend({
template: "#gridA-template",
});
....
view.showGrid("GridA");
//Module B code
var View = GridView.View.extend({
template: "#gridB-template",
});
....
view.showGrid("GridB");
When each View that extends GridView has its own template all works well - would appreciate it if someone could shed some light on this.
While this works for me, its a pain since each module that needs to show a grid needs to define its own template with a different ID
The template itself is pretty simple
<div id="grid-view-div3"></div>
thanks in advance
-joseph
Having a template in the base class and then extending views off it is definitely possible, as long as your subviews all use the same template. If the templates need to be slightly different ( not sure if you can change this ) then you can keep your base class, have and then in each subview, specify which template to use, like you are doing.
If there is a way to you to make a more general template and have all grids ( A, B, or C, ) use the same div ( from your template), then your first solution should work... it sounds like, while your putting the grid into the correct div that your template provides for module A with showGrid: function(gridName), that using the same function for modular B is looking for a different div
What exactly does showGrid: do?
I am using Kendo Numeric text box to display decimal values.I want to change the font color based on the user input.How to achieve this?
You Can do this in JQuery easily by changing the style on the change and spin event of the input:
On your numeric text box add the events:
$("#numerictextbox").kendoNumericTextBox(
{
change: onChangeOrSpin,
spin: onChangeOrSpin
});
Then in the event handler call:
function onChangeOrSpin()
{
var val = this.value();
changeFontColour(val);
}
function changeFontColour(val)
{
if(val < 5)
{
$("#numerictextbox, .k-input").css('font-family','Arial');
$("#numerictextbox, .k-input").css('font-style','italic');
$("#numerictextbox, .k-input").css('font-weight','bold');
$("#numerictextbox, .k-input").css('color','blue');
}
else
{
$("#numerictextbox, .k-input").css('font-family','Times New Roman');
$("#numerictextbox, .k-input").css('font-style','normal');
$("#numerictextbox, .k-input").css('font-weight','normal');
$("#numerictextbox, .k-input").css('color','black');
}
}
Here is a working fiddle: http://jsfiddle.net/loanburger/nwsw4yeq/
Update:
For multiple numeric inputs on the same page, use classes and add a different class to each input so you can distinguish between then when you need to change the colour. Then use a data attribute to find the correct one to change.
You cannot use the id because there are two parts to how kendo creates the widget:
The first part is the input for editing the value. This is the
one the user interacts with. This input will be given the class:
numerictextbox numericOne k-input
There is a second input of interest which is the one used to display the value after the widget looses focus this one gets the classes: k-formatted-value numerictextbox numericOne k-input
Neither of these inputs get an id and you don't want to use the native Kendo classes either so using a distinct class on each of your numeric widget controls, you can identify which colours to change since that class will get added to both inputs in the widget.
See here: https://jsfiddle.net/loanburger/4evy3tcg/
Is it possible to identify on a kendo UI grid which field was altered on a row edit?
Right now I am sending the entire row to the server that was changed. I would like to send
the request to the server to also include a variable holding the name
of the field that was edited.
Is something like that supported by kendo or
is there a work around for that?
This is not supported out of the box. However the grid API should allow this to be implemented. Check the edit and save events. In there you can listen to changes of the model instance which is currently being edit. Here is a quick example:
$("#grid").kendoGrid({
edit: function(e) {
e.model.unbind("change", model_change).bind("change", model_change);
}
});
function model_change(e) {
var model = this;
var field = e.field;
// store somewhere the field and model
}