This is a migrated thread and some comments may be shown as answers.

Click "selection checkbox" from button outside of grid

1 Answer 931 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Veteran
Richard asked on 30 Mar 2021, 06:19 PM

I am using the Selection Checkbox feature of a Grid.  For reference, built from this demo: https://demos.telerik.com/kendo-ui/grid/checkbox-selection

So I have a grid like the following:

$("#rgrid").kendoGrid({
        dataSource: GridRepoDataSource(),
        sortable: true,
        persistSelection: true,
        change: onChange,
        columns: [
            {
                selectable: true,
                width: "50px"
            },
            {
                field: "name",
                title: "Name"
            },
            {
                field: "description",
                title: "Description"
            }
        ]
    });

What I'm trying to do is after the grid has been loaded I have a button outside of the grid.  When I click on the button, I want to select the check-box in the row based on the name.  And hoping that when I do click on that button, hoping that the OnChange event still fires.

Thanks,

Richard

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 02 Apr 2021, 09:23 AM

Hi Richard,

A possible approach to achieve the desired result is to find the cell that contains the respective text using jQuery. Then, you could find the closest row. Next, you could search for an element in the row that contains the 'k-checkbox' class. You could select the row using the Grid select method. You could check the checkbox using jQuery prop(). Below is an example of such implementation:

 function checkName(){
        var grid = $('#grid').data('kendoGrid')
        var name = $('#checkboxName').val()
       
        if(name != ''){
          var cell = $('#grid td:contains("'+name+'")')
          var row = $(cell).closest('tr')
          var checkbox = $(row).find('.k-checkbox')
          grid.select(row);
          $(checkbox).prop('checked', true);
        }
      }

In the Dojo example linked here, there is an input where a text could be entered. On a button click, the rows that have cells which content contains the text from the input will be checked. The change event will be fired and a message will be console logged.

I hope you will find the provided information and the example helpful. 

Regards,


Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
Share this question
or