Hello,

What should I write to get the value inside the cell? I run in angular, I want to assign the cell value I selected to the variable.

  @ViewChild('spreadsheet') spreadsheetEl!: ElementRef;

  constructor(private hostEl: ElementRef) {}

  ngAfterViewInit() {
    kendo.jQuery(this.spreadsheetEl.nativeElement).kendoSpreadsheet({
           columns: 3,
           //rows: 10,
           sheetsbar: false,
           toolbar: {
            home: [
              "open", "exportAs",

              {
                  type: "button",
                  text: "Material select",
                  showText: "both",
                  icon: "k-icon k-i-cog",
                  click: function(e: any) {



                    var sheet = this.spreadsheetEl.nativeElement.activeSheet();
                    var range = sheet.selection();
                  }
              }
          ],
            insert: false,
            data: false,
            },
...

thank you

regards

Hi,

I need to extend the kendo form dynamically. I created a dojo for demonstration:

https://dojo.telerik.com/IDElitox

In the first form, user should be able to click "Add" button and create a new pair of field at the bottom of the form, which shouldn't affect previously filled fields. So instead of 1, the user can submit more than 1 header pair. 

Is it possible? How can I do that?

The number of inputs is ambiguous so I didn't think of any better solution. If there is a dedicated tool for this purpose, please let me know.

Regards,
Umutcan

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

Hi all,

We are using kendo ui jquery for angularjs buttons in our system like this:

<kendo-button id="cancelUpdateBtt" class="k-primary" on-click="cancel()">{{"cancel" | tr}}
            </kendo-button>
            <kendo-button id="detailsBtt" class="k-primary" on-click="Details()">{{'details' | tr}}
            </kendo-button>

I am trying to update our system to latest kendo ui for JQuery release (R1 2022), and all of the sudden our button internationalization using our custom translation angularjs pipe (tr in upper example) is not working any more. Looks like button content gets encoded, so my angularjs not working anymore. I tried using it without pipe, and same issue occurs - so pipe is not a problem.

I can confirm that issue was caused in latest kendo ui version and with following steps.

When I use current version of kendo ui like in following dojo: https://dojo.telerik.com/ABOvameJ/2 
issue is clearly visible - and value is not displayed correctly. (instead of seeing "Something new" we see angularjs biding encoded)

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

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

Hi,

I'm using client-side filtering after the kendo grid is rendered and I wanted to export to excel the filtered data in some situations.

I tried using $("#reportResultsGrid").data("kendoGrid").dataSource.view() and that gives me the current object of what I want to export to excel, but I can't figure out how to use the saveAsExcel() method to export what's in that current view() in the kendo grid. I can console log it, but I just can't figure out how to export the filtered data. 

My goal originally was to create a custom button in excel toolbar and use that to export the data but, now I'm just using a stand alone button at the top of the page for testing purposes. Ideally I would like to create a button in the excel toolbar that just exports whatever is in the current kendo grid view.

Below is as far as I've figured out.

 $('#testSaver').on("click", function () {
    $("#reportResultsGrid").data("kendoGrid").dataSource.view()
    console.log(clientSideFilterData);

});

I use Kendo UI for build my single page web application. My application will add a tab when user click some menu if this menu will not in a tab list. I have a problem with my application when i use app in a period of time, the app gradually slow and slower. I found the reason is because when i add a new tab (with some kendoUI widget), the document will create some sub element in the end of document and i close the tab the widget in tab removed but the sub element will alive so the size of document increase by time used. 

Example 1 sub element:

<div class="k-list-container k-popup k-group k-reset" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b-list" data-role="popup" style="display: none; position: absolute;" aria-hidden="true"><div class="k-group-header" style="display:none"></div><div class="k-list-scroller" unselectable="on"><ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="pfe6ef2c-9926-45e3-ac6d-8dcb5bb0855b_listbox" aria-live="off" data-role="staticlist" role="listbox"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" aria-selected="false" data-offset-index="0" id="dd8303f9-e1d7-4a3a-8e57-fb1478a5d9e0">20</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">35</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">50</li><li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">100</li></ul></div><div class="k-nodata" style="display:none"><div>No data found.</div></div></div>

Is there any solution to when remove the widget from document, the sub element removed too?

Hi, 

I've recently updated my KendoUI For jQuery library to the latest version, 2020.1.114. The update has introduced a bug into my code however. In the Release History, https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2020 it lists the following statement as a bug fix for the Button widget:
"Button remains highlighted when clicking and dragging"

A particular feature in my project makes use of setting the active state of a kendo button to active to create the equivalent of a "button checkbox". Except now, once I mouse-away from the button I just made active, its active state is removed.

I've created a Dojo example https://dojo.telerik.com/AKUdABat/7. Click the primary button and note that both buttons are set as active, then mouseout. The primary button's active state is removed, and Im confident its due to the button widget fix I previously mentioned.

Please advise on how i can prevent this from happening, or another way of setting the active state of a clicked button without it being reverted.

Thanks in advance,
Grant

Does the css data binding work with kendo buttons? 

<button type="button"
aria-label="Thumbs up"
data-role="button"
data-bind="events: { click: thumbsUp }, css:{k-state-active: isThumbsUp}">
<i class="icon-thumbs-up icon-large"></i>
</button>