Questions on Kendo UI for jQuery Forum

1 answer

308 views

Hi there,

We are using the Kendo ListView control. In this control we are trying to use a grouping option.

While using this option we are facing a few issues listed below.

1. We are making a field with hyperlink, that means if a user clicks the hyperlink, it should redirect or get specific details. Now that fails here.

2. Also we are making a hyperlink which is grouped by one item, If the user clicks any one specific item, that should open in a new tab. Again we are not able to get that specific item position.

3. And we need to group by 2 items. For example, We have 1 set of results and with that we need to group by 2 fields like one by User & Department.

We are using the Tojo link below for our reference.

https://demos.telerik.com/kendo-ui/listview/grouping

ListView

answered on 25 May 2023

6 answers

640 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

0 answers

109 views

jQuery Ui Grid to .Net Core - Dates

I have a jQuery UI Grid with a .Net MVC Core backend.
The record data has a nullable date in it and everything is displaying fine ( ive added abrdiged working code below)
I use the popup edit to edit the record which contains a nullable date Kendo sends the date as :

Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)

The Model Binder in MVC does not recognise this as a date and reports a model binding error:
"The value 'Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)' is not valid for MortgageExpiry."

Theres alot of talk about dates, formats and parsing etc.. in documentation but I'm confused as to what Im actually meant to do.
I know C# dosnt see this as a date when trying to bind it to Model , I understand that but what am I meant to do to fix it.
Can I modify the outgoing format of the date before its sent to server or is there something else I should be doing?

function populateProductsTable() {
        var applicationId = $("#MortgageApplicationId").val();
        var gridDataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: "/api/ApplicationProductsApi/Read/" + applicationId,
                    dataType: "json"
                },
                create: {
                    url: "/api/ApplicationProductsApi/Create",
                    dataType: "json",
                    type: "POST"
                },
                update: {
                    url: "/api/ApplicationProductsApi/Update",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: "/api/ApplicationProductsApi/Delete",
                    dataType: "json",
                    type: "POST"
                },
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors",
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false },
                        productProvider: { type: "string", validation: { required: true } },
                        productTypeId: {type: "number", validation: { required: true } },
                        productName: { type: "string" },
                        mortgageExpiry: { type: "date" },
                    }
                }
            }
        });
        /* eslint-enable */

        $("#productGrid").kendoGrid({
            toolbar: ["create"],
            editable: "popup",
            dataSource: gridDataSource,
            filterable: true,
            sortable: true,
            pageable: false,
            columns: [{
                command: ["edit"], title: "&nbsp;",
            }, {
                field: "id",
                filterable: false,
                hidden: true,
            }, {
                field: "productProvider",
                title: "Provider"
            }, {
                field: "productTypeId",
                title: "Type",
                editor: dropDownProductType, template: "#=productTypeIdName#"
            }, {
                field: "productName",
                title: "Name"
            },{
                field: "mortgageExpiry",
                title: "Expiry",
                format: "{0:dd/MMM/yyyy}"
            }, 
            ]
        });
    }

Sat May 27 2023 00:00:00 GMT+0100 (British Summer Time)
Sat May 27 2023 00:00:00 GMT+0100 (British Summer Time)

Grid

updated question on 23 May 2023

1 answer

313 views

How do I do a multi line chart tooltip (MVVM, if that matters)?

I'm trying to get a chart to display a multi line tooltip. I've seen elsewhere that I'm supposed to put a <br/> in it for new lines, but that doesn't seem to be working. The text from the tooltip template is being run through kendo.htmlEncode, which translates the <br/> into <br>. which of course doesn't provide the wanted line break.

Here is a dojo.

Charts

ToolTip

answered on 19 May 2023

1 answer

172 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

0 answers

104 views

Refreshing 2 grids with a single update

I have 2 grids on a single page...the upper grid does not have an update capability, but the bottom grid does via a pop-up window. When we update the pop-up window we are able to refresh the bottom grid via an Ajax call, but the top grid is not being updated unless we do a full refresh of the page.

We are using the data-ajaxurl="@Url.Action("ACTION", "CONTROLLER")". I need to perform another ajax call, how can I do this?

Grid

asked on 18 May 2023

1 answer

628 views

Remove files from a Kendo UI Upload programatically

Hi Guys,

Is there a quick way to remove files from a Kendo UI Upload plus fire the corresponding remove request on the server? I have a Kendo UI Form where I added the Kendo Upload. When the user clicks the Clear button in the form, the files are removed from the list however the remove request is not fired thus, the uploaded files are still in the server.

This is the code snippet on how I have added the kendo upload to the kendo form:

$('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "/api/upload/save",
                        removeUrl: "/api/upload/remove"
                    },
                    validation: {
                        allowedExtensions: [".jpg", ".gif"]
                    },
                    upload: (e: kendo.ui.UploadUploadEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    remove: (e: kendo.ui.UploadRemoveEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    success: (e: kendo.ui.UploadSuccessEvent) => {
                        this.enableSubmit(e.operation === 'upload');
                    }
                })

