I am having a grid with checkboxes for each item in the grid. I need to delete the multiple checked items in the grid. How can i do that in kendo ui.
Regards,
Sri
When the button is clicked use jQuery to find all TR elements which contain the checked checkboxes and then use the removeRow method. Something like:
$.each($('#GridName :checkbox:checked').closest('tr'),function(){
$('#GridName').data().kendoGrid.removeRow($(this));
})
Related
I am using a kendo grid to display my data. I want to show another kendo grid inside one cell of my kendo grid. Is there anyway I can achieve this?
There is a 'way' (using the "template" option of the corresponding Grid column), however I would suggest to instead use Grid hierarchy to show details about current row:
Grid: hierarchy demo
Nesting another Grid inside cells of current Grid is not a good idea as it will not be usable, it will reduce the page performance etc.
I'm trying to add a button, like the k-select element, to the end of a Kendo combobox for adding new items but whatever i change the element the result is not consistent and fine with other elements.
kendo combobox generate this style for button to open the list.select
I want to find clear way to add an button to end of combobox like this link.
the template won't help becase it in control in in list.
tnx
I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.
Thanks!
To do that you can follow these steps:
Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
dont forget to add k-rebind="gridOptions.selectable",
and i also prefer <div kendo-grid="grid"></div> so later on we can
select the grid instance
create $scope.handleChange = function(kendoEvent){....}to handle the event
and finally here is a kendo dojo example from yours that i've modified
EDIT:
As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo
I want to get sorted list items from bind object using kendo ui sortable listview. please refer the sample code from below.
http://dojo.telerik.com/#lilan123/eWofa/2
One way would be to use the Kendo event that is fired on the move or change of the sortable list to set the new index value of the item in the ng-repeat that was moved.
You set the event in the "k-on-change".
<ol id="sortable" kendo-sortable k-options="sortableOptions" k-on-change="change(kendoEvent)">
Then you add the event to the scope.
$scope.change = function(e) {
console.log(e);
alert("The e object has stuff like the old index:" + e.oldIndex);
//Get the correct item from the bound list based on index and change the index values in the list to match.
}
It seems like a hack, but then again, it always felt like a hack when using Telerik controls.
Here is a good blog post on using the events with angular, and what they claim are best practices. Hope it helps!
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.