Add master_checkbox into group bar of dhtmlx - dhtml

I want to put my master checkbox into the group bar of dhtmlXGrid. I just write a new stat_checkbox like
dhtmlXGridObject.prototype._g_stat_checkbox=function(c,n,i){
return !!n;
}
and use it inside group bar like
my_grid.groupBy(2,["#title","","","","","#stat_checkbox"])
But I don't know how to make my master checkbox can work like _in_header_master_checkbox
There is 2 issues here
1. Because of _g_stat_checkbox return n, so when I click on my master checkbox, the eXcell_ch() be called. How can I cancel this event?
2. How to check all grid in only this group?
Is there any solution for my issue?

Related

Unable to properly synchronize dcjs chart and regular bootstrap multi select with filters

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.

Kendo UI detail grid expansion on row click

I am using Kendo UI Grid master detail template like in this docs http://demos.telerik.com/kendo-ui/grid/angular , I am able to get the template by clicking in the hierarchy cell, I want to know if there is some easy way to expand the detail template by clicking anywhere on row.
Thanks!
To do that you can follow these steps:
Add k-on-change="handleChange(kendoEvent)" to trigger the function when we select any row,
dont forget to add k-rebind="gridOptions.selectable",
and i also prefer <div kendo-grid="grid"></div> so later on we can
select the grid instance
create $scope.handleChange = function(kendoEvent){....}to handle the event
and finally here is a kendo dojo example from yours that i've modified
EDIT:
As per your comment, you simply close all expanded row first then you can open the one which is selected. Add this $scope.grid.collapseRow($scope.grid.tbody.find("tr.k-master-row")); before $scope.grid.expandRow($scope.grid.tbody.find("tr.k-master-row.k-state-selected"));. Updated dojo

Change crossfilter groups via a checkbox

I'm trying to build a visualisation to graph what I've been reading this year.
Currently I have everything grouped via Quantity of novels. I'm wondering if it's possible to change the group in real time or if I'm stuck with a group once I've set it.
The code that I've got now to calculate the groups looks something like this:
function groupByType(dimension){
if($('#ValueType').is(':checked')) {
console.log("Pages")
return dimension.group()
.reduceSum(function(d) {
return d.Pages;
});
} else {
console.log("Volumes");
return dimension.group();
}
}
Whenever the checkbox (#ValueType) is clicked I'm calling a dc.redraw on the entire graph which I was hoping would change the way the group is being calculated but it's not doing so. Is there way to change the group dynamically or would I be better off just refreshing the page and passing a parameter when it loads?
It's a bit hard to tell, but it looks like every time you check or uncheck the checkbox, you create a new group. You do not want to do this as the groups stick around and continue getting updated. Things will just get slower and slower.
Just create the 2 groups upfront (and perhaps even 2 dc.js charts) and then let the checkbox control which group is assigned to the chart or which chart is displayed.

(DHTMLX Grid) Grouping show/hide column checkboxes

So I have a treegrid, and I want users to be able to not only show and hide columns, I want them to be able to show and hide columns in bulk. Right now, I'm using mygrid.enableHeaderMenu() in order to allow the users to show and hide columns. However, I have about 50 columns, and need to give them the ability to show/hide columns in bulk.
For example, a sample of my columns would be:
foo
bar
baz
unrelated
I want users to be able to show/hide the foo, bar, and baz columns using one checkbox, as well as be able to show/hide each column separately.
The shortest way seems to add your own context menu to the header, and call a needed functionality in the item clicking.
In case of using the dhtmlxMenu you may use:
menu = new dhtmlXMenuObject();
menu.renderAsContextMenu();
mygrid.hdrBox.id = "gridHeader";
menu.addContextZone("gridHeader");
Here is the tutorial about the dhtmlxMenu component:
http://docs.dhtmlx.com/menu__index.html
I wound up modifying the enableHeaderMenu function and adding the grouping mechanism in there.
To clarify, I used the source code in dhtmlxgrid_hmenu and created my own functions based off of that code. The actual grouping is done in _createHContext. To have it so that the checkbox for the group enabled or disabled grouping for the entire group, I copied the code for applyHideFunction, named it something else, and had that code apply setColumnHidden to all of the checkboxes in that group.

Get name of node in Kendo UI Multiple Select when you click

I am using the Kendo UI multiple select, and I want the name of the node which is currently selected when you click on it. This is not just when I click on X to remove the node, although I also want the name when I remove it.
In this example, when I click on the tags, I want the names such as "Europe" and "Africa".
I have tried this code, but it works only sometimes, and not when I click on X.
$('.k-multiselect-wrap li .k-delete').click(function() {
console.log('Select to remove it');
});
You need to use delegated events because the items are being added to the DOM after your initial binding, so regular .click event bindings won't work for any elements added in the future. For example:
$(document).on("click", "li.k-button span.k-icon.k-delete", function () {
console.log("Clicked on X: " + $(this).siblings().first().text());
});
See update jsFiddle

Resources