I#m using Telerik Grid and MVC3. I managed it to build my own filterDialogs, we had to create custom filter for each column. Everything works fine, when I click on my filter button, the gridData gets filtered. The only thing is that the filter icon doesnt change its state to active. So i went along and added the needed class after my filter command:
grid.filter(filterSettings)
$j('#targetColumn').addClass('t-active-filter');
When I filter for a first column, it works. But if I filter for a second column, the filter icon of the first column turns its state back to inactive. There must be some information that is sended from the server to the grid, so the grid goes along and adds/removes the class to the column header.
I got the answer from here. Before filtering I have to set the column filtersetting mannually:
var column = grid.columnFromMember(PropertyName);
if (column) {
column.filters = [filterSettings];
}
grid.filter(filterSettings)
And everythin works :)
Related
I'm developing an app using the amazing angularslickgrid.
Till now, i haven't got any problem, buy I found out an strange behaviour on it.
In the ngOnInit I wrote the following code:
ngOnInit(){
this.defineGridHeaders();
this.defineGridOptions();
this.obtainData();
}
Till this moment everything works well and the grid load correctly the data including the RowSelection column.
The problem is when I try to change the columndefinition, and perfrom a reset() like this:
this.defineGridHeaders();
this.angularGrid.gridService.resetGrid();
The new colums have been loaded correctly but i lose the rowSelection column.. :(
I've tried to include the defineGridOptions() function in the middle of the defineGridHeaders() and resetGrid() but the result is the same.
In the this.defineGridHeaders() I just perfom the following:
this.columnDefinitions = [];
[...FIELDS CREATION...]
const col = {
id,
name,
field,
sortable,
filterable,
type,
editor,
formatter,
filter,
outputType,
params,
minWidth: minwidth,
width: width,
header: header,
excludeFromExport,
excludeFromGridMenu,
excludeFromQuery,
excludeFromHeaderMenu
};
this.columnDefinitions.push(col);
Could someone help me on this?
Many Thanks!
Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here
a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)
Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.
If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).
I have seen at times, datagridviews using an extra cell placed right under the Header of the column, as a filter for the values in the specific column.
I know it is possible to do so through a templatefield in ASP but I need to alter a desktop application using a DataGridView to display the data.
Does anyone know how to add a filter row to the grid in a vb net desktop application?
If I place a textbox right below the header row of the grid, I will hide the first row of data and I want to avoid this; if I place a textbox somewhere on the form, it looks pretty tacky.
Thank you for any suggestion.
I've implemented a Kendo grid with basic CRUD functionality (JS front end, MVC controller) and this all works correctly. I have a requirement to provide functionality that enables a "replace all" type function. For example, I filter by a company name then click edit on a record and change the email address or phone number - I also need the option to update all records in the current filtered set to the edited email/phone number. (instead of editing each record individually).
Is there anything in the tool set enabling this type of functionality or will I need to build a custom control?
Many thanks!
I found a solution from a previous question, an example is here:
http://jsbin.com/alocoj/1/edit
Also if you require the filtered and sorted data set (instead of the entire set) use:
var grid = $('#grid').data('kendoGrid');
var dataSource = grid.dataSource;
var data = dataSource.view();
The .view() gets the current set
We are developing a web app project in that we are using Kendo UI. Is that possible to make first column title/heading as what ever we selected from drop down. For example :- If a serial number is searched , serial number should be in the first column of the search. But I am unable to get that since we defined column definition generically in sorted manner. Depending upon selection we hide rest of the column.
for example:
xxx.GridColDef = [ {
field : "serialNo",
title : "Serial No",
}, {
field : "firstname",
title : "firstname",
}, {
field : "lastnameo",
title : "lastname",
},
from the drop down if i select first name the first name should be in the first column. but i am getting first column as serial no Is there any way? without adding separate column definition for each.
Kendo version - 2012.1.322
this should be done automatically not using column re-ordering not manually
Sorry if I am not clear. What I want is
In drop down I have
Serial No
First Name
Last Name
DOB
Initially the the grid will be as below
Serial No First Name Last Name DOB
If user selects "First Name" from drop down it should be like this
First Name Serial No Last Name DOB
Hope this helps. if you need more clarification let me know . Thanks for providing solution for this.
One more thing: -
"Fiddle using your current version of Kendo 2012.1.322 " in this fiddle i am unable to select from drop down.
Updated Answer 2
The current KendoUI grid framework does not support the ability to switch columns in code. I've created a new fiddle where you don't have to completely re-order the columns in every switch case. It loops through your column definition and if the drop down value is there, it removes it from the array and places it at the first position. I don't know how your 50 columns and 8 drop downs interact so it's hard for me to give a completely accurate answer. But between the multiple suggestions on here, I hope you can come to a solution :)
I created a new tempColumn definition variable so that the original column definition is still available in it's original state.
function onSelect(e) {
var ddlVal = this.dataItem(e.item.index()).value;
var tempColumns = columnDefinitions;
$(tempColumns).each(function(index) {
if (ddlVal == this.title) {
tempColumns.splice(index, 1);
tempColumns.splice(0, 0, this);
}
});
createGrid(tempColumns);
}
New fiddle which uses spice to re-order the columns
Updated Answer
I've created a new fiddle with your current version of Kendo. You don't need to update your version because I don't believe there is any way to do this within the Kendo framework.
This solution involves re-defining your column definitions when you make a selection from the drop down and then re-create the grid.
Updated fiddle with your current version of Kendo
*For some reason, Internet Explorer doesn't play nice with jsfiddle sometimes. This example works in Firefox and Chrome but not in IE. If you can't try a different browser to see it work, plug the code into your solution and test it.
Original Answer
I've provided 2 different solutions.
1) Is it possible for you to update your version of KendoUI? If you can, then you can take advantage of the .showColumn() and .hideColumn() methods.
Here's a fiddle below using KendoUI 2012.2.710. On the select event of the drop down, you just show/hide the appropriate columns. Really easy and straight forward.
Fiddle using Kendo 2012.2.710
2) If you can't update your KendoUI version, you can alter your columnDefinition array and then re-create the grid.
In the onSelect method of the drop down list, you remove the first column from the columnDefinition array and then add in the new column object to the array. After that, you remove the content of the grid's div element and then re-create the grid.
You're still binding to the same data so you don't have to go back across the wire to get the data again.
Fiddle using your current version of Kendo 2012.1.322
~ In both cases, the code could definitely be cleaned up to suit your needs better but I just wanted to give you some base functionality to work with. Hope this helps!
This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};