I use the following solution on CRM 4 in order to colorize the CRM grid, depending on the values of several fields. It works fine, except the rows are not highlighted with a different color anymore when they are selected.
This is the usual interface:
This is my interface:
Is there anyway to get back the highlight color? And to change it?
Thinking about this a bit more, the issue here I suspect is that you are blanket changing the row colour when you initialise the grid. From the [linked] code:
if (new_date_value <= current_datetime) {
InnerGrid.rows[i].style.backgroundColor="ff0066";
} else {
InnerGrid.rows[i].style.backgroundColor="ff6600";
}
My first thought is to colourise only some of the columns in the row. Row highlighting would then apply to the rest of the row. This is just a quick lash-together. Further, it is untested.
You will get the idea and maybe write this to better to suit your requirements
E.g:
var colour1 = "ff0066";
var colour2 = "ff6600";
if (new_date_value <= current_datetime) {
colouriseRow(InnerGrid.rows[i], colour1);
} else {
colouriseRow(InnerGrid.rows[i], colour2);
}
function colouriseRow(myRow, cols){
for(var i = 0; i < myRow.cells.length; i++){
if(i > 2){ // skip the first 3 columns, colourise the rest
myRow.cells[i].style.backgroundColor=myColour;
}
}
}
Related
I am using a dropDownList to show some values in order to filter results on a grid.
I have use the 'change' event to see when the grid must be updated
$('#view-mode-selector').kendoDropDownList({
change: onMChange
});
in the method onMChange I am trying to show the progress bar with
kendo.ui.progress($("#grid), true);
and at the end of the method when all is done I have
kendo.ui.progress($("#grid), false);
But the data loads and I do not see the progress bar.
If I remove the last statement (the 'false' one) I can see the progress bar, but it never disappears.
If I debug, It appears and disappears when the data is ready.
It is not an issue of the data loading too fast, sometimes the data takes 5 seconds to be ready.
The data is already in the browser, I am just showing or hiding columns.
Kendo version v2016.2.714
Thanks
EDIT
on onMChange I have some ifs where I populate an array (columnsToShow) with the name of the columns I want to show (everything else will be hidden) then I call a function with this code:
showHideColumn: function(columnsToShow) {
var grid = $(this.gridId).data("kendoGrid");
var show = false;
for (var i = 0; i < grid.columns.length; i++) {
show = false;
if (columnsToShow.length > 0) {
for (var j = 0; j < columnsToShow.length; j++) {
if (columnsToShow[j] == grid.columns[i].field) {
grid.showColumn(i);
columnsToShow.splice(j, 1);
show = true;
break;
}
}
}
if (!show) {
grid.hideColumn(i);
}
}
}
That code seems to be very inefficient at hiding/showing columns, all activity stops for few seconds when I want to show all columns (after having hidden some), I have around 30 columns and 30 rows.
Your question is a little misleading. Is the #grid element you are having difficulty displaying the loading icon for a grid control (as per the name of the element) or a drop down control (as per the title of the question)?
If grid
In order to show the loading icon I used:
kendo.ui.progress($("#grid").data("kendoGrid").element, true);
And to hide:
kendo.ui.progress($("#grid").data("kendoGrid").element, false);
If drop down
I haven't had to force display loading icons for dropdowns however there is an example here, noting the comment specifying:
The element must have a position:relative style applied
Additionally further down, it is noted that the element cannot have child elements.
This is similar to dc.js - how to create a row chart from multiple columns but I want to take it a step further and enable filtering when the rows are clicked.
To answer the question "What is it supposed to filter?" - Only show records with value > 0. For example when Row 'a' is clicked it will only show records with value for a > 0. Hence, the Type pie chart will change to foo:1, bar:2
I guess I have to overwrite onClick method? But I am not sure how.
chart.onClick = function(d) {}
jsfiddle from the answer to the above question - http://jsfiddle.net/gordonwoodhull/37uET/6/
Any suggestions?
Thanks!
Okay, here's a solution where if a record has values > 0 for any of the selected rows, that record is included. As #Ethan said, it's a matter of defining a filter handler:
sidewaysRow.filterHandler(function(dim, filters) {
if(filters && filters.length)
dim.filterFunction(function(r) {
return filters.some(function(c) {
return r[c] > 0;
});
})
else dim.filterAll();
return filters;
});
Also, since the filterFunction only has access to the key, we pass the entire record through as the key. This doesn't make a whole lot of sense in the "real world" but since we're already using crossfilter sideways, it is probably fine:
var dim = ndx.dimension(function(r) { return r; });
New version of the fiddle: https://jsfiddle.net/gordonwoodhull/b7cak6xj/
BTW it sounds like you want to only select one row at a time. Here's how to do that:
sidewaysRow.addFilterHandler(function(filters, filter) {
filters.length = 0;
filters[0] = filter;
return filters;
})
(This will be simpler in dc 2.1 on the develop branch, where the charts use the result of the filter handlers instead of requiring you to modify the filters in place; the body becomes just return [filter];)
I have a slickGrid which is using dataView to render student grades. I would like to default sort the grid prior to it being rendered by column with id = 0 and field = 'Student'. How can I trigger sort event on this column before the grid renders?
The reason why I want to do this is because I have a really strange bug that can be seen in this video:
http://screencast.com/t/Oz0vlcsQPp
The sorter works fine on the 1st asc/des sort but then it goes all out of whack. Noting is sorted the way it should be. However if I 1st sort by student name then the sorter on any other column works just fine without any issues no matter how many times I sort. If I refresh the page the problem happens again.
Since I cannot even begin to understand why is this happening my only hope is to initially fire a sort on the student column and bypass the problem all together.
NOTE: I am using the naturalSort.js from here: https://github.com/overset/javascript-natural-sort/blob/master/naturalSort.js. I don't think the sort is the issue since it works fine when I initially sort by student name... This one is breaking my brain...
EDIT: As you can see in the video my grid cell data looks something like "A (78.65%)". My data structure looks like this:
"Column_3":{"displayValue":"A (100%)","sortValue":100.0},
"Column_4":{"displayValue":"B (87.53%)","sortValue":87.53},
"Column_5":{"displayValue":"?","sortValue":-1.0}
I am sending over an object for sorting reasons in order to use percentage as a sorting criteria. In order to make this work I have defined dataItemColumnValueExtractor in grid options as such:
self.options["dataItemColumnValueExtractor"] = getItemColumnValue;
function getItemColumnValue(item, column) {
var values = item[column.field];
return values.displayValue !== undefined ? values.displayValue : values;
}
This allows me to use the sortValue data to sort the grid. Here is my sort event:
grid.onSort.subscribe(function(e, args){
var comparer = function(a, b) {
var result;
if (a[args.sortCol.field].sortValue !== undefined && a[args.sortCol.field].sortValue !== null && b[args.sortCol.field].sortValue !== undefined && b[args.sortCol.field].sortValue !== null) {
result = naturalSort(a[args.sortCol.field].sortValue,b[args.sortCol.field].sortValue);
}
else {
result = naturalSort(a[args.sortCol.field],b[args.sortCol.field]);
}
return result;
};
dataView.sort(comparer, args.sortAsc);
});
Bottom line is everything works fine except the above mentioned issue with sorting... Any help would be appreciated...
First of all...your issue for first time sorting is something else which can be fixed...
But if you want to sort a col on grid load you can trigger the click event....
$(function () {
for (var i = 0; i < 50000; i++) {
var d = (data[i] = {});
d["num"] = i;
.
.
d["effortDriven"] = (i % 5 == 0);
}
dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
$('.slick-header-columns').children().eq(2).trigger('click'); // eq(2) for the 3rd col
}
I have 6 textboxes at the top of the screen that update an entire column(one textbox per column) based on any changes. I was selecting the columns based on their class (.l#). Here is the code (issues to follow):
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = [".l1", ".l7", ".l8", ".l9"];
var fields = $(bound[id]);
for (var i = 0; i < fields.length; i++)
{
fields[i].innerHTML = $(ctrl).val();
}
};
which is bound to the keyup event for the text areas. Issues are:
1) initially fields.length was -1 as I didn't want to put data in the "add new
row" section at the bottom. However, when running it, I noticed the
final "real" record wasn't being populated. Also, when stepping through, I
noticed that the "new row" field was before the "last row" field.
2) when doing it this way, it is purely superficial: if I double click the field,
the real data hasn't been changed.
so in the grand scheme of things, I know that I was doing it wrong. I'm assuming it involves updating the data and then forcing a render, but I'm not certain.
Figured out how to do it. Modified the original code this way:
function UpdateField() {
var ctrl = this;
var id = parseInt(ctrl.id.replace("item", ""), 10) - 1;
var bound = ['title1', 'title2', 'title3', 'title4'];
var field = bound[id];
for (var i = 0; i < dataView.getLength(); i++)
{
var item = dataView.getItem(i);
item[field] = $(ctrl).val();
dataView.updateItem(i, item);
}
grid.invalidate();
};
I have 6 textboxes (item1-item6) that "bind" to fields in the sense that if I change data in a textbox, it updates all of the rows and any new rows added also have this data.
Parts where the two issues can be explained this way:
1) to work around that, though still it would be a presentational fix and not a real updating of the underlying data, one could force it to ignore if it had the active class attached. Extra work, and not in the "real" direction one is going for (masking the field).
2) It was pretty obvious with the original implementation (though it was all I could figure out via Chrome Dev Tools that I could modify at the time) that it was merely updating a div's content and not actually interacting with the data underneath. Would look nice, and perhaps one could just pull data from the item1-item6 boxes in place of the column if it is submitted, but if someone attempts to modify the cell, they'll be looking at the real data again.
I am trying to filter a Google line chart columns and using the code shared here in Google Charts-Code for Category Filter
It all works well however I have a number of columns and would like to have the chart start with just one column displayed and allow the user to add in any of the additional columns as needed.
What I've found is that if I play with the initState variable to set it to the one column I want to display initially, it will have that column shown in the selector section but still displays all the columns initially until I select an additional column when it hides the rest and just displays the two I have selected.
So then I tried turning off this part of the code:
// put the columns into this data table (skip column 0)<br>
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
and replacing it with
columnsTable.addRow([1, data.getColumnLabel(16)]);
initState.selectedValues.push(data.getColumnLabel(16));
which sets the column i'm after (column 16) as the selected column in the selection list but removes the other columns from the list of available columns and still displays all 16 columns.
How can I set this up so it displays the single selected column's data initially yet still gives the ability to pick other columns from the selector?
You want to keep the columnstable.addRow call inside the for loop, as it populates the DataTable used to provide the list of columns. You can set the selectedValue variable as you have it:
// put the columns into this data table (skip column 0)<br>
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(16));
In order to make the chart draw properly with the initial selection, we need to make a small adjustment to the structure, putting all of the updating code into its own function, and then calling that as necessary:
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
Here's a working example: http://jsfiddle.net/asgallant/WaUu2/157/.