Develop Reference

EditableGrid - How to make every column header into individual filter

I am using EditableGrid (http://www.editablegrid.net/) Which creates some nice looking Editable tables
I'm Trying to modify the table header to make them into Individual filters like in example - https://phppot.com/demo/column-search-in-datatables-using-server-side-processing/
Current Filter textbox works very nicely but has a limit for searching one value for all columns.
I find many solutions for an individual column filter but I don't want to use other tables as they do not provide inline table editing functionality with dropdown and date picker, Is there a way I can implement it in EditableGrid?
I have also Asked this Question on Github (https://github.com/webismymind/editablegrid-mysql-example/issues/66) but the thread is not been active for a long time so I have very little hope of getting a solution from there.

In index.html update this code: see where //new code ---- starts and //new code ---- ends, try it out..
<script type="text/javascript">
var datagrid;
window.onload = function() {
datagrid = new DatabaseGrid();
//new code ---- starts
var list = document.getElementsByTagName("thead")[0];
for(var i = -1; i < list.childNodes.length; i++){
var input = document.createElement("input");
input.type = "text";
input.className = "filter";
list.getElementsByTagName("th")[i+1].appendChild(input);
}
var z = document.getElementsByClassName('filter')
for(var i = 0; i< z.length; i++){
z[i].addEventListener("input", function(e){
datagrid.editableGrid.filter( e.target.parentNode.querySelector("input").value, [i]);
})
}
//new code ---- ends
// key typed in the filter field
$("#filter").keyup(function() {
datagrid.editableGrid.filter( $(this).val());
// To filter on some columns, you can set an array of column index
//datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
});
$("#showaddformbutton").click( function() {
showAddForm();
});
$("#cancelbutton").click( function() {
showAddForm();
});
$("#addbutton").click(function() {
datagrid.addRow();
});
}
$(function () {
});
</script>

Disable table-hover on certain row in Angular Bootstrap

I have a table that displays selectable information. Sometimes there are child rows that are selectable.
I want the parent rows to be selectable if they have no children, otherwise only the child rows should be selectable. This is a select-only-one type of table.
This table works as expected. However, I want to disable the hover on the non-selectable parent row.
Here is a working plunker: http://plnkr.co/edit/Z0cgHKx2qxpekEE36O1K?p=preview
Here is an example of some of the code in the controller:
scope.parentSelected = [];
$scope.childSelected = [];
$scope.getParentDetails = function(parentObj) {
if(!parentObj.jobs || parentObj.jobs.length === 0) {
nonSelectOtherRows();
var index = $scope.pro.indexOf(parentObj);
$scope.parentSelected[index] = !$scope.parentSelected[index];
// get details for parent row using parentObj
console.log(parentObj);
}
};
$scope.getChildDetails = function(parentObj, childObj) {
nonSelectOtherRows();
var parentIndex = $scope.pro.indexOf(parentObj);
var childIndex = parentObj.jobs.indexOf(childObj);
$scope.childSelected[parentIndex] = [];
$scope.childSelected[parentIndex][childIndex] = !$scope.childSelected[parentIndex][childIndex];
// get details for parent and child rows using parentObj and childObj.
// childObj is the childRow selected
console.log(parentObj);
console.log(childObj);
}

Remove table-hover attribute.
Implement your ng-mouseover and ng-mouseleave functions.
$scope.hoverIn = function(row){
row.hoverEdit = true;//check selectable or not
};
$scope.hoverOut = function(row){
row.hoverEdit = false;
};
Define css class for hover.
.custom-hover {
background-color: red;
}
Finally add class to your tr
`'custom-hover': x.hoverEdit`
here is: http://plnkr.co/edit/CJxi86GyM8jMbtehPQgU?p=preview
Add your selectable control inside hoverIn and it will be work.

try to use ng-class. it will help you.

Kendo grid - get current editing row

How do you get the current row that's been edited even when it's not selected? I have a batch enabled Kendo grid that is navigatable. My goal is to manually edit data in a column using the dataItem.set() method. However, when you add a row it does not get selected automatically. Hence, vm.testGrid.dataItem(vm.testGrid.select()) cannot be used.
vm.testGrid.dataSource.get(e.model.get("Id")) gets the newly added row, but if multiple rows were added before saving, it will always get the first added row ("Id" is set to auto increment and is automatically generated by the database server, therefore all newly created rows will initially have 0 before saving).
vm.onEdit = function (e) {
$('input.k-input.k-textbox').blur(function (f) {
//var data = vm.testGrid.dataItem(vm.testGrid.select());
var data = vm.testGrid.dataSource.get(e.model.get("Id")); // will always get the firstly added row
data.set("LookupCol", "1000");
}
});
Is there a better solution to get the row that's been currently edited? Or is there a better way to edit the current row?

The following will give you the data item associated with the current cell:
var dataItem = grid.dataItem(grid.current().closest("tr"));
// You can then set properties as you want.
dataItem.set("field1", "foo");
dataItem.set("field2", "bar");

I used the JQuery closest() function:
vm.onEdit = function (e) {
$('input.k-input.k-textbox').blur(function (f) {
var data = vm.testGrid.dataItem($(e.container).closest("tr"));
data.set("LookupCol", "1000");
}
});

You can also write an extension for the grid, e.g. like this
// extend the grid
kendo.ui.Grid.fn.getCurrentDataItem = function() {
var that = this, current = that.current(), dataItem = null;
if (current) {
dataItem = that.dataItem(current.closest('tr'));
}
return dataItem;
}
JSFiddle example

slickgrid - How to loop through rows which are outside canvas?

I am having some markers on map and same number of rows in slickgrid?
What I want is when a marker is clicked the id of marker is matched with all rows and corresponding row should get selected.
Here is my code:
var $canvas = $(grid.getCanvasNode());
var $allRows = $canvas.find('.slick-row');
$($allRows).each(function() {
if ($(this).rowID == selectedMarker) {
$(this).addClass("active-row");
grid.scrollRowIntoView($(this).index());
}
});
It works fine only when the row which I want is present in the grid but the grid DOM contains only 8 rows at a time (The grid has 30 rows).
How can I loop through all data?

You shouldn't be modifying SlickGrid's DOM at all. SlickGrid will overwrite any changes as it's only rendering the rows in view (with some buffer). When you scroll past that buffer any changes you made to the DOM are lost.
You have to change the row's data and allow SlickGrid to add the appropriate classes to the DOM when it's rendering.
Edit:
SlickGrid setup:
dataView.getItemMetadata = metadata(dataView.getItemMetadata);
function metadata(metadataProvider) {
return function(row) {
var item = this.getItem(row),
ret = metadataProvider(row);
if (item && item.isActive) {
ret = ret || {};
ret.cssClasses = (ret.cssClasses || '') + ' active-row';
}
return ret;
};
}
Then when you click on a marker:
var item = dataView.getItemById(selectedMarker);
var row = dataView.getRowById(selectedMarker);
item.isActive = true;
dataView.updateItem(item.id, item);
grid.scrollRowIntoView(row);

Recursive Checkbox Selection in Treeview | Telerik MVC

I recently encountered an issue dealing with the Telerik Treeview component and handling recursive selection with checkboxes when handling larger data sets (500-1000+ nodes).
With smaller data sets (100-300 nodes) the Treeview and its selection methods work as follows (as they should):
Initially - all nodes are selected.
Clicking a parent node toggles selection of all of the child nodes.
Unselecting a single child node will unselect the parent (and any grandparent / top-level nodes)
Most of these things I believe are fairly commonplace when dealing with Treeviews and selection. The current method that is being used isn't the cleanest and calls an unnecessary amount of additional events to be fired during the selection process.
I was just curious if anyone had handled an issue similar to this before I began tearing apart the current code (available below).
Existing Selection Code:
$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) {
var isChecked = $(e.target).is(':checked');
var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
var item = $(e.target).closest('.t-item');
var checkboxes = item.find('.t-checkbox :checkbox');
$.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); });
var siblings = item.parent().find('> li .t-checkbox');
var siblingsLength = siblings.length;
var checkedLength = siblings.find(':checked').length;
if (siblingsLength == checkedLength) {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', true)
grandparentCheckBox.attr('checked', true)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
else {
var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
parentCheckBox.attr('checked', false)
grandparentCheckBox.attr('checked', false)
treeView.checkboxClick(e, parentCheckBox)
treeView.checkboxClick(e, grandparentCheckBox)
}
});

I found a solution that I feel will function at least effectively as of right now and works a great deal faster than the existing solution, even when dealing with very large data sets.
I created a simple function that fires upon the Checked event within the TreeView and handles all the necessary child selection:
function TreeView_Checked(e) {
var current = $(e.item).find(':checkbox:eq(0)');
//Check or uncheck all child nodes from this one
var children = $(e.item).find(':checkbox');
current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked');
}
which is implemented by adding the following within the TreeView declaration:
TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked"))

This code will select or deselect the parent along with all of its children. If you want the grand-parent, you can probably do .closest(".t-item")
$(document).ready(function () {
$("#btnSelectChildren").click(function () {
nodeCheck(true);
});
$("#btnDeselectChildren").click(function () {
nodeCheck(false);
});
});
function nodeCheck(isChecked) {
var treeView = $('#TreeView').data('tTreeView');
var selected = $('#TreeView .t-state-selected');
treeView.nodeCheck(selected, isChecked);
selected.closest('li').find(".t-item").each(function () {
treeView.nodeCheck($(this), isChecked);
});
}