Hi,

I have created an offline application using React and as part of the functionality want to display RTF content in the viewer or editor which is being read from database.

Let me know if KendoReact Rich Text Editor can help me achieve this functionality. Please consider that this component should support offline application and should be part of the setup package.

For reference attaching the file having the RTF content.

Appreciate a quick response. Also if the works then let me know what would be the pricing for this license.

Regards,

Atif 

When compiling my SpFx web part I receive the following errors:

[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,252): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,268): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,278): error TS1005: ',' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,284): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,286): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,295): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,303): error TS1005: '>' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,311): error TS1005: '=' expected.
[08:59:40] Error - [tsc] node_modules/@progress/kendo-react-dialogs/node_modules/@progress/kendo-react-common/dist/npm/events/dispatchEvent.d.ts(15,339): error TS1109: Expression expected.
[08:59:40] Error - 'tsc' sub task errored after 2.75 s 
 exited with code 2

In the past I've updated the out of the box dispatch code (one line) but can't find where it was posted on this forum. Any assistance with this is greatly appreciated. Thank you

Currently these components don't have a react support yet. Therefore I have 2 questions:

1. When is the support for these 2 components planned?
2. How can I still implement them in my React project? (via a wrapper or something, an example of how to do it would be amazing and a huge help!)

Thanks in advance!

Dervis

Hi, I am trying to figure if it is possible to change the style of the paging buttons.

I using the Boostrap theme and it looks like that :

and I want to make it like this:

it is possible? which changes do I need to do on CSS?

Hi telerik team

I'm trying to implement the "add new row" function in a Grid >Editing >inline component.

I have followed the steps as you have in the documentation, but somehow, every time I trigger the "add" function it inserts new two rows with the same values and same id.

this is my code. Any ideas what I'm doing wrong? Thanks!

const GridComponent= () => {
    const editField = "inEdit";
    const [data, setData] = React.useState([]);
 
const functionToGetInfoInFromAPI{ setData(result.data)}
useEffect(()=>{
    functionToGetInfoInFromAPI()
}, [])
const generateId = (data) => {
    let highestId = 0;
    data.forEach((item) => {
        if(item.casystem_id > highestId) {
            highestId = item.casystem_id;
        }
    })
    return highestId+1;
}
 
const insertItem = (item) => {
   item.inEdit = false;
    item.casystem_id = generateId(data);
const newDataArray = [item, ...data];
return newDataArray;


};
const add = (dataItem) => {
dataItem.inEdit = true;
        const newData = insertItem(dataItem);
        setData(newData);

};
const itemChange = (event) => {
const field = event.field || "";
    const newData = data.map((item) =>
        item.casystem_id === event.dataItem.casystem_id
            ? { ...item, [field]: event.value }
            : item
    );
    setData(newData);
};

const addNew = () => {
const newDataItem = {
inEdit: true,
        Discontinued: false,
    };
    setData((oldData) => [newDataItem, ...oldData]);

};
 
export const MyCommandCell = props => {
    const {
        dataItem
    } = props;
    const inEdit = dataItem[props.editField];
    const isNewItem = dataItem.casystem_id === undefined;
    return inEdit ? <td className="k-command-cell">
        <button className="k-button k-grid-save-command" onClick={() => isNewItem ? props.add(dataItem) : props.update(dataItem)}>
            {isNewItem ? "Add" : "Update"}
        </button>
        <button className="k-button k-grid-cancel-command" onClick={() => isNewItem ? props.discard(dataItem) : props.cancel(dataItem)}>
            {isNewItem ? "Discard" : "Cancel"}
        </button>
    </td> : <td className="k-command-cell">
        <button className="k-primary k-button k-grid-edit-command" onClick={() => props.edit(dataItem)}>
            Edit
        </button>
        <button className="k-button k-grid-remove-command" onClick={() =>  window.confirm("Confirm deleting: " + dataItem.comp_nickname) && props.remove(dataItem)}>
            Remove
        </button>
    </td>;
};
                
<Grid
    data={data}
    onItemChange={itemChange}
    editField={editField}
    dataItemKey={"casystem_id"}
>
    <GridToolbar>
        <button title="Add new" className="k-button k-primary" onClick={addNew}>
            Add new
        </button>
    </GridToolbar>
    <Column field="casystem_id" title="id" editable={false}  />
    <Column field="nickname" title="Nickname"   />
    <Column cell={CommandCell} width="240px" />
</Grid>
 
 
 

Hello,

I have a simple dropdown and I update the value of the id in the code but the value is not reflected, the code is below, some help would be appreciated. (The dropdown I am trying ot update is regulation)

I'd like to work with nested data in a multi-step form. The data structure looks like this:

[
    {
        "id": "5ca67a4b-cbcf-4851-8dcb-2bf5c8f5b5d5",
        "createDate": "1621287160000",
        "location": { "id": 12, "text": "City1" },
        "symbol": "shadow",
        "name": "Komfort",
        "active": true,
        "bcon": false,
        "user": "cdunkersley0@pcworld.com",
        "bas": "3DGIP0XJDNCJNRJKGS8XD6NHPBTNKTJ608S0UJ01X5P",
        "description": "aliquam augue quam sollicitudin vitae consectetuer eget rutrum at lorem integer tincidunt ante",
        "channelData": [
            {
                "channel": {
                    "id": "43e185d0-2f8c-4975-9e73-40412c03a1f1",
                    "name": "Lichtschalter"
                },
                "datapoint": {
                    "id": "f74ba945-b0e3-43f7-a17e-918623fd03b8",
                    "bas": "g60hm6owrhk4hcbtul6l2icuw1wlkeg",
                    "tag": "bdya|98e5lc|1wa8qv7u",
                    "type": "float",
                    "description": "id ornare imperdiet sapien urna pretium nisl ut volutpat"
                }
            },
            {
                "channel": {
                    "id": "9b369139-a0ef-404e-b7ec-2b9ca3f4471e",
                    "name": "Verdunkelungsregler"
                },
                "datapoint": {
                    "id": "b64b5e00-ccfc-489a-ac03-02f9491d8ad6",
                    "bas": "5zz7jkh4gyems6fppt9v5wqdqgoe92r",
                    "tag": "x3vj|ttqqz9|qo6pxmks",
                    "type": "float",
                    "description": "odio donec vitae nisi nam ultrices libero non mattis"
                }
            }
        ]
    },
...
]

Hi.

This functionality from the docs not working  -

https://www.telerik.com/kendo-react-ui/components/grid/columns/column-menu/#toc-styling-the-column-menu-icon

I'm trying to style the filter column menu icon when the filter is on but nothing.

any help?