I have tried using the removeAllFiles() or removeFile() but doesn't seem to do any request calls.

Hoping to hear from you soon.

Kindest regards, Ruby.

Form

Upload

answered on 18 May 2023

1 answer

559 views

Remote .Net Core - TypeError: cannot create property 'Id' on string

I get this error when trying to bind remote data from a .Net Core endpoint to jQuery UI Grid.

Im hitting a .Net Core endpoint which returns a List<MyModel>

[HttpGet("/api/[controller]/[action]/{applicationId}/")]
public async Task<IActionResult> GetProducts(int applicationId)
{
    //return List<MyModel>
    var products = await this._mortgageApplicationService.GetMortgageApplicationProducts(applicationId);
    var json = JsonConvert.SerializeObject(products);
    return Ok(json);
}

In jQuery UI i have following javascript method which tries to display the json results.
Note I recreated the products json object locally and it worked as shown in the method below.
Why doesn't it work from the remote end point?

function getReportData() {
    var applicationId = $("#MortgageApplicationId").val();
    var url = "/api/MortgageStageProductsApi/GetProducts/" + applicationId;

    //This does NOT work
    $("#productGrid").kendoGrid({
        dataSource: {
            transport: {
                read: url,
                dataType: "json"
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });


    //This works using json object created using the same json returned
    var products = [
        {
            Id: 1,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        },
        {
            Id: 2,
            MortgageApplicationId: 2171,
            ProductProvider: "Ulster Bank",
            MortgageTermYears: 5,
            MortgageTermMonths: 10,
            MortgageRepaymentType: 1,
            ProductTypeId: 1,
            ProductTypeName: "Fixed",
            MortgageProductTermYears: 5,
            MortgageExpiry: "2025-01-21T00:00:00",
            MortgageLenderRate: null,
            MortgageAdviceFee: 120,
            ProductBrokerCommissionPercentage: 10,
            ProductBrokerCommissionFlatFee: null,
            DocumentsUploadedList: []
        }
    ];

    $("#productGrid1").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        ProductProvider: { type: "string" },
                        ProductTypeName: { type: "string" },
                        MortgageExpiry: { type: "string" }
                    }
                }
            },
            pageSize: 20,
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false
        },
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [{
            field: "Id",
            filterable: false
        }, {
            field: "ProductProvider",
            title: "Provider"
        }, {
            field: "ProductTypeName",
            title: "Product Type"
        }, {
            field: "MortgageExpiry",
            title: "Expiry"
        }
        ]
    });
}

Data Source

Grid

answered on 18 May 2023

1 answer

166 views

FileManager - Custom Command Works Once, Fails After

I am running the current version, 2023.1.425.

The control is actually first created through asp.net core MVC, however I'm using the CustomCommand method as such. Please note the window is already initialized prior to this. Upon the first use of my custom "Tags" context menu, the window opens and I'm able to carry out operations as expected. After closing the window, and attempting to open it again, I get an error in the browser console.

var filemanagerNS = kendo.ui.filemanager;
        filemanagerNS.commands.MyCustomCommand = filemanagerNS.FileManagerCommand.extend({
          exec: function(){
                 var FileIDs = Array();
                 var i = $('#filemanager').getKendoFileManager().getSelected();
                 $(i).each(function(){
                     if (!this.isDirectory)
                        FileIDs.push(this.ID);
                 });

                if (FileIDs.length > 0) {
                    // we'd call up our modal here populated with some kind of tag manager
                    $.post( "/Tags", { "FileIDs": FileIDs }, function( data ) {
                        $("#frmmodal").html(data).data("kendoWindow").open();
                    });
                 }
          }
        });

This works the first time, but attempting to open the window again results in the following error:

Uncaught TypeError: n.filemanager.commands[t] is not a constructor
    at init.executeCommand (kendo.all.js:318819:21)
    at init.trigger (kendo.all.js:318819:21)
    at init.action (kendo.all.js:318819:21)
    at init._onSelect (kendo.all.js:318819:21)
    at init.trigger (kendo.all.js:318819:21)
    at init._triggerEvent (kendo.all.js:318819:21)
    at init._triggerSelect (kendo.all.js:318819:21)
    at init._click (kendo.all.js:318819:21)
    at HTMLUListElement.dispatch (jquery.min.js:3:12445)
    at r.handle (jquery.min.js:3:9174)

As a result, the component stops functioning entirely, not just the context menu -> window method that seems to be causing this.

FileManager

answered on 17 May 2023

0 answers

120 views

series labels: { visible: 'false' } still displays label

TLDR: Never mind, user error

It seems that whether I specify labels: { visible: 'false' } or labels: { visible: 'true' }, the label is always displayed. I would have expected that specifying false would not cause the label to display. Specifying another option, such as labels: { format: '{0:C0}' }, does not cause the label to display.

Here is a dojo demonstrating the issue. Note that both the second and third bars display labels, even though the second bar has visible set to false. The first bar, specifying a format for the label, does not have its labels displayed.

Charts

updated question on 16 May 2023