GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account.
Provide a directive that implements persistent selection in memory. By default, the selected state will be stored by an unique key on the data item. Note that the backing store can be used to obtain the currently selected items and to modify the selection. Fire a selectionChange event when the selection is modified. Event arguments will look like:.
Note that the event is a low-level interface. The arguments contain information only about the selected items in the current view.
Please reconsider again. In jQuery version I have a bunch of custom shortcut keys on selected cell. I even filter as you type and for that I need to have cell selection. We'll consider this scenario. The keyboard navigation feature might be able to cover it without implementing full-blown cell selection. Can we confirm how selection will be impacted by data functions like grid sorting? Will selection be maintained across sorts and filters? The selection will be persisted based on the unique key supplied to kendoGridSelectBy.There are situations when you would like to enable the end user to select rows or cells in the grid table, and process data from them or make calculations based on this selection.
The Kendo UI grid supports selection by specifying its configuration via its selectable attribute. Accepted values are:. As of R2 you can persist the row selection after data operations by setting the persistSelection property to true.
Subscribe to RSS
Further details are available in the selectable API section of the docs. R1 Release is here. See what's new! Kendo UI for jQuery. All Components. Grid with multiple row selection enabled. Grid with multiple cell selection enabled. Description There are situations when you would like to enable the end user to select rows or cells in the grid table, and process data from them or make calculations based on this selection.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Is there any way to suppress the selectable event? You can also detect what element triggered the click by giving the column a CSS class. Then you would put an if-statement in the change event to detect if the column was clicked or not:.
I just stumbled across a forum post by a Kendo UI dev stating that "the selection of the grid cannot be prevented" link. I guess that means I will have to work around this. Edit: I actually just want to get the row's uid attribute so I can select the selected dataItem from the dataSource. I've discovered that you can get it while you're defining your columns template.
Subscribe to RSS
Asked 7 years, 6 months ago. Active 7 years, 4 months ago. Viewed 10k times. Jensen Ching Jensen Ching 3, 4 4 gold badges 22 22 silver badges 39 39 bronze badges. Active Oldest Votes.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells cells in specific columnsand when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on.
I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.
So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in.
It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this. The advantage is that is columns are sortable this will work anyway. In order to clear selection for columns that you don't want just need to invoke clearSelection.
Learn more. Ask Question. Asked 5 years, 9 months ago. Active 5 years, 5 months ago. Viewed 13k times. Thanks for your help! Shivam 1 1 gold badge 8 8 silver badges 26 26 bronze badges. Eddie Eddie 3 3 gold badges 11 11 silver badges 24 24 bronze badges. Active Oldest Votes. OnaBai OnaBai Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.
The multi-select seems pretty good in KendoUI Grid, but it doesn't appear to support row headers or excluding ranges. I want to not be able to select the highlighted cells shown below e. I want to turn them into row headers :. I could not use the answer as-is as I am using a dataSource for the columns as they vary dynamically, but it lead me straight to a simple solution. Learn more. Can you disable selection for specific cells or columns in KendoUI Grid?
Ask Question. Asked 6 years, 9 months ago.Open Source Kendo UI - Part 3: Grid Select and Update
Active 4 years, 3 months ago. Viewed 9k times. Gone Coding. Gone Coding Gone Coding Question, when you say I want to not be able to select the highlighted cells do you mean cells or rows? Active Oldest Votes. Name "Grid". EmployeeId ; columns. Mode GridSelectionMode.
Type GridSelectionType. PageSize 5. Igorrious Igorrious 1, 15 15 silver badges 15 15 bronze badges. Many thanks! Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. The Overflow How many jobs can be done at home?
Kendo UI Grid With Select All Checkbox In Header
Featured on Meta. Community and Moderator guidelines for escalating issues via new response…. Feedback on Q2 Community Roadmap. Technical site integration observational experiment live on Stack Overflow. Triage needs to be fixed urgently, and users need to be notified upon…. Dark Mode Beta - help us root out low-contrast and un-converted bits.
Related 3.To enable the selection, configure the selectable option. It accepts both boolean and SelectableSettings parameters. The selection feature of the Grid applies only to the currently rendered items. This means that if virtual scrolling is enabled and the selection mode of the Grid is set to multipleand the user selects multiple Grid items, the selection will handle only the items that are currently rendered the items from the current page and will not extend to items that are located on pages which are not currently rendered visible.
To select a row when the Grid is in single selection mode, use either of the following approaches:. To select multiple rows one by one when the Grid is in multiple selection mode, use either of the following approaches:.
To leave only the current row selected and deselect all previously selected rows, click a row within the Grid. You can combine the checkbox-only selection with the single or the multiple modes. To select or deselect a single or multiple rows when the checkbox-only selection is enabled, select the checkboxes of the desired rows. For more information on checkbox selection, refer to the SelectionCheckboxDirective of the Grid. The Grid allows the selection or deselection of all items on a page through a select-all checkbox in its header.
You can also manually add a select-all checkbox to a template by utilizing the SelectAllCheckboxDirective.
The select-all feature applies only to the items that are rendered on the current page. For more information on how to modify this behavior, refer to the section on persisting the selection. The Grid enables you to override the default behavior of the selection feature and store the selected items:. By default, the selection does not persist during dataStateChange operations such as paging and sorting.
You can modify this behavior by applying the SelectionDirective to the Grid. The directive stores the items by an absolute rowIndex. You can override this default behavior by specifying the key that will be stored instead. This key can be either:. To define the collection that will store the selected items, additionally specify the selectedKeys option together with the SelectionDirective. This approach provides you with full control over the selection functionality—for example, it allows you to specify initially selected items, manually update the collection, and so on.
The following example demonstrates how to store the selected items by the ProductID field. SelectionDirective automatically enables the selection of the Grid component and you do not have to explicitly add the selectable option. However, you can initially disable the selection and toggle it later by adding the selectable option as a SelectableSettings object.
To disable the initial selection while keeping the toggle functionality, set the enabled property to false. By default, when the select-all feature is enabled, the Grid stores only the items which are located on the current page. To modify this behavior, attach a handler to the selectAllChange event which is emitted when the user selects or deselects the select-all checkbox and can be used to manually store items from other pages.
You can also take full control over this feature by manually setting the state of the select-all checkbox. You can use an alternative approach to set the selected items by specifying the rowSelected function. The function is executed for each data row in the Grid and determines whether the row will be selected.
The rowSelected function takes precedence both over the default selection behavior and over any possibly configured selection option. When the user modifies the selection, the Grid emits the selectionChange event.
It contains the following information:. By default, the Grid handles clicks which are made on non-focusable elements and performs selection. To disable the default behavior for custom or specific non-focusable elements, set the "k-grid-ignore-click" class. Cancel Submit.Posted 26 Mar Link to this post. Posted 27 Mar Link to this post. Posted 28 Mar Link to this post. Posted 29 Mar Link to this post. I'm afraid that getting only the added to or removed from the selection items is not supported as built-in feature.
Therefore, you should consider handling this yourself though custom code, for example by persisting the selected regions and then update only the those which has changed in the selected items array.
Posted 30 Mar Link to this post. In order to get the object of the widget, you will need to use the element's data store. As described in the this help article. Posted 01 Apr in reply to Rosen Link to this post. Posted 24 Jun Link to this post. Is there any way I can get the value of first cell by index from selected row? Please note that I do not want to user column header property. Posted 29 Jun Link to this post. You could use the columns field of the Grid, which represents the current order of the Grid columns.
All Products. Select Cancel The title field is required! Feed for this thread. Member since: Dec Posted 26 Mar Link to this post I am tying to find the values mostly string in a Grid datasource was remotely populated. The documentation for Grid. I have used Firebug to look at the object, but this seems a slow path to figure things out. I am making a plea for better documentation, to complement the examples.