Questions on Kendo UI for jQuery Forum

1 answer

600 views

Combination of Dropdownlist and Multiselect with Checkboxes

I'm looking for a widget that is sort of a combination of a dropdownlist and a multiselect. I would like to be able to select multiple items from the dropdownlist but instead of having chips like in the multiselect, I want the dropdownlist to display either "All Selected", "Multiple Selected" (or a count), or the name of the option selected if only one is selected. I would ideally have checkboxes to the left of each item but it could just highlight the item like the current multiselect does. Is there a way to accomplish this with Kendo UI for JQuery?

DropDownList

MultiSelect

answered on 26 May 2023

1 answer

224 views

Pre-built CSS files sizes

Hi team,

I'm having a look at last kendo release and I notice that size of css pre-builts files are really really bigger than before (currently I'm using 2022 R2). Even if sass compile only the stylesheet of the button widget, I get a 553KB css file! Was 293KB in R2 2022.

Also, there are many css classes doubled by a counterpart beginning with .!k- like with:

.k-ratio-1 {
aspect-ratio: 1;
}

.\!k-ratio-1 {
aspect-ratio: 1 !important;
}

Can someone tell me what are all these css classes beginning with .!\k- ? And also why the stylesheet got so big?

Best regards,

Laurent.

General Discussions

answered on 26 May 2023

1 answer

299 views

Kendo ListView grouping issue

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

622 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

108 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

293 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

165 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

99 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

590 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

525 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