Question is specific to MVC grid control. How to restrict grouping of two or more columns in Kendo Grid? User should be able to drag and group any column but not more than one column.
Bind this function to dataBound grid event:
function onDataBound(e) {
var gr = e.sender.dataSource.group();
if(gr.length > 1){
gr.shift();
e.sender.dataSource.fetch();
}
}
Greetings.
Related
I have many grids in my application. some of the columns are numeric ones.
I want to apply a specific css style (direction: ltr) for all numeric columns without specifying is for each one. Is their a way to apply the style on all numeric columns?
Thanks a lot!
Kendo grid has a dataBound event that will be fired once the grid has finished rendering the cells. From this event, you'll be able to loop into the grid's view and column and set each cell css individually.
Note that the type is part of the model, not the column itself.
$.each(kendoGrid.columns, function (index, column) {
//Get the type from the model
var type = kendoGrid.dataSource.options.schema.model.fields[column.field].type;
var jqTd;
//Extra logic to handle locked columns
//nth-child is 1-base
if (columnScan.locked) {
lockCount++;
jqTd = kendoGrid.lockedContent.find("tbody>tr>td:nth-child({0})".formatWith(index + 1));
} else {
jqTd = kendoGrid.tbody.find(">tr>td:nth-child({0})".formatWith(index + 1 - lockCount));
}
if (type == "number") {
jqTd.css("background-color", "red");
}
});
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
I am using Kendo UI grid without pagination. I have set the below code to load the data in the grid view while scrolling
scrollable: { virtual: true },
My problem is, I have selected 100th row in the grid by scrolling . I am refreshing the grid. After refresh, I need to select the 100th row again. Is it possible ?
Regards
Senthil
After refresh select the row you need as shown below
var grid = $("#grid").data("kendoGrid");
grid.select("tr:eq(100)");
For more info check out kendo DOC http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-select
Basically the question is annotate the row that you have selected when it changes to do so and then in dataBound event select that same row.
In order to save the selected row you can do:
change: function (e) {
// Save some information from the selected row
var item = this.dataItem(this.select());
// Here we save uid
var uid = item.uid;
this.selectedRow = uid;
},
dataBound: function (e) {
// If we have any row selected
if (this.selectedRow) {
// Use this.select for selecting it
this.select("tr[data-uid='" + this.selectedRow + "']");
}
}
You can see this here: http://jsfiddle.net/OnaBai/eLk7zkzs/
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")));
});