How to persist expanded rows beyond one level?

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/persist-expanded-rows

I have used documentation found at the above link and it is working to a point. However, I have a a grid that had 4 levels. 

Level 1 (each row has drop down)

Level 2 (each row has drop down)

Level 3 (each row has drop down)

Level 4

Can anyone explain or show me how you would keep all rows expanded if you have multiple levels?

The documentation above will keep only expanded rows opened from Level 1. But, I need to keep level 2 and level 3 rows expanded if they are open.

I do not understand how to do this likely because I am so fresh to JS, Jquery, and telerik controls in general.

Thanks!

Just trying to test out Kendo and as a first test making a grid using remote json , i'm not able to make it work.

If I just return pure json array holding the data array as only returned value , and not defining data or total in the schema , then it works.

But I need to include data value of "total", and the returned grid array in "items" - I'm not getting any entries in the Grid.

schema: {
   type: "json",
   data: "items",
   total: "total",
.....

I do get the total value from the response , but no data in the grid from the "items"  and no error messages

If I define data: as
data: function (response) {
   console.log(response.items);
  return response.items;
}
Then i see the grid data in my response.items , but not rendered in the Grid

as : [{"OrderID":762884,"Freight":11581,"Ship .........

Thank you for your help here

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