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.

According to here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.ui

You can (for example) replace a filter input with a textarea, however, the example as shown doesn't work because it's not bound to the filter value.

It will work if you add the data-bind attribute:

$(element).replaceWith("<textarea data-bind='value:filters[0].value'></textarea>");

Now the filter value actually gets passed to the server and populated when you call setOptions on the grid.

As there is no easy way to provide your own filter template, I'm trying to create a complex filter (a checkbox list for a flags enum) using replaceWith.

I have some checkboxes and use some JavaScript to set the value of an input that is bound using the data-bind attribute.

This all works fine and the filter value is passed to the backend as expected, and the input value is populated via setOptions when I reload.

For example:

$("#grid").kendoGrid({
    columns: [ {
        field: "flags",
        filterable: {
            ui: "testFilter"
        }
    } ],
    filterable: true,
    //...
});


function testFilter(e) {
    $(e).replaceWith(`
    <input type='checkbox' value='1' onclick='setFilterInput(this);' />
    <input type='checkbox' value='2' onclick='setFilterInput(this);' />
    <input type='checkbox' value='4' onclick='setFilterInput(this);' />
    <input type='checkbox' value='8' onclick='setFilterInput(this);' />
    <input id='filterInput' type='text' data-bind='value:filters[0].value' />
    `);
}

function setFilterInput(e) {
    var x = $(e).val();
    var c = $(e).is(":checked");
    var input = $("#filterInput");
    var val = parseInt(input.val(), 10);

    if (val === NaN) {
        val = 0;
    }

    input.val(c ? val | x : val ^ x);
    input.trigger("change");
}

The problem is that I need to know the current filter value when the testFilter function is called, so I can check the correct checkboxes when the grid is loaded. For example, this shows an empty value, even when the filter is already set:

function testFilter(e) {
    console.log("the current filter value is", $(e).val());
}

I can't get the value of the filter input because it's bound after the testFilter function is called.

How can I access filters[0].value from inside the testFilter UI function?

Preferably without having to go top-down via $("#grid").data("kendoGrid") etc.