I am using a kendo for angular grid with grouping, this grid, is it possible to take action only on records within a specific group?
For example, in the group header I have a button and every row has a check box, when the user clicks the button I need to get only the rows with in that group.
Or select all rows in one group ?
In the Grid Header Template we have access to the group property that in turns contains all data items for the respective group under its items property.
You can pass them to the custom button click handler and proceed accordingly:
<kendo-grid-column field="Category.CategoryName" title="Category">
<ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
<strong>{{field}}</strong>: {{value}} <button class="k-button" (click)="onClick(group)">CLICK</button>
</ng-template>
</kendo-grid-column>
EXAMPLE
For example selecting all items from a group:
REFERENCE ON SELECTION
ENHANCED EXAMPLE
Related
I have a multi select Vuetify checkboxes populated from list. I want to be able to search/filter checkboxes by the their label. When the label is searched using v-text-field, filtered checkboxes get automatically selected.
I want the checkboxes to be selected manually after filtering is completed.
Below is sample codepen for the issue.
`https://codepen.io/solarurja/pen/OJEpdXg`
I need some event when my Kendo grid lose selection (no row selected).
https://dojo.telerik.com/#nick_kingston/IjIYOduw
Select one or more rows.
Filter by some field that so no selected rows show.
Expecting event appearance because now no row selected.
How to implement item 3?
There is no event like lostSelection. The change-event triggers if the user changes the selection only.
Once the filter was executed, the dataBound-event is triggered (as you can see on the demo page https://demos.telerik.com/kendo-ui/grid/events). There you could check for the list of selected items with the method select (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/select)
In our scenario we need to edit the data directly from the grid, without passing by a button that changes the state of the row.
Example : a checkbox that changes a boolean value into the data. This sort of update doesn't necessarily need a button to change the state of the row : the user could possibly change the value through the checkbox without changing the state of the grid.
My question is : what the more convenient way of doing this ? I've seen the grid has mutliple kinds of update (Template-Driver Forms, External Forms, Reactive Forms etc ...) but each time the developer has to put a button to change the state of the row.
I manage this directly into my grid template, and I bypassed the kendoGridEditTemplate because it demands a user interaction with the row.
<ng-template kendoGridCellTemplate
let-dataItem
*ngIf="column.value.Type === 'boolean'">
<span *ngIf="!column.value.Editable" [...]></span>
<kendo-switch *ngIf="column.value.Editable && Config.Editable === 'Direct'"
[ngModel]="dataItem[column.key]"
(ngModelChange)="dataItem[column.key]=$event"
(valueChange)="gridEditable.updateData(Config, dataItem, [{field:column.value.Editable.Column, value: $event }])">
</ng-template>
We'll use the kendoGridEditTemplate when we'll integrate user interaction when modifying the row data.
We are using Kendo UI MVC and need to filter a large number of records and display them in a read-only DataGrid. The page has MultiSelect widgets that each let the user select from a list of distinct values for a specific database column. After the user has entered his selections in the MultiSelect widgets he will click a 'refresh' button to update the grid. The Grid's DataSource.Ajax.Read method should pass the user's selections to the server and display the results in the Grid.
I know how to populate the MultiSelect widgets and how to return data from the server via Ajax but I'm unclear on how to pass the user's selections to Grid.DataSource.Read().
What is the best way for the button to pass the user's selections to the DataSource, fire the Read method, and display the results in the Grid?
EDIT: Putting the widgets inside the Grid's ToolBar will meet our needs.
Embed the widgets in Grid.Toolbar.Template
I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.