Questions on Kendo UI for jQuery Forum

3 questions

1 answer

319 views

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

ActionSheet

Application

AutoComplete

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

144 views

TreeList with MultiSelect values on a cell

Hi there,

I would like to use the MultiSelect to set the value of a cell in a TreeList.

My code almost works, but once the MultiSelect closes the values displayed in the grid are not what I expected.

I tried using a template to display selected values, but it doesn't look right.

Here is a dojo link https://dojo.telerik.com/OdAFErap/11 and below the code of that dojo

Thanks in advance,

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
            <div id="example">
            <div id="treelist"></div>
              
            <script type="text/kendo" id="alertsTemplate">
               # if (Alerts) { #
              <ul>
                # for(var i = 0; i< Alerts.length; i++){ #
                <li>#: Alerts[i].name #</li>
                # } #
              </ul>
              # } #
            </script>

              
            <script>
              $(document).ready(function () {
                
                var AlertsList = [
                  { code: '9', name: 'Black' },
                  { code: '5', name: 'Red' },
                  { code: '5', name: 'Yello' },
                  { code: '3', name: 'Blue' },
                  { code: '1', name: 'Green' }
                ];

                var alertsEditor = (container, options) => {
                  $('<input name="Alerts">')
                      .appendTo(container)
                      .kendoMultiSelect({
                        dataValueField: "code",
                        dataTextField: "name",
                        dataSource: AlertsList
                      });
                };
                
                    var dataSource = new kendo.data.TreeListDataSource({
                      data: [
                          { id: 1, Name: "Daryl Sweeney", Alerts: null, parentId: null },
                          { id: 2, Name: "Guy Wooten", Alerts: null, parentId: 1 },
                          { id: 32, Name: "Buffy Weber", Alerts: null, parentId: 2 },
                          { id: 11, Name: "Hyacinth Hood", Alerts: null, parentId: 32 },
                          { id: 60, Name: "Akeem Carr", Alerts: null, parentId: 11 },
                          { id: 78, Name: "Rinah Simon", Alerts: null, parentId: 11 },
                          { id: 42, Name: "Gage Daniels", Alerts: null, parentId: 32 },
                          { id: 43, Name: "Constance Vazquez", Alerts: null, parentId: 32 },
                          { id: 46, Name: "Darrel Solis", Alerts: null, parentId: 43 },
                          { id: 47, Name: "Brian Yang", Alerts: null, parentId: 46 },
                          { id: 50, Name: "Lillian Bradshaw", Alerts: null, parentId: 46 },
                          { id: 51, Name: "Christian Palmer", Alerts: null, parentId: 46 },
                          { id: 55, Name: "Summer Mosley", Alerts: null, parentId: 46 },
                          { id: 56, Name: "Barry Ayers", Alerts: null, parentId: 46 },
                          { id: 59, Name: "Keiko Espinoza", Alerts: null, parentId: 46 },
                          { id: 61, Name: "Candace Pickett", Alerts: null, parentId: 46 }
                        ],
                        schema: {
                            model: {
                                id: "id",
                                expanded: true,
                              	fields: {
                                  	Name:   { type: "string", editable: false },
                                  	Alerts: { type: "string", editable: true }
                                }
                            }
                        }
                    });

                $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        height: 540,
		                		batch: true,
                        editable: "inline",
                        columns: [
                            "Name",
                            { 
                              field: "Alerts",
                              editor: alertsEditor,
                              template: $("#alertsTemplate").html()
                            },
                            { command: ["edit"] }
                        ]
                    });
                });
            </script>
        </div>


    

</body>
</html>

answered on 02 Jul 2021

0 answers

1.2K+ views

Uncaught Type error: m is not a function

I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:

1. A dropdownlist is clicked on in the initial grid,

2. The modal is opened afterward (each row has its own button)

3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens

Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid,
this error is thrown:

Uncaught TypeError: m is not a function
at init.editor (kendo.all.min.js:54)
at init.refresh (kendo.all.min.js:54)
at new init (kendo.all.min.js:54)
at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js:2)
at R.fn.init.each (jquery.min.js:2)
at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
at init.editCell (kendo.all.min.js:59)
at init.tap (kendo.all.min.js:59)
at init.trigger (kendo.all.min.js:25)

This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.

Any ideas on where this console error comes from?

Here is a snippet of the grid being generated in the modal:

$("#account-tracking-grid").kendoGrid({
columns: [
{
field: "accountName",
title: "Account Name",
editable: function () { return false },
width: "200px",
},
{
field: "accountNumber",
title: "Account Number",
editable: function () { return false },
width: "200px"
},
{
field: "Balance",
title: "Balance",
width: "40px",
template: "<span>#=getIcon(Balance)#</span>",
editor: dropdownlist,
headerTemplate: "<span class='verticalText'>Balance</span>"
}
],
editable: "incell",
edit: function (e) {
var container = e.container;
var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
if (dropDownList) dropDownList.open();
},
dataSource: {
transport: {
read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
}
}
});
}

function dropdownlist(container, options) {
$('<input id="account-dropdownlist"/>')
.appendTo(container)
$("#account-dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
change: onChange,
open: onOpen
});
}