Questions on Kendo UI for jQuery Forum

0 answers

128 views

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

717 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

657 views

[Solved] 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

236 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

142 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

1 answer

127 views

Kendo Scheduler Month view to start 24th and end on 23 of following month

Hi, we have a requirement to customise the month view of the scheduler. We are developing a system for users to log their on-call hours and overtime. Our pay month starts on the 24th through to the 23rd of the following month.

Is there a way customise the month view so that if Jan is selected it displays from Jan 24th through to Feb 23rd... if Feb is selected it displays from Feb 24th to March 23rd etc.

When viewing a month any dates outside the range should be disabled so for example if viewing May 2023 where May 24th is a Wednesday and the week begins on Mondays then May 22nd and 23rd would be disabled and as Jun 23rd is a Friday June 24th and 25th would be disabled.

Many thanks

Attached are examples I was able to do using FullCalendar JS by AR Shaw but I would prefer to use Kendo.

Scheduler

answered on 16 May 2023

1 answer

200 views

TileLayout different colors for the header

Hello,

How do change the header color, for each cards like the picture,

Thanks

Christophe

TileLayout

answered on 15 May 2023

1 answer

189 views

Globally override or tap into all Kendo Grids

Hi,

We are looking into ways on how we can globally Html Sanitize/Purify anything that is rendered on a Kendo Grid. We are looking into the following options:

1. Create a custom widget that extends the Kendo Grid

2. Globally tap into databinding event

It would be awesome if the second option is possible.

Data Source

Grid

answered on 15 May 2023

1 answer

150 views

Does the latest kendo support bootstrap 2?

I am in the process of upgrading an old application that is using Kendo 2016.1.112 and I tried to upgrade to the latest but having some CSS issues. This application is also using Bootstrap 2.3.2, so I am curious if it is compatible at all before digging too deep into the issue.

Styling

answered on 15 May 2023

2 answers

643 views

[Solved] Custom Component Within form Field

Hello,
I use Kendo UI Angular,
I have a kendomulticombobox in a form, I use this combobox in several forms, and to avoid copying and pasting, I thought of setting up a separate component for that, and just call it each time I need.
It's to say that the form has a formgroup, and that this formgroup has several formcontrols, that I get when I submit the form.
So when I integrate my custom component, I get an error `ERROR Error: No value accessor for form control with name:` and yet it's the same formcontrol that I use before.

Has anyone experienced this kind of problem? Or do you have any solutions please? Thanks

Form

MultiColumnComboBox

updated answer on 15 May 2023