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>
Related
I have a dependent column that needs to be editable based on value of the first cell. How can do this using the beforeedit event of kendo grid.
I wish to avoid closing the cell in edit event of kendo grid.
Below is a sample
https://dojo.telerik.com/enodEwub
In order to achieve this when "Inline" edit mode is used you can use the Grid's cancelRow() method.
$("#grid").kendoGrid({
//....
edit: onEdit
});
function onEdit(e) {
//your custom logic
$('#grid').data("kendoGrid").cancelRow();
}
Hope that helps!
I am using kendo ui grid to display data. I want to set title for the grid.Is there any way to set it.
Also I want to set some additional/custom property for grid which will help to identify the grid uniquely. Any custom property I can set to grid so I can get its value when required.
So in case if there are more instances on grid this will help.
Please suggest on this.
Iterating through all your tables can be done using:
$.each($(".k-grid"), function (idx, grid) {
// Do whatever you want to do with "grid"
...
});
If you want to add a title, might be something like:
$.each($(".k-grid"), function (idx, grid) {
$(grid).data("kendoGrid").wrapper.prepend('<div class="k-grid-header"><table><thead><tr><th class="k-header">Title</th></tr></thead></table></div>');
});
For setting a click event to the HTML img elements, you can do:
$("tr", ".k-grid").on("click", "img:first", function () {
// Here "this" is the "img" on which you clicked, finding the grid is:
var grid = $(this).closest(".k-grid").data("kendoGrid");
console.log("grid", grid);
// If you want to access the "id"
console.log("id", grid.element.attr("id"));
});
Once you click on the first image of each row what I do in the event handler is finding the closest HTML element with k-grid class (the grid): this is the HTML containing the grid.
If you want to get Kendo UI grid element the you need to use data("kendoGrid").
Simple and elegant.
In this JSFiddle: http://jsfiddle.net/OnaBai/2qpT3/2/, if you click on "Add Titles" button you add a title to each table and if you click on "Add Handlers" and then in an image, you will get an alert with the id of the table that the image belongs to.
EDIT: If you want to iterate on every image that is in the first column, of every KendoUI grid on your document, you should do:
$.each($("td:first > img", ".k-grid table tbody > tr"), function (idx, elem) {
// "elem" is the image
console.log(idx, elem);
// associate event
$(elem).on("click", fnHandler);
});
I prefer to change the title like this:
$("#grid th[data-field=Field]").html("Title");
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.
Is it possible to identify on a kendo UI grid which field was altered on a row edit?
Right now I am sending the entire row to the server that was changed. I would like to send
the request to the server to also include a variable holding the name
of the field that was edited.
Is something like that supported by kendo or
is there a work around for that?
This is not supported out of the box. However the grid API should allow this to be implemented. Check the edit and save events. In there you can listen to changes of the model instance which is currently being edit. Here is a quick example:
$("#grid").kendoGrid({
edit: function(e) {
e.model.unbind("change", model_change).bind("change", model_change);
}
});
function model_change(e) {
var model = this;
var field = e.field;
// store somewhere the field and model
}
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")));
});