Develop Reference

How to prevent Row selection on custom elements click in UI-GRID

I'm facing a problem in using UI-GRId with row selection and custom cell elements:
The sample plunker is here : http://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview
$scope.gridOptions = { showGridFooter:true,enableRowSelection: true, enableRowHeaderSelection: false };
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];
You can see that on row click, the respective row gets selected, while if you tend to select the dropdown options implicitly the row selection event also gets fired, I want that on elements click like dropdown here the row selection event should not be triggered.
Pls guide.

Interesting question, haven't run into it yet, but I am sure it's only time before I do. I've created a plunk to demonstrate my solution.
Basically, what I have do is registered a watcher, as mentioned by AranS. From there, we have two objects to work with: the row, and the event that occured. Since the event object discloses which element was selected (clicked), we can identify if it was a DIV, or something else. In the event of the change in the select list, the value of evt.srcElement.tagName is 'SELECT'.
http://plnkr.co/edit/k2XhHr2QaD1sA5y2hcFd?p=preview
$scope.gridOptions.onRegisterApi = function( gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
if (evt)
row.isSelected = (evt.srcElement.tagName === 'DIV');
});
};

ui-grid's API allows controlling row selection. Look at this answer from another thread: https://stackoverflow.com/a/33788459/5954939. Basically you can use the event rowSelectionChanged or the isRowSelectable. Let me know if you need an example.

ag-grid set the column header to be a checkbox,and do the select all or deselect all column,other than only groups

when using ag-grid, I want to set the first column header to be a checkbox,and do the select all or deselect all column action on all rows other than only groups.

Should anyone come here looking for answers this feature is already in ag-grid, just place headerCheckboxSelection: true in your column's definition.
See docs here

In gridOptions:
angularCompileHeaders: true
Where you are defining your columns, define the first column as such:
{
field: 'RowSelect',
headerName: ' ',
checkboxSelection: true,
suppressMenu: true,
suppressSorting: true,
headerCellRenderer: selectAllRenderer
},
In that file define the renderer:
function selectAllRenderer(params) {
var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
var eHeader = document.createElement('label');
var eTitle = document.createTextNode(params.colDef.headerName);
eHeader.appendChild(cb);
eHeader.appendChild(eTitle);
cb.addEventListener('change', function (e) {
if ($(this)[0].checked) {
params.api.selectAll();
} else {
params.api.deselectAll();
}
});
return eHeader;
}
Please note that the creator is currently working on making this a feature, but this is the current work-around. Check here for updates and a more generic non-angular version: selectAll Feature Discussion

Add click event to the summary row of grid in extjs

Asked this question yesterday but not getting any response to posting it again in diffrent words-
I have two columns with summary row-
var cols = [
{ id: 'myCol1', header: 'Price1', dataIndex: 'PRICE1', type: 'float', width: 50, summaryType: 'sum' },
{ id: 'myCol2', header: 'Price2', dataIndex: 'PRICE2', type: 'float', width: 50, summaryType: 'sum' },
];
I want to add cellclick event to these summary row so that on click I can open a new window
If I use cellclick event of grid, it works for all cells except this summary row.
Is there any other event which I can use so that I would be able to click on it.
UPDATE:
I have used following listener which is not working for summary row
listeners: {
cellclick: function(grid, rowIndex, cellIndex) {
// do whatever
},
scope: this
}

As far as I know, there's no built-in event for summary row click. What you can do is add a listener to the cell element itself.
You can do that easily by using the delegate option of the listener. But this option is only available for DOM elements events, so we also have to use the element option to hook our event on the grid's body element (alternatively, you can use something like myGrid.getEl().on({ ... })).
Here's an example of listeners that you would add directly to your grid's config:
listeners: {
scope: this
,click: {
element: 'body'
// Would have been great to use '.x-grid-row-summary .x-grid-cell',
// but delegate only accept a *simple selector* which, seemingly,
// means just one class...
,delegate: '.x-grid-cell'
,fn: function(e, target) {
// Remove the condition if you want to catch all cells. You won't
// have all the arguments that are available in the cellclick
// event, though.
if (Ext.fly(target).up('tr').is('.x-grid-row-summary')) {
// The cellIndex is assigned by the table view when it render the
// cell element.
alert('Click on summary cell at index ' + target.cellIndex);
}
}
}
}
Unfortunately, this kind of code relies on class names and the cellIndex property that are set by Ext, and that may change in the future... Keep that in mind when you upgrade the lib!

I am not sure about the code u have used adding event for row click, but still i am adding this code to grid panel hope it helps,sry if u have tried already.. I have edited this below will do i believe..
listeners: {
cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var fieldName = iView.getGridColumns()[iColIdx].dataIndex;
console.log(fieldName );
}
}

tablesorter does not work when i add more columns

