I have a kendo grid having few columns, first column is rolename and other columns are add,edit,view and checkboxes below them...i am giving access of add,edit,view based on role. what i want to do is I want to disable a row which is having role name as 'Admin', means add,edit,view functionality of admin role shouldn't be changed from UI and all three checkboxes(add,edit,view) of that row should be disabled, however other rows can be editable. I want to achieve this on button click. i got the table row using following code, don't know how to proceed further.
var tableRow = $("td").filter(function () {
return $(this).text() == "Admin";
}).closest("tr");
any help please?
Related
Can Kendo-UI multiselect be use for input of user defined values?
By default when user clicks on multiselect control a dropdown is opened and user can select one of the predefined values. When user select one of the predefined values, that value is added to the selection.
What we need is a little bit different behavior. We would like to allow user to enter a custom string value, press enter key, and then that entered value would added to the selection.
One idea was to abuse multiselect control, by subscribing to the key events and adding user defined value to data source of the control, at which point we could (possibly) mark that value as selected (I am just guessing this, not sure if it would actually work).
So, is there an option value for this kind of behavior for multiselect or maybe some other control (does not have to be Kendo), so we don't have to hack existing kendo control?
As an example of the behavior I have create a quick [PoC here] (http://plnkr.co/edit/mcpVsstaxB2Xteh374pk?p=preview).
Here is the code from the plnkr
<script>
$(function() {
var input = $('input');
var list = $('ul');
input.on('keyup', function(e) {
if (e.which === 13) {
var value = $.trim(input.val());
if (value.length > 0) {
list.append($('<li/>'));
list.find('li:last').text(value);
var remove = $('<span class="remove"/>');
remove.html(' x');
list.find('li:last').append(remove);
remove = list.find('.remove:last');
remove.click(function() {
$(this).closest('li').remove();
});
input.val('');
}
}
});
});
</script>
I've got a Kendo grid with detail template. When I open the detail template, I want the respective row to be selected. By default, the detail expands but the row isn't selected.
.Events(e => e.Change("onChange").DetailExpand("jsFunction"))
I know there's a DetailExpand event that fires when the detail is expanded, I just don't know how to make it select the row to which it refers. I have tried:
function jsFunction() {
this.dataItem(this.select()); <--- breaks here because there's no row selected
}
How can I make it select the row?
Nothing is easier:
function jsFunction(e) {
e.sender.select(e.masterRow);
}
Grettings.
I have a slickGrid which is populated with data, and have a first checkbox column added via:
if (info.includeSelectCheckbox) {
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass:"slick-cell-checkboxsel"
});
info.columns.splice(0, 0, checkboxSelector.getColumnDefinition());
}
grid = new Slick.Grid(elem, dataView, info.columns, options);
if (info.includeSelectCheckbox) {
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(info.columns, grid, options);
}
I also have a filter textbox, which filters the data in the grid by different criteria.
The problem is, when I select the checkbox for some items in the grid and then filter the grid, then selected checkboxes either stay on the old indexes, but matching different records, or are gone from the grid and don't reappear when I the remove filtering.
I'd like to have the checkbox selections independent of the filtering, so whenever I play with the filter the selected items stay selected until I manually uncheck them.
I also tried to add checkboxes via the regular column formatter, but the selection is gone when I start filtering.
You need to call dataView.syncGridSelection(grid).
See https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles.
I am planning of using a cascading kendo drop down.
Drop down 1 - Countries - it will list down all the countries.
Drop down 2 - States - Based on the selection of the country I have to show the states here.
The data for both are loaded from my api controllers. I referred to this link
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html
But, I need to pass the first selected value to the second drop down.
PLease suggest the best way to do it. Examples would be really helpful.
Thanks.
you have to use events for that
http://demos.kendoui.com/web/dropdownlist/events.html
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlistTwoForStates").data("kendoDropDownList");
//Write your logic here to bind data for thie dropdown
// disable the dropdown list
dropdownlist.enable(true);
};
</script>
I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.
I tried adding
.Batch(true)
for the data source and below is my function for delete button outside the grid.
function deleteRule() {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.removeRow($(this));
});
}
Any suggestions please ?
Yo mate,
How exactly do you remove that one row? Why you use the select method?
Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$('.cool:selected').each(function(){
grid.removeRow($(this).closest('tr'));
})
}
I hope you got the idea mate.
Good luck.
Here is what i use
works very well
$('#your-grid-id').data("kendoGrid").select().each(function () {
grid.dataSource.remove(grid.dataItem($(this).closest("tr")));
});