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");
}
});
Related
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
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.
How can I display any applied filter criteria on the Kendo UI Grid.
I would like to have a readonly display, of the applied criteria.
Current functionality does allow user to apply filter, but that the user has to go to the filter menu to look for the filter details.
The Kendo UI data source doesn't have a filter event, so you'd need to implement that yourself. Then when the event is triggered, you can get the current filter and format it in whatever way you want it displayed.
For example:
var grid = $("#grid").kendoGrid(...);
// override the original filter method in the grid's data source
grid.dataSource.originalFilter = grid.dataSource.filter;
grid.dataSource.filter = function () {
var result = grid.dataSource.originalFilter.apply(this, arguments);
if (arguments.length > 0) {
this.trigger("afterfilter", arguments);
}
return result;
}
// bind to your filter event
grid.dataSource.bind("afterfilter", function () {
var currentFilter = this.filter(); // get current filter
// create HTML representation of the filter (this implementation works only for simple cases)
var filterHtml = "";
currentFilter.filters.forEach(function (filter, index) {
filterHtml += "Field: " + filter.field + "<br/>" +
"Operator: " + filter.operator + "<br/>" +
"Value: " + filter.value + "<br/><br/>";
if (currentFilter.filters.length > 1 && index !== currentFilter.filters.length - 1) {
filterHtml += "Logic: " + currentFilter.logic + "<br/><br/>";
}
});
// display it somewhere
$("#filter").html(filterHtml);
});
See demo here.
Note that filters can be nested, so once that happens, this example code won't be enough - you'll have to make the code that converts the filters to HTML recursive.
In order to augment all data sources with the "afterfilter" event, you have to change the DataSource protototype instead of changing it on your instance:
kendo.data.DataSource.fn.originalFilter = kendo.data.DataSource.fn.filter;
kendo.data.DataSource.fn.filter = function () {
var result = this.originalFilter.apply(this, arguments);
if (arguments.length > 0) {
this.trigger("afterfilter", arguments);
}
return result;
}
If you want to integrate the whole thing into all grid widgets, you could create a new method filtersToHtml which gets you the HTML represenatation and add it to kendo.data.DataSource.fn like demonstrated above (or you could create your own widget derived from Kendo's grid); in the same way you could add a method displayFilters to kendo.ui.Grid.fn (the grid prototype) which displays this HTML representation in a DOM element whose selector you could pass in with the options to your widget (you could ultimately also create this element within the grid widget). Then instead of triggering "afterfilter" in the filter method, you could call displayFilters instead.
Considering the complexity of the complete implementation which always displays filters, I'd suggest extending the Kendo grid instead of simply modifying the original code. This will help keep this more maintainable and gives it a bit of structure.
how about combining two filters of grid.
this way the user can see the selected filter in text box and even remove it by hitting the 'x' button on filtered column text box.
you can do this by setting grid filterable like this
filterable: {
mode: "menu, row"
}
the documentation and example is in here
This is how my table looks:
a checkBox column
a name column
The table contains 5 rows.
What I want to achieve is to make the last two rows of the table unselectable (the respective checkboxes in the checkBox column should also disappear).
I managed to do this with jQuery after the table was rendered. Does the SlickGrid table allow me to perform the above mentioned scenario?
You can add a function for returning getItemMetadata() which is demonstrated in this example.
Here's a simplified version:
function getItemMetaData(row){
if (row >= view.getLength() - 2){ //only on last two rows.
return { selectable: false };
} else {
return {};
}
}
var view = new Slick.Data.DataView();
view.getItemMetadata = getItemMetaData;
var grid = new Slick.Grid(selector, view, cols, opts);
This method is then called in canCellBeSelected at line 2944 in slick.grid.js
I'm using setCell to set the value of a cell. The problem is it is still calling the customFormatter specified for the column. Is there anyway I can set the value of this cell without it having to go through the customFormatter?
First of all the custom formatter will be used on every grid refresh, so to set the cell value you have to do this after the custom formatter. The best place to do this is inside of loadComplete or gridComplete event handler.
To set the cell value you can use jQuery.text for example. So you should get jQuery object which represent the cell (<td> element) and then use jQuery.text or jQuery.html to change the cell contain. How I understand you, you knows the rowid of the cell and the column name which you want to change. The following code could be:
loadComplete: function() {
var rowid = '2', colName = 'ship_via', tr,
cm = this.p.colModel, iCol = 0, cCol = cm.length;
for (; iCol<cCol; iCol++) {
if (cm[iCol].name === colName) {
// the column found
tr = this.rows.namedItem(rowid);
if (tr) {
// if the row with the rowid there are on the page
$(tr.cells[iCol]).text('Bla Bla');
}
break;
}
}
}
See the corresponding demo here.