Kendo tree list - kendo switch

1 Answer 111 Views
Grid Switch TreeList
Reinaldo
Top achievements
Rank 1
Reinaldo asked on 01 Sep 2022, 11:52 PM | edited on 01 Sep 2022, 11:56 PM
Good afternoon, excuse my English is bad, I have a kendo treelist in which there is a boolean column with a kendo switch.
The problem is visual when interacting with my tree list the switch is painted several times as shown in the image:
 
this is the code i am using:

{
                    field: "IsModule", title: "@Mui.Is_Module",
                    //width: "70px",
                    editor: checkBoxEditor,
                    headerAttributes: { style: "text-align:center" },
                    attributes: { class: "text-center" },
                    template: "<input class='checkBoxEditor' #if (IsModule) { # checked='checked' # } # type='checkbox' disabled />"
                },

If anyone can give me an idea of ​​what I'm doing wrong, I'd be very grateful.
 

 dataSource: dataSource,
            excelExport: exportExcel,
            columnMenu: true,
            editable: "inline",
            cancel: function (e) {
                var grid = this;
                var rowUid = e.container.data("uid");
                setTimeout(function () {
                    grid.element.find("tr[data-uid='" + rowUid + "'] .checkBoxEditor").kendoSwitch({
                        messages: {
                            checked: "@Mui.Yes",
                            unchecked: "@Mui.No"
                        }
                    });
                });
            },
            dataBound: function () {
                this.tbody.find(".checkBoxEditor").kendoSwitch({
                    messages: {
                        checked: "@Mui.Yes",
                        unchecked: "@Mui.No"
                    }
                });
            },


function checkBoxEditor(container, options) {
    $('<input type="checkbox" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoSwitch({
            messages: {
                checked: "@Mui.Yes",
                unchecked: "@Mui.No"
            }
        });
}

1 Answer, 1 is accepted

Sort by
1
Nikolay
Telerik team
answered on 06 Sep 2022, 11:56 AM

Hello Reinaldo,

The Switch widgest are duplicated in edit mode as the custom Switch is added on top of the already existed Switch. I recommend hiding the original one when the custom one is initiated:

function customEditor(container, options) {
            $(container).find(".customClass").hide();
            $('<input type="checkbox" name="' + options.field + '"/>')
              .appendTo(container)
              .kendoSwitch({
              onLabel: "YES",
              offLabel: "NO"
            });
          }

Dojo: https://dojo.telerik.com/AkeYOYEb

Let me knwo if you have any questions.

Regards,
Nikolay
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.

Tags
Grid Switch TreeList
Asked by
Reinaldo
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or