Unable to properly synchronize dcjs chart and regular bootstrap multi select with filters - dc.js

Please see this pen
I am attempting to synchronize the select menu's with the filters in the sales by branch chart.
if you filter the chart the select menu has its filters changed but if you try the other way the multi-select fails to work correctly after removing the first filter.
has anyone made anything similar work.
I have a feeling that I am doing something stupid.. cause this should not be this hard
here is the on change for the select menu
$('#branchselect').selectpicker('refresh')
$('#branchselect').on("change",function(){
console.log("on chanage")
var filters = [];
//fromonchange =true;
$.each($("#branchselect option:selected"), function(){
filters.push($(this).val());
});
console.log(" on change dd Filters")
console.log(filters)
console.log("on change chart filters")
console.log(salesbybranch.filters())
bfilter =[]
bfilter[0] = filters
salesbybranch.filter(bfilter)
dc.redrawAll()
});
I don't see what is causing the select to start acting like a single select unless it is the toggle nature of how the chart filters work?
The easiest way to see the difference in behavior is to note that both the select and the chart start with all items selected. then start deselecting/selecting items in the chart and note that the select stays in sync.
reload the page and then try the same from the select after the second branch is deselected all items but the last clicked item are deselected.

Related

Remove Item from Kendo Grid without refreshing datasource

I have a Kendo Grid where one of the columns is a Boostrap progress bar. It is animated and represents a file upload.(the width value is modified with angular)
Once the item is done I remove the item with the remove function like this"
Grid.dataSource.remove(item);
However all the rest of items in the grid get refreshed somehow and the progress bars go back to zero and get refilled. So if an item in the list is at 70%, it will go back to zero and get refilled quickly.
It happens very fast in a split second but it just looks bad.
Is it possible to stop the refresh of other items and only remove a single item in the datasource?
Here is what has been working for me, as long as you have selected the row you want to remove.
var grid= $("#Grid").data("kendoGrid");
grid.removeRow(grid.select());
If you have not manually selected it, you can do it via js:
grid.select(-1); //this cleans the current selection
var tr = $("#Grid").find("tbody").find("tr")[index]; // 0 based index of the item you want to select
grid.select(tr);
Try that and let me know if it helped

highcharts - onclick event handlers redraw/remove

Currently I have 4 charts. The selection (via column or legend) of a category from the main one triggers multiple events. It changes the selected item's color on two charts and it creates two more charts.
For the two created charts, I'm having problems with redrawing/removing (that is what I'm assuming I will have to do) when the column/legend is deselected.
I may be wrong but from what I've looked at, it seems that when you prevent show/hide it doesn't change the visibility property so I wasn't sure if there was a way to use that.
Any help would be appreciated!
Fiddle here: http://jsfiddle.net/jlm578/gy9og69r/4/
I also thought about whether I needed to add it into the logic of the function (possibly one below) or if the sibling aspect needed to be added to the others.
function drawSignifNonSignifEruptionsChart(series){
if (series.index == '0'){
var eruptVEI = ['VEI 0'];
var signifErupt = [10];
var nonSignifErupt = [600];
}

Select multi items all at once in Kendo UI Multi-Select?

When use multi-select control in Kendo UI, it seems we have to select items one by one, i.e. click one item, the drop down list will collapse, then we have to click the multi-select control again to select the next item. Is it possible that when drop down list drops, user can select multiple items at the same time, so multiple items can add to the control at the same time, i.e. use CTRL + Mouse to select multiple items?
For example, in the below image, I want to select Nancy and Robert (i.e. use CTRL+MOUSE) and add them to list at the same time. Is it possible?
Thanks
Set autoClose to false:
$("#multiselect").kendoMultiSelect({
autoClose: false
});

Click an element in jqgrid and select the row it is in

When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.

Telerik grid manage filter icons

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 :)

Resources