Hi,

I have tried this every way I can think of. I am having problems with setting data-bind while iterating an array.
Made a small demo below, the actual code is much more complex and that is the reason I need to use the for loop in order to get the correct result.

How can I set the data-bind property on the input correctly?

  <div id="container">
    <div id="weekdays" data-template="weekday" data-bind="source : this"></div>
  </div>
          
  <script id="weekday" type="text-x-kendo-template">
     <div>
    # for (i = 0; i < data.lines.length; i++) { #
    	<h2>#: data.lines[i].day #</h2>
    	<input type="text" data-bind="value: data.lines[i].quantity" />
    # } #
    </div>
  </script>
  <script>
  $(document).ready(function () {
      var vm = kendo.observable({
        lines: new kendo.data.ObservableArray([
           { id: 123, day: "Monday", quantity: 5 },
           { id: 322, day: "Tuesday", quantity: 2 }
        ])
  });
  kendo.bind($("#container"), vm);
 });
</script>

Hi,
I have an observable array of observables which is linked to a kendo grid as datainput. I am trying to sort it by clicking on column header. I have made the sortable : true. But the issue is when the array is 

self.array = ko.observableArray([{ Cabin: 'eco' }, { Cabin: 'taper' }]); The sorting works

But If the array is 
self.AllocArray = ko.observableArray([{ Cabin: ko.observable('eco') }, { Cabin: ko.observable('taper') }]); then the sorting doesn't work.

Is there any possible solution around this?

Many thanks,

Jason

Hi, 

within the columns definition of my grid I want to be able to call a function as the template.

currently I have:

 {field: 'recommended', title: 'Recommended', template: '# if(recommended)' + '{# <span class=\"glyphicon glyphicon-ok\"></span> #}' + 'else{# <span class=\"glyphicon glyphicon-ok\"></span> #}#'},

and I would like to have

 {field: 'recommended', title: 'Recommended', template: generateFlagTemplate(recommendedFieldValue)},

defining the function as

function generateFlagTemplate(field){
    return kendo.template("# if (field)" + "{# <span class=\"glyphicon glyphicon-ok text-success\"></span> #}" + "else {# <span class=\"glyphicon glyphicon-remove text-grey\"></span> #}#");
}

how can I pass the 'recommended' field value to the function?

I would like to have the function because the same template will be used in different places and saves me from having to duplicate my code.

thanks

This was my original reference for aligning the aggregates in their respective columns in the groupHeaderTemplate.

https://docs.telerik.com/kendo-ui/knowledge-base/grid-align-group-header-with-cells

A requirement is to have the grid have an editable layout, i.e., hide/show columns, be grouped differently, rearrange columns, etc.

By default, the grid is working properly, following the reference above.

But once you do edit the layout (e.g., hiding the tasksCompleted column) of the grid, the groupHeaderTemplate no longer works properly. As is expected because the column or table td's are defined and fixed.

Any ideas on how to properly set up the groupHeaderTemplate is much appreciated.

Here is the updated Kendo UI Dojo link as reference of the issue: https://dojo.telerik.com/IYuGOraj/2

The kendo template function injects the literal " value into the DOM instead of " when the html encoding template format is used.  For example:

var template = kendo.template("<div id='box'>#= firstName #</div>");
var data = { firstName: "<b>Todd'\" &amp; &quot; &#34; &#x00022; </b>" };

results in the following value being inserted into the DOM:

<b>Todd'" &amp; " " " </b>

Why are the 3 html entity representations of double quotes translated back to the double quote literal?  Is there a way to avoid this?  If not, what other html entities behave this way?  

http://jsfiddle.net/6fcz2e9j/1/

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>

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
    });
}

We have two grids in our site that have a custom command button declared similarly to this:

columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit")).Width(60);

unaudit is a javascript function.  Works ok but inside unaudit we have to jump through hoops to get the data we want, the id of the record in that grid row.

        var id = this.dataItem($(e.currentTarget).closest("tr")).ID;

Is there a way to access the data object and pass just a field to the javascript function?
example (not working)

columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit(data.ID)")).Width(60);

Help is appreciated.  Thanks.  Note that if i am required to use a client template column instead, i do know how to do that but was hoping i wouldn't have to do that.

Hi, 

I am trying to implement simpler version of tilelayout demo (small dashboard) in quite old angularjs application. 

Following examples in demo I wanted to replace simple hardcoded value of conversion-rate (9%) with data from my service. 

Html is correctly rendered but not updated when vm.myRisk changed..

Here are relevant pieces of code that I have:

Controller:

my html is very simple and has only placeholder for the widget and controller declared using standard controller As syntax..

Thanks

I am looking to create a collection of quizzes for our HR training.  From the database side i would like to send in a list of questions and answers in a JSON object.  From that JSON, I want to dynamically create the dom for the web quiz using templates in kendo for jquery.  I found some articles and read up a bit about templates in telerik and thought that the template works for what I need.  I found an example on the forums and have modified it try to add the radiobutton group for multiple choice question or true\false and Yes\No questions.  So in my example, I can't get the radio buttons to show in the nested template.  What am I missing with regards to the radio template only showing as an object but not rendering the actual radio buttons.  

https://dojo.telerik.com/iwuQaJUz