I have a grid with several columns, most of which have values selectable from a given set. (i.e. they are shown as dropdown boxes when inserting/updating.) I want to enable filtering, but not necessarily on all columns at once. So I tried adding an empty option for each column, but this means it also shows up in the dropdown for insert/update, which is not what I want.
So how should I solve this? Do I need to override one or more of the row renderer functions?
You can redefine filterTemplate of the column like the following:
filterTemplate: function() {
var $select = jsGrid.fields.select.prototype.filterTemplate.call(this);
$select.prepend($("<option>").prop("value", "0").text("(All)"));
return $select;
}
Here is the working fiddle http://jsfiddle.net/tabalinas/g68ofLs1/
Related
I need a help on applying common drop down values to multiple selected rows in a Webix datatable. Let's say I want to select all the rows of my datatable (by Ctrl+click) for which the 'Name' column has value as 'Mark' and then want to apply a common color for them (for example : green) by clicking so that it gets applied on all the rows at one go.
The snippet is here : https://webix.com/snippet/1162ccd1
Any help on how can this be achieved would be appreciated.
Thanks in advance.
Further to this post, I am including a re-phrased and a half-way solution below for the experts to dispel any confusion about the requirement :
It does not necessarily have to be those rows which have 'Name' as 'Mark'. I put it that way to give an example. Basically, it could be any randomly selected row either consecutive or haphazard and selecting a common value for them from the drop down of the 'color' column (it could be any color in that drop down ) so that its value gets assigned to those cells of those selected rows. Note, selecting a color should not change the color of the row, so there is no css effect I want here.
I have so far written the code like below, which is able to fetch the selected rows.
rows = $$("mytable").getSelectedId(true);
for (i in rows) {
id = rows[i];
item = $$("mytable").getItem(id);
/* below effect has to happen from the drop down of data table gui */
item.id2 = "green"; //for example, it could be any value
}
Can anybody please help me in:
i) how can I apply the value selected from the drop down of data table to all the selected rows ?
ii) Secondly, how can I trigger this code ( through which event ?) once they are selected in the data table and the value is chosen from the drop down ?
Thanks.
You can do something like this by adding the onBeforeFilter event, and track only color filter ("id2" in your snippet):
onBeforeFilter: function(id, value, config) {
if (id === "id2") {
const selected = this.getSelectedId(true);
const color = this.getFilter("id2").value;
for (let row in selected) {
const item = this.getItem(selected[row]);
item["id2"] = color;
this.updateItem(item.id, item);
}
}
}
Sample is here https://webix.com/snippet/538e1ca0
But I think this is not the best way.
You can also create a context menu that is displayed by right-clicking on the table and making a choice of values in it.
I'm using Kendo grid for my tables, and I want to filter on categories in addition to the actual values.
For example, imagine the column has the integer values 1-10. By default, I can client-side-filter on any of those values, and I want to keep that. However, I want to add the evens, the odds, and the prime numbers to my filter options.
Is there a way to do that?
My answer is untested and only a theory but the grid does have a filterMenuInit event that will allow you to modify the content of the filter dropdown displayed to the user. You'll be able to add or modify some of the values created by the grid.
The next thing you'll have to do is the override the datasource's filter function to handle the your special values:
grid.dataSource.filter = function() {
//Apply your odd / even filter logic here using the this keyword
var result = this.yourfilterLogicHere();
//Make sure to return the expected format
return result;
}
Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
I need the ability to add a random amount of subgrids to a jqgrid. Basically the subgrid is idential to the parent jqgrid apart from having their column headings hidden. Is there a way where I can define the grid once in say a js file method and have the grid id and data url passed in as a parameter and then append different versions of itself into its subGridRowExpand after its defined. It just seems very laborious to have to define multiple versions of the same jqgrid one inside the other.
Could I do something like
var i = 0;
var maxsubgrids = 5;
function CreateGrid(gridId, dataUrl) {
$(gridId).grid(
...... Grid definition
subGridRowExpand: function(subgrid_id, row_id) {
if (subgridcount < maxsubgrids){
CreateGrid('#subgridId' + i++, subgridDataURL);
}
}
......... continue with grid definition
}
I know the above isn't correct but just an idea, but I think it would be better if the grid could be just created once in a method and then find a way to insert the subGridRowExpand section afterwards. Is this even possible?
You should consider to use TreeGrid instead of Subgrids. It's important to understand that subitems of TreeGrid have always the same number of columns like it's parent elements. So I suppose it corresponds to requirements which you have. Of extending of tree node nodeid, parentid and n_level will be automatically added to the list of parameters of the URL (see the documentation).
I am using a WebGrid to display a list of items,
I like to set the background color of the rows based on a condition. I want to set the background color of the entire row, not just one cell.
Any example?
thank you
This is an old question, but I just stumbled upon it and have an answer that I don't think is too hacky. The previous answer supplied only works if the value you're using to conditionally change the background color is the value of a table cell.
If that's not the case, you can set a data- attribute for the first cell in your table rows using the Format property of a WebGridColumn. Here, the first column of my table contains hyperlinked IDs. I'm defining it in my code-behind (controller action in MVC) and I've added a data-in-error attribute from the IsInError property of my object. You can set the value of this attribute in whatever way makes sense for your application.
new WebGridColumn
{
ColumnName = "Id",
Header = "ID",
Format = (x) => new HtmlString(String.Format("{1}", x.Value.IsInError, x.Value.Id))
});
Then, using jQuery, I find all of the rows in my table that have an anchor in the first cell of the row, and set the class of that row to 'error'.
$(document).ready(function () {
$('table tbody tr td:first-child a[data-in-error="True"]').each(function () {
$(this).parent().parent().addClass('error');
});
});
Hope this helps.
Is jQuery an option? If so, check out: http://devpinoy.org/blogs/keithrull/archive/2010/06/09/how-to-change-table-cell-color-depending-on-its-value-using-jquery.aspx