Questions on Kendo UI for jQuery Forum

1 answer

61 views

Inline editing toolbar does not always hide

Hello, we found an issue where the inline editor toolbar does not always hide, and this can be reproduced on the demo site. With the toolbar visible, click on a button and then click away from the editor and toolbar and it will stay open.

Thanks,

Bob

Editor

answered on 11 Aug 2023

6 answers

440 views

Kendo UI Editor + autocomplete / auto suggest

Hi! I want to create an autocomplete plugin for the Kendo UI Editor, see attached mock-up. I would need to be able to:

On keyup, retrieve the current word being entered
If possible, display the suggestion list at cursor position (if not, could be displayed beneath editor)
When suggestion list is displayed, make arrow up/down change list selection and tab/enter/mouseclick to select
Replace the current word with selection from autocomplete

How much of this is achievable? (and how)
Is there a preferred way to create plugins for Kendo UI?

As an alternative; is it possible to attach any existing autocomplete plugin to the Kendo UI Editor?

Thanks in advance for any feedback!

Editor

answered on 23 May 2023

1 answer

99 views

Dynamicaly add items to a Form and use Editor

Hi everyone,

I have a group of cascading Dropdownlists. After selecting the values I want to create a Form and add the choosen values as items to the form.

Some Items need to be a WYSIWYG-Editor, so I try to add the kendoEditor as custom editor:

var data = {};
var items = [];

        sender.dataItem.content.forEach((content) => {
            data[content.key] = content.text;

            if (content.type == 'TextArea') {
                items.push({
                    field: content.key,
                    label: content.displayName,
                    editor: function(container, options) {
                        $("<textarea class='k-textarea' name='" + content.key + "' required data-bind='value: " + content.key + "'></textarea>")
                            .appendTo(container)
                            .kendoEditor();
                    }
                });
            } else {
                items.push({
                    id: sender.dataItem.name + '_' + content.key,
                    field: content.key,
                    label: content.displayName,
                    validation: { required: true},
                    editor: content.type
                });
            }
        });

        var validationSuccess = $("#validation-success");
        $("#contentForm").kendoForm({
            orientation: "horizontal",
            formData: data,
            items: {
                type: "group",
                label: sender.dataItem.displayName,
                items: items
            },
            validateField: function (e) {
                validationSuccess.html("");
            },
            submit: function (e) {
                e.preventDefault();
                validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Änderungen gespeichert");
            },
            clear: function (e) {
                validationSuccess.html("");
            }
        });

sender.dataItem looks like this:

{
      "name": "maintenance",
      "displayName":  "Wartungsseite",
      "content": [
      {
          "displayName": "Überschrift",
          "key": "header",
          "text": "Wartungsarbeiten",
          "type": "TextBox"
      },
      {
          "displayName": "Wartungstext",
          "key": "text",
          "text": "Wir arbeiten für Sie! <br /><br />Aktuell ist unser Kundenportal \"Meine WSW\" aufgrund von gesetzlichen Wartungsarbeiten für kurze Zeit offline.<br /><br />Gerne können Sie uns in der Zwischenzeit mit Angabe Ihrer Kunden- und Vertragskontonummer eine Email an <a href=\"mailto:meinewsw@wsw-online.de\">meinewsw(at)wsw-online.de</a> schreiben. <br /><br /> <br />Vielen Dank für Ihr Verständnis!<br /><br />Ihr WSW-Team",
          "type": "TextArea"
      }
    ]
}

Though the items are added to the form, the item for key "text" is a simple input of type text and no editor.

Kind regards

Timo Wied

Editor

Form

TextArea

answered on 19 May 2023

1 answer

68 views

Why does the editor keep adding <font> tags randomly

What is it the users are doing where <font> is being added to the editor, and how can I stop it from happening.

Example:

<font color="inherit" face="inherit" size="-1"

Editor

answered on 04 May 2023

1 answer

106 views

Editor button size

Is there a way to make the Editor toolbar buttons smaller? I'd like them to be small Bootstrap buttons.

Editor

answered on 24 Apr 2023

1 answer

106 views

Editor Tool

Hai,

I am facing issue with my editor.

1) Want to disable the editor while still being able to use the PDF and print function.

2) How to set mode as landscape and set name of file (.pdf) when I click "save as PDF".

3) When I click "print", my style doesn't display.

Please refer to the attached file, which is in .jsx format.

Editor

answered on 20 Apr 2023

1 answer

90 views

How to Add Planned Duration column and calculate duration using Planned End Date and Planned Start Date

I am new to KENDO UI Gantt Chart, using it for the first time, and facing lots of issues in adding new columns and calculations.

My client's requirement is to have a Duration column based on Planned Start Date and Planned End Date, column should be editable and when I change either PSD or PED duration should be updated, and vice versa that is if I update the duration my Planned End Date should also get updated accordingly.

Requesting help on this, I have attached the code.

Data Source

Editor

Gantt

answered on 19 Apr 2023

2 answers

186 views

Grid cell edit of type number value not showing in input, works if type changed to text

I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.

When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.

I checked everything but could not figure this one out.

var _dataSource = new kendo.data.DataSource({
                    data: localityGridDataSource,
                    sort: { field: 'nodeLocalitySequence', dir: 'asc' },
                    autoSync: true,
                    schema: {
                        model: {
                            id: 'localityCode',
                            fields: {
                                localityCode: { editable: false },
                                localityTitle: { editable: false },
                                nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
                                nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
                                nodeLocalityExternalNote: { type: 'text' }
                            }
                        }
                    }
                });

                _LocalitiesGrid.kendoGrid({
                    dataSource: _dataSource,
                    editable: true,
                    noRecords: true,
                    edit: onGridEditing,
                    remove: clearLocalitiesAudioMessage,
                    columns: [
                        { field: 'localityTitle', title: app.localize('Locality') },
                        { field: 'nodeLocalitySequence', title: app.localize('Order') },
                        { field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
                        { field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
                        { command: ["destroy"], width: '125px' }
                    ]
                });

answered on 14 Apr 2023

1 answer

48 views

Kendo Spreadsheet: Validating Authentication with Integrated App Before Data Loading and Triggering to Database

Dear Experts ,

I am currently working on a financial related project where I am using the Kendo Spreadsheet . However, I am facing an issue with regards to authentication and data validation.

Specifically, I would like to know if there is a solution in the Kendo Spreadsheet that can validate authentication with an integrated app before loading data and triggering data to the database.

I have researched this topic extensively, but I have not been able to find a clear solution. Therefore, I am reaching out to the community to seek your guidance and insights. Have any of you faced a similar issue? If so, how did you address it?

Any advice or solution that you can provide on this matter would be greatly appreciated. Thank you in advance for your help and expertise.