I have a table where i sort on the second column. by default i have 8 columns
and the rows can vary, depending on how many things i add.
The sorting works when i have the standard 8 columns but when i mark a checkbox and save which indicates that more info will be generated dynamiclly in my table then the sorting does not work anymore.
code:
$.tablesorter.addParser({
id: 'input_text',
is: function (s) {
// return false so this parser is not auto detected
return false;
},
format: function (s) {
return s;
},
type: 'text'
});
// Tablesorter
if ($(".attendanceList tbody tr").length > 0) {
$(".attendanceList").tablesorter({ headers: { 1: { sorter: false },
2: { sorter: 'input_text' },
3: { sorter: false },
4: { sorter: false },
5: { sorter: false },
6: { sorter: false },
7: { sorter: false },
8: { sorter: false },
9: { sorter: false },
10: { sorter: false }
},
sortList: [[2, 0], [0, 0]]
});
}
I used firebug to see what the problem was and my "s" paramater(check above) is allways an empty string ("").
step by step:
i mark a checkbox and press a save button. when that is done i press on another button that triggers a popup and gets me my table, now the table has 10 columns but the second column will no longer perform the sort as it did before.
Have i missed something? I have read up on the tablesorter plugin and I have not found anyone with similar issues,
Thanks!

I see two issues with what you are describing; and hopefully you're using my fork of tablesorter.
1) To get the value of a checkbox, you'll need to search the cell for an input and check for updates. Note this parser will work with the original tablesorter, but it won't update (using the updateCell method) properly. Note this code is from the parser-input-select.js file, and can be seen working in this demo.
// Custom parser for including checkbox status if using the grouping widget
// updated dynamically using the "change" function below
$.tablesorter.addParser({
id: "checkbox",
is: function(){
return false;
},
format: function(s, table, cell) {
// using plain language here because this is what is shown in the group headers widget
// change it as desired
var $c = $(cell).find('input');
return $c.length ? $c.is(':checked') ? 'checked' : 'unchecked' : s;
},
type: "text"
});
// update select and all input types in the tablesorter cache when the change event fires.
// This method only works with jQuery 1.7+
// you can change it to use delegate (v1.4.3+) or live (v1.3+) as desired
// if this code interferes somehow, target the specific table $('#mytable'), instead of $('table')
$(window).load(function(){
// resort the column after the input/select was modified?
var resort = true,
// this flag prevents the updateCell event from being spammed
// it happens when you modify input text and hit enter
alreadyUpdating = false;
$('table').find('tbody').on('change', 'select, input', function(e){
if (!alreadyUpdating) {
var $tar = $(e.target),
$table = $tar.closest('table');
alreadyUpdating = true;
$table.trigger('updateCell', [ $tar.closest('td'), resort ]);
// updateServer(e, $table, $tar);
setTimeout(function(){ alreadyUpdating = false; }, 10);
}
});
});
2) The only thing that isn't clear from the question is if the table is being built dynamically within the popup, or if the table with the checkbox is being modified, then copied to a popup?
Note that the above method only updates the state of the checkbox within the table. It won't include any dynamically added columns to an already initialized table. In that case, you'll need to use the updateAll method, but it will need to be triggered after the table contents have been updated.
$table.trigger('updateAll', [ resort ]);
If you could share the code that is run between the time of "saving" your checkbox choices and initializing the popup, it would help make the issue more clear.
Update: to parse an input, you need to get the value of the input element. The s within the parser format function only contains the text found within the table cell. When there is only an input within the table cell, no text is returned because the input element doesn't contain text, it has a value. So instead of using the "checkbox" parser I shared above, use this "input" parser; but as stated before, this parser will work with the original version of tablesorter (v2.0.5) but will not work properly if the "updateCell" method is used.
$.tablesorter.addParser({
id: "inputs",
is: function(){
return false;
},
format: function(s, table, cell) {
return $(cell).find('input').val() || s;
},
type: "text"
});
This parser also requires the code within the $(window).load(...) shown above to allow updating the parsed input for sorting when the user changes it.

After inserting the dynamically-generated content, you just need to trigger an update. It looks like your table is identified with the "attendanceList" class, so the command after the dynamic update would be:
$(".attendanceList").trigger("update");

How do you handle row onclick events using Flexigrid?

My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.
I'm looking for a clear example on how to handle row onclick events using flexigrid.
I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)

In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
and then create a callback:
function procMe( celDiv, id ) {
$( celDiv ).click( function() {
alert( id );
});
}

A better solution
Adding process to colModel didnt work for me.
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
this solution below is what I'm using:
var gridRows = $("#data-grid tbody tr");
gridRows.click(function (event) {
displaySelectedItem($(this).attr('id').substr(3));
return false; //exit
});

Flexigrid column as link
colModel: [
{
display: 'DomainName', name: 'DomainName', width: 180,
sortable: true, align: 'left',
process: function (col, id)
{
col.innerHTML = "<a href='javascript:domainEdit(" + id + ");'
id='flex_col" + id + "'>" + col.innerHTML + "</a>";
}
}]
Link Function
function domainEdit(domainID) {
alert('domainID' + domainID);
}

I think this variant little better than whoabackoff
$('.TableName').click(function(event){
$('.res').html('dbl');
alert('dbl');
});

does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx
you can have a look at it with firebug, to see where the event is hooked.
keep in mind that the flexigrid.js file is a bit different than the one from the official project.