We have Kendo spreadsheet which is getting the data source set up in JQuery from an array of objects.

After setting up the data source, the comments are setup using range method to the cells.

Then checkboxes are added to the first column of spreadsheet based on the value present in the first column.

With these setup, when we run the page, and do mouse over to the cells with comments, then comments tooltip shows up and also the checkboxes added in the first column is replaced with the value which was assigned using the data source.

Please suggest us some solution for this issue.

-Poorani

Hi!

What is the best way to disable add/remove rows/columns/sheet in Spreadsheet for some user groups?

I know, that I can hide/disable controls for adding/deleting/renaming sheet. Is there more elegant solution?

Also I know, that I can disable individual cells (that prvents remove whole row/column end for last row/column aslo prevent adding another row/column) - so I can disable whole last row and last column (so I need at least one extra empty row). Is there more elegant solution?

Hi!

Is there a way to create 2 view for one Workbook (like Excel "Window/Side by side" https://support.microsoft.com/en-us/office/compare-two-or-more-worksheets-at-the-same-time-1deed3da-a297-4260-98aa-a7b2d90c81ab) in UI\Spreadsheet?

Hi. I have been struggling with a DropDownList that has an initial value from a controller attached to ng-model property but I cannot make the k-ng-model to be initially set based on the ng-model value.
The datasource is an object array, ng-model corresponds to a numeric value and the k-ng-model is an object selected from the first array.

The only way I could make it working is triggering a change event after dataBound and cascade event (I added a button in the plnkr link in order to do this) or listening to the second cascade event and update the property manually.

I'm including to my plnkr example: https://plnkr.co/edit/BjCEQ25nuQMMirST

1) Is there a non-hacky or better way to do this? Am I missing something?

2) During the testing, an additional question came up: Why is the cascade event called twice? 

<select kendo-drop-down-list
     id="document-type" 
     k-options="dropOptions"
     ng-model="user.documentTypeId"
     k-ng-model="user.documentType"
     class="glow"></select>

In my project the initial values come from an API that I can't modify its response, so I only have the key/value and I would like to get description/name at init in order to be used as a label content and validations.

Any help would be really appreciated.

Thank you.

Hello all,

I have two issues adding the upload widget inside the grid.

1. I am trying to create a grid with an upload widget as one of its columns and make user be able to upload a file using drag&drop functionality.

The problem is that I could select file by the select button but drag&drop functionality is not working.

Below is my source data.

html:

<div id="grid1wrapper" class="row">
	<div class="col-md-12">
		<div id="grid1" kendo-grid="grid1" k-options="gridOptions" k-data-source="dataSource"></div>
	</div>
</div>

javascript:

$scope.gridOptions = {
	height: 500,
    	editable: true,
    	resizable: true,
    	navigatable: true,
    	columns: [
    		{
    			field: 'filename',
    			title: 'File Name'
    		},
    		{
    			title: 'File',
    			field: 'file',
    			attributes: { "class": 'text-center' },
    			editor: $scope.fileUploader,
    			width: 200 
    		},
    		{ 
    			command: "destroy", 
    			title: " ", 
    			width: 40 
    		}]
    };

$scope.fileUploader = function(container, options) {
		const name = options.field; 
		$('<input type="file"  name="'+ name +'"/>')
			.appendTo(container)
			.kendoUpload({
				multiple: false,
				localization: {
		               dropFilesHere: "DropFilesHere"
		        }
			});
	};

2. After upload file and click another field to fill out the data, the uploaded file disappears and I cannot save file with save button.

Any idea?

Thank you.

I am expanding and collapsing groups of columns on a button click leveraging an inline headertemplate  like this example in a kendo UI grid. The table is complex with 4 core column groups, with each column groups expanding/contracting 12 columns.

I have this working functionally BUT

1. Whenever the + or the - button icons are clicked the CPU reaches 100% as a forced reflow occurs as Kendo and Jquery together in concert recalculate the style. See attached screenshot with performance profile. Is there any way to prevent this recalculation that is super expensive and and CPU intensive as It significantly downgrades the user experience. 
2. When the - icon is clicked  the header group column disappears. This appears to be a bug in show/hide column logic. I have worked around this by forcing a show on the element using a jQuery selector. Is this a known bug when there are a large number of grouped columns ? What might I be doing wrong ?

$("th[data-title=" + column_header + "]").show();

I would love a second pair of eyes on this code  groups/ungroups columns based on button click

function onExpClick(button, db_column_names, column_header) {
    
    var span = $(button).find("span");
    var grid = $("#grid").data("kendoGrid");

    if (span.hasClass("k-i-minus")) {

        span.removeClass("k-i-minus");
        span.addClass("k-i-plus");

        db_column_names.forEach(function(column_name){            
            grid.hideColumn(column_name.concat("_rec"));
            grid.hideColumn(column_name.concat ("_action"));
            grid.hideColumn(column_name.concat ( "_notes"));
        });

        $("th[data-title=" + column_header + "]").show();

    } else {

        span.removeClass("k-i-plus");
        span.addClass("k-i-minus");

        db_column_names.forEach(function(column_name){            
            grid.showColumn(column_name.concat("_rec"));
            grid.showColumn(column_name.concat ("_action"));
            grid.showColumn(column_name.concat ("_notes"));
        });


    }    
};

Thank You,

Rohit

The title says it all

How to get the data item from the node in the select event?

Hello,

In the TileLayout DEMO (https://demos.telerik.com/kendo-ui/tilelayout/index, script tags are used in the html code.
We want to create the script tag with the javascript code.

For example in the demo page is written:
<script id="views-chart-template" type="text/x-kendo-template"> <div id="views-chart" style="height:100%; width:100%"></div> </script>

When replacing this html code by the JS code :
<script>
     var s = document.createElement('script');
      s.id = "visitors-chart-template";
      s.setAttribute('type', "text/x-kendo-template");
  
      var d = document.createElement('div');
      d.id = "visitors-chart";
      d.style = "height:100%; width:100%";
      s.appendChild(d);
        
      document.getElementById("example").appendChild(s);
</script>

Then this works in Chrome and Microsoft Edge, but not in Firefox.

The HTML page is added in the appendix. When opening this in Firefox, you will see that the "Visitors" dashboard card content is not filled in. When opening this HTML page with Chrome, then the "Visitors" dashboard is okay.

Thanks in advance.