Declined
Last Updated: 07 Oct 2022 15:48 by ADMIN
Athanasios
Created on: 27 Sep 2022 11:08
Category: Kendo UI for jQuery
Type: Bug Report
0
extend does not handle newly added options

There are several problems when extending a widget .
In this example we have extended the DropDownTree.

  1. Some properties like fillMode, no matter if we set in in the options or in the extended widget it self (kendoDemoDropDownTree)
    sets the value but never actually applies. Also the dataSource must be in the following format 

selectedProductId: [{ id: "a" }, { id: "c" }],

and  not

selectedProductId: ["b", "c"]

So some properties are supported and other that have been added later not.

 

I present you the source code (https://dojo.telerik.com/ewewERiD)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css">
</head>
<body>

<input id="dropdowntreeExt" data-bind="value: selectedProductId">
<script>
    (function ($) {
        var kendo = window.kendo,
            ui = kendo.ui,
            DropDownTree = ui.DropDownTree;

        var DemoDropDownTree = DropDownTree.extend({
            init: function (element, options) {
                DropDownTree.fn.init.call(this, element, options);

                $(element).parent().addClass("k-picker-solid k-picker k-rounded");
            },

            options: {
                name: "DemoDropDownTree",
                checkboxes: true,
                fillMode: "flat"
            }
        });
        ui.plugin(DemoDropDownTree);
    })(jQuery);


    var viewModel = kendo.observable({
        selectedProductId: [{ id: "a" }, { id: "c" }],
        //selectedProductId: ["b", "c"],
        products: [
            { id: "a", name: "Coffee" },
            { id: "b", name: "Tea" },
            { id: "c", name: "Juice" }
        ]
    });

    kendo.bind($("#dropdowntreeExt"), viewModel);

    //kendoDemoDropDownTree
    //kendoDropDownTree
    $("#dropdowntreeExt").kendoDemoDropDownTree({
        valuePrimitive: true,
        dataTextField: "name",
        dataValueField: "id",
        //checkboxes: true,
        dataSource: viewModel.products//,
        //fillMode: "flat"
    });


    alert($("#dropdowntreeExt").data("kendoDemoDropDownTree").options['fillMode']);
    </script>
</body>
</html>

(!) This also applies in the latest versions as well (2022R2 and 2022R3).


2. if you place the properties in kendoDropDownTree, everything works well and the datasource also accepts the format selectedProductId: ["b", "c"]

3. Many options, like autoWidth property, don't apply in extended widgets (i.e.  MultiSelect, DropDownList, DropDownTree etc).

4, In DropDownTree for the extended widget, valuePrimitive: true is not applicable. Instead of returning an array of the selected keys, it returns an array of the entire item.

 

Attached Files:
4 comments
ADMIN
Georgi Denchev
Posted on: 07 Oct 2022 15:48

Hi, Athanasios,

One approach that comes to my mind is to retrieve the values of the different dropdownlists in the search function that you have defined. After that you can store these values in an object and send them back to the server via AJAX request:

let ddl1 = $("#myddl1").data("kendoDropDownList");
let ddl2 = $("#myddl2").data("kendoDropDownList");
let ddl3 = $("#myddl3").data("kendoDropDownList");

let val1 = ddl1.value(),
      val2 = ddl2.value(),
      val3 = ddl3.value();

let reqParams = {
 profiles: val1,
 assignedTo: val2,
 anotherParam: val3
};

// Perform the ajax request and send the parameters

The basic idea is that you would collect the values from the fields the moment you click on the search button, instead of depending on the observable to keep constant track of the,

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Athanasios
Posted on: 06 Oct 2022 15:18
Dear Georgi,

Thank you for your immediate reply.

Your answers were to the point and solved many of our problems and simplified some of the processes.

You mentioned not mixing custom widget initializations and kendo.bind().
We have an example of how we bind the components of a search form let's say, contained in a div, with kendo.observable object.
Can you provide a recommended approach in order to send back to the controller all the arguments in one object just like we do now?

Below you can find an example in dojo

https://dojo.telerik.com/ikIWUpuY/5


Best regards,
Destounis Athanasios
Attached Files:
ADMIN
Georgi Denchev
Posted on: 05 Oct 2022 12:43

Hi, Athanasios,

Thank you for your patience.

The New Rendering Options

There is an extra step that is missing from our documentation when it comes to the newly rendering options(fillMoude, rounded, etc.) and custom widgets.

// The propertyDictionary array must be updated with the name of the custom widget in order to utilize the rendering options.

// Add the following line before the widget extension.
kendo.cssProperties.propertyDictionary["DemoDropDownTree"] = kendo.cssProperties.propertyDictionary["DropDownTree"];


        var DemoDropDownTree = DropDownTree.extend({

This is an oversight on our end and I will make sure the docs are updated with the above information, I apologize about the caused inconvenience.

The rest of the issues

The problems occur because the widget is being initialized twice in a different manner. The first time, the input is bound to a kendo observable and the second time the widget is initialized via the kendoMyWidget() method.

Some widgets(such as the dropdowntree, grid, multiselect, etc.) have a custom binder. The job of the custom binder is to ensure that the different bindings(such as value) are bound correctly to the element.

My advice would be to not mix custom widget initializations and kendo.bind() as it could lead to issues. Simply provide the values directly in the widget configuration:

      $("#dropdowntreeExt").kendoDemoDropDownTree({
        valuePrimitive: true,
        dataTextField: "name",
        dataValueField: "id",
        //checkboxes: true,
        value: ["a", "c"],
        dataSource: [
          { id: "a", name: "CoffeeCoffeeCoffeeCoffeeCoffeeCoffeeCoffeeCoffeeCoffee" },
          { id: "b", name: "Tea" },
          { id: "c", name: "Juice" }
        ]
        //fillMode: "flat"
      });

Alternative

Nevertheless, if you do wish to use the current approach then you can copy the default binder of the DropDownTree to the DemoDropDownTree like so:

// Again, insert this before the extend method is called.
kendo.data.binders.widget.demodropdowntree = kendo.data.binders.widget.dropdowntree;

This should also allow you to utilize the custom widget in the same manner as the regular one.

Dojo

Here's a dojo with the addition of the two code snippets:

https://dojo.telerik.com/@gdenchev/AgegovaS 

And a Dojo without the second snippet and without a kendo.bind:

https://dojo.telerik.com/@gdenchev/ibUjices 

I'll add all of the above information to the custom widgets documentation to hopefully avoid such problems in the future.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Georgi Denchev
Posted on: 04 Oct 2022 14:36

Hi, Athanasios,

Please accept my apologies about the delayed response and thank you for providing runnable code samples and screenshots to demonstrate the problems.

I'll need some time to look through the provided information and consult with the Devs. I'll message you back as soon as I have more information on the matter.

I apologize about the delay once again.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.