I have to customize the kendo grid filter event. On applying filter instead of filtering the records based on the available records on the grid i need to requery along with filters.
i.e:
Onfilter
{
prevent filtering on existing data()
requery from db and apply filter on that data()
}
so i have coded like below.(in document ready)
(document).ready(function (){
grid.bind("filter", function (e) {
if ((e.filter == null) ) {
mymanualretrieve();
}
if (e.filter!=null) {
tempFilter = e.filter.filters;
}
//i don't want the default filtering. to prevent that i am clearing it out
e.filter = grid.dataSource.filter({});}
I have one dropdown where i should call retrieve again with the filters applied.so i am trying like below in change event of drop down.
if (tempFilter != null && tempFilter != undefined) {
grid.dataSource.filter({ tempFilter });
mymanualretrieve();
tempFilter = grid.dataSource.filter().filters;
//I need to prevent default filtering here as well, but on applying the below code, my manual retrieve is not queried based on filters
grid.dataSource.filter({});
After this changes dcument.ready also doesn't get hit on filtering
custom filter options for every column: asp.net MVC
columns.Bound(c => c.columnName).Format("{0}%").Filterable(
ftb=>ftb.Cell(cell=>cell.ShowOperators(true))
.Extra(false)
.Operators(op=>op.ForNumber(fn=>fn.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)))
.Title("Column Name");
Related
I'm working on ejs-grid and I want to toggle(Expand/Collapse) a child grid when I click on a row in the grid.
I was able to get the row click functionality working using (rowSelected) attribute but I don't really know how to get the current state of a child grid(collapsed or expanded).
My Current Code
toggleChildGrid(event){
const rowIndex = event.rowIndex;
const isCollapsed = true;
if(isCollapsed){
this.grid.detailRowModule.expand(rowIndex);
}
else{
this.grid.detailRowModule.collapse(rowIndex)
}
}
I just made the isCollapsed variable true but I will like that to be derived dynamically based on the state of the child grid.
You could use a set containing row indices that are expanded, and add/remove from that list to represent if the row is expanded/collapsed
private expandedRowIndices = new Set<number>();
toggleChildGrid(event: {rowIndex: number}): void {
const rowIndex = { event };
const isExpanded = this.expandedRowIndices.has(rowIndex);
// If it is currently expanded, now collapse
if (isExpanded) {
this.grid.detailRowModule.collapse(rowIndex);
this.this.expandedRowIndices.remove(rowIndex);
} else {
this.grid.detailRowModule.expand(rowIndex);
this.this.expandedRowIndices.add(rowIndex);
}
}
Based on your shared information we suspect that you want to expand/collapse the child grid based on the current state while clicking on the row of grid. To achieve your requirement we suggest you to use our default recordClick event.
Using this event we find the current state of child grid and based on that we have collapsed and expanded using expand and collapse method.
Please refer to the below code and sample link.
recordClick(args){
const isCollapsed = (args.target.closest('tr').nextElementSibling.classList.contains('e- detailrow') && (args.target.closest('tr').nextElementSibling.style.display != 'none')) == true ? true : false;
if (!isCollapsed) {
this.grid.detailRowModule.expand(args.rowIndex);
}
else {
this.grid.detailRowModule.collapse(args.rowIndex);
}
}
Sample link: https://stackblitz.com/edit/angular-pm1ziu-9kpxum?file=app.component.ts
API Link: https://ej2.syncfusion.com/documentation/api/grid#recordclick
I have a tooltip in Kendo UI which I'm trying to filter cells based on their column name, because the standard td:nthchild won't work (users can move columns around). I want to engage the tooltip based on if someone hovers over MY COLUMN NAME'S CELLS. How do I accomplish that in the filter field? Or should I do it in the show function?
this.$el.kendoTooltip({
filter: "th:contains('MY COLUMN NAME')",
show: function (e) {
if (this.content.text().length > 0) {
this.content.parent().css("visibility", "visible");
}
},
hide: function(e) {
this.content.parent().css("visibility", "hidden");
},
content: function (e) {
var target = e.target;
return $(target).siblings().first().text();
}
});
Like this ?
this.$el.kendoTooltip({
filter: "thead th:contains('ColumnA')"
});
Demo
UPDATE
As you want to show the tooltip on the row cell based on the column's title, you can't use filter parameter for that, it is meant to be used to filter only the target element, which is not your case. You will need some programming there, e.g:
show: function(e) {
let index = this.target().index(), // Get hovered element's column index
columns = grid.getOptions().columns, // Get grid's columns
column = columns[index]; // Get current column
// If target TD is not under 'ColumnA', prevent tooltip from being showed
if (column.title != "ColumnA") {
this.hide();
}
}
Demo
Thanks to kendo, you can't prevent their own events, so using hide() works but the tooltips still opens blinking before it is hidden again, it's possible to catch it opening. Tried using e.preventDefault() and return false that would a reasonable way to say "cancel the widget showing" but with no luck. This was the best I could do.
I placing some xml data in grid using extjs. Now I'm trying to build an update function,
that worked fine, however I'm trying first to extract the data to be updated, so that the user won't have to insert the whole data again.
I managed to extract the data depending on the position in the grid, but not on the selection of checkbox next to each entry in the grid.
Code:
if (btn.id == "btn_update") {
var selection = grid.getSelectionModel().getSelection();
if(selection.length == 0){
alert("Please select an item to update");
}
else if(selection.length > 1){
alert("Please only select one item to update");
}
else{
Ext.getCmp('update_name').setValue(gridStore.getAt(0).get("FirstName"));
Ext.getCmp('update_lastname').setValue(gridStore.getAt(0).get("LastName"));
Ext.getCmp('update_email').setValue(gridStore.getAt(0).get("Email"));
winupdate.show();
}
}
How can I achieve that?
Hope this will help you.
You can use checkboxSelectionModel in grid and when you click on checkbox select event will be fired and that will give you current record, index and many other.
xtype:'grid',
selModel: Ext.create('Ext.selection.CheckboxModel',{
listeners: {
select: function (el, record, index, eOpts) {
//Get current record from record variable
}
}
I am trying to implement a feature to select an item in kendo's multi-select control with server filtering. when user presses tab on the selected item. Here is my code of kepdown event:
if (e.keyCode === 9) {
var selectedItem = multiSelect.current();
if (selectedItem) {
var selectedIndex = selectedItem.data("idx");
if (selectedIndex >= 0) {
var currentValue = multiSelect.value().slice();
var dataitems = multiSelect.dataSource.view();
var selectedDataItem = dataitems[selectedIndex];
multiSelect.dataSource.filter({});
currentValue.push(selectedDataItem.relatedId);
multiSelect.value(currentValue);
multiSelect.trigger("change");
}
}
}
But it works fine as long as I am searching in same data view i.e. lets say I select two values starting with Cloud and then I select a value starting with App then kendo will remove previous two values starting with Cloud and control will contain just one value selected at the last.
I debugged kendo's code that the issue in function _index of kendo because it finds value in dataSource.view
I have recreated the issue at http://dojo.telerik.com/OtAvi
Your code is not working because you have serverFiltering set to true in the dataSource:
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
},
Since the data is being filtered on the server, the call multiSelect.dataSource.filter({}); is only clearing the already filtered data. With that said, when you call multiSelect.value(currentValue);, only the values from the currently filtered dataSource can be selected. This is causing the selection to only hold items from the current dataView.
Unless you have a strong reason not to, your easiest fix is to set serverFiltering set to false.
When performing an update on the grid it sends all column data.
I have something where updates are performed after the cell is closed:
change: function (e) {
if (e.action == "itemchange") {
this.sync();
}
}
Instead of sending all the data for every column, how can I get it to only send the data that was changed?
You can check for Isdirty flag.When cell data is modified the respective model item is marked as Isdirty=true.
var data = grid.dataSource.data();
var dirty = $.grep(data, function(item) {
return item.dirty
});
// Dirty array contains those elements modified
console.log("dirty", dirty);
Here I'm doing for the entire grid data.You can do the same for single row.