I am using ag grid for table view in my project(angular 6).I used on cell clicked event (cellClicked).It was working ,my problem is that it is applying for entire row cells.I also used this one : [suppressRowClickSelection]="true".but it was not working.I don't want the other cells in the row not to be triggered.
As I've mentioned in the comment, cellClicked will be fired irrespective of suppressRowClickSelection's value.
If you'd like to handle cellClicked event only for some specific column, you have to manage it yourself.
Apply a check in cellClicked handler as below.
onCellClicked: (params) => {
if (params.colDef.field === '') {
// do your stuff
}
}
Related
I'll try to be as brief as possible as my situation is unique and I am a fairly new programmer.
TL:DR - Cannot get the row to update, table does not remember initial values when editing, cell.setValue() creates recursive loop, cell.getRow().update() seems to do nothing, row does not resize in the event of editing working (still does not hold on to previous values)), unsure if mutator or cellEdit() callback are potential solutions.
I have JSON data populating my table from an AJAX call to a Java backend. One of the columns can either be one item, a list of multiple items, or none at all. I am using a custom formatter to populate that cell with the list of items, followed by icons to remove those items...
Some text here X
Some other text X
And some more X
When clicking the X icon, it should remove the item, and when clicking the text, it will drop down a list to choose another option.
Some text here X
Some other text X
Added another line X <----removed the previous item and selected a new
The problem I am having is that the table does not continuously hold onto previous values nor concatenates them with new selections. I have written some code to take care of the concatenation issue, but it still does not save that info within the table. I have tried to use cell.setValue() but this creates a recursive loop as all my code is within the custom formatter. I have also tried cell.getRow().update() but this seems to do nothing.
Also, clicking into the drop down and clicking away without selecting a value will still send the previous value as though it was clicked again. I was able to get it to function once, but it only changed the most recent values and did not include the original ones and it did not resize the row to be smaller.
I am unsure if a custom mutator would solve my issue, or even how to get the mutator to interact with the formatter to update the cell every time a change has been made. I also have a cellEdited: function(){} callback that is going to be designed to take the entire row of information as a JSON object to save it within a DAO and considered that I might be able to solve the issue there?
Here is my code for that column. This currently will load the page with the initial design yet does not work with editing. "cell.setValue()" and "cell.getRow().update()" are currently not included because they weren't working properly...
title: "Groups",
field: "associatedGroups",
variableHeight: true,
headerFilter: true,
headerFilterPlaceholder: "Search by Group...",
formatter: function (cell, formatterParams, onRendered) {
var data = [];
var newValue = cell.getValue();
var oldValue = cell.getOldValue();
var newValueIsArray = $.isArray(newValue);
var oldValueIsArray = $.isArray(oldValue);
if (oldValue !== null && newValue !== null) {
if (!oldValueIsArray && newValueIsArray) {
data = data.concat(newValue);
data.unshift(oldValue);
} else if (oldValueIsArray && !newValueIsArray) {
data = data.concat(oldValue);
data.push(newValue);
} else {
data.push(oldValue);
data.push(newValue);
}
} else {
data = newValue;
}
<!-------------------Value of "data" used here to determine visual layout----------------->
},
editor: "select",
responsive:
0,
editorParams:
{
values: groupNames
}
,
sorter: "string",
width:
212
},
I'm using a checkbox to create a toggle switch as shown in this tutorial
The switch lives in a form where questions can be added dynamically. On submission the form posts as array of each answer back to the page to be processed however as the off switch doesn't pass a value back to the form the answers get out of sync with the answers for the other text fields. Is there any way to set a value for the off switch, i.e. when a check box is left unchecked?
I've tried to use the following to set my off checkboxes to off however it just seems to animate all the switches to on on form submission, anyone any ideas as to what I'm doing wrong?
$('form').submit(function(e){
var b = $("input:checkbox:not(:checked)");
$(b).each(function () {
$(this).val(0); //Set whatever value you need for 'not checked'
$(this).attr("checked", true);
});
return true;
});
You probably want to use Javascript to set a value for each checkbox "switch" in one of two ways:
Option 1: in the html of the switch elements/checkboxes, set the value attribute to zero by default. Then add a javascript click handler for the toggle to check its current value and toggle to the opposite state/value.
Option 2: add Javascript to the form's submit handler (on submit) that checks for any switch elements which have no values and set them to zero before processing form.
Either way should pass a value at all times, and your form should be able to keep track of all input states.
This snippet did the trick, as Anson suggested this finds all the checkboxes and sets them to either on or off on form submission:
$('form').submit(function () {
$(this).find('input[type="checkbox"]').each( function () {
var checkbox = $(this);
if( checkbox.is(':checked')) {
checkbox.attr('value','1');
} else {
checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
checkbox.prop('disabled', true);
}
})
});
$(function() {
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
// file; it is included here to show how you can modify the default classes
$.tablesorter.themes.bootstrap = {
// these classes are added to the table. To see other table classes available,
// look here: http://getbootstrap.com/css/#tables
table : 'table table-bordered table-striped',
caption : 'caption',
// header class names
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
sortNone : '',
sortAsc : '',
sortDesc : '',
active : '', // applied when column is sorted
hover : '', // custom css required - a defined bootstrap style may not override other classes
// icon class names
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
footerRow : '',
footerCells : '',
even : '', // even row zebra striping
odd : '', // odd row zebra striping
sortMultiSortKey: 'shiftKey',
};
$('#resetsort').click(function(e) {
$("#receipts").trigger('sortReset').trigger('applyWidgets');
return false;
});
// call the tablesorter plugin and apply the uitheme widget
$("#receipts").tablesorter({
// this will apply the bootstrap theme if "uitheme" widget is included
// the widgetOptions.uitheme is no longer required to be set
theme : "blue",
widthFixed: true,
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
// widget code contained in the jquery.tablesorter.widgets.js file
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
widgets : [ "uitheme", "filter", "zebra" ],
widgetOptions : {
// using the default zebra striping class name, so it actually isn't included in the theme variable above
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
zebra : ["even", "odd"],
// reset filters button
filter_reset : ".reset",
// extra css class name (string or array) added to the filter element (input or select)
filter_cssFilter: "form-control",
// set the uitheme widget to use the bootstrap theme class names
// this is no longer required, if theme is set
// ,uitheme : "bootstrap"
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".ts-pager"),
// target the pager page select dropdown - choose a page
cssGoto : ".pagenum",
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// output string - default is '{page}/{totalPages}';
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
});
});
function yeah() {
return confirm('Are you sue you want to delete?');
$("#receipts").trigger('applyWidgets');
return false;
}
Hi,
Newbie here running Tablesorter also with Filter & Sort. Everything working perfectly (including reset buttons). As a bit of background, Im using a DotNet Nuke site with a module that delivers the rows of data.
Part of each row is a hyperlink that fires deleting a row. It also includes a section where I can insert some JavaScript.
Problem is when I delete a row, the zebra widget doesn't work. (All rows are white)
Other part of pressing the delete hyperlink is that Are you sure message come up.
My understanding is best approach here is to create a function since 2 actions need to be performed.
Function Yeah is my attempt. The page also has a resetsort button which works fine.
Ive tried putting my function just below the resetsort button but that didnt have any effect.
Thanks in advance for any assistance in getting this function going.
The sortReset method should update the widgets automatically after being applied, so I'm not sure why it isn't happening in this case.
Anyway, when a "sortReset" is triggered, some processing needs to occur, so using "applyWidgets" immediately after won't works because there needs to be a delay.
The "sortReset" trigger does include a callback, so try this code:
$("#receipts").trigger('sortReset', [function(){
$('#receipts').trigger('applyWidgets');
}]);
I'll try to figure out why this isn't happening internally when I get some free time.
Using Kendo Asp.net MVC Grid in Ajax Batch Mode.
Having three columns - Qty, Rate, Total. Need to achieve real-time calculation on change. Written following function to update data.
function grid_change(e) {
if (e.action === "itemchange") {
var item = e.items[0];
item.Total = item.Qty * item.Rate;
}
}
But the column does not reflect the calculated value until focus is moved over it. How to update / refresh the cell display as soon as the change event is completed?
Changed the calculation statement (see below) and all the related columns started reflecting changes immediately after the focus was moved out.
function grid_change(e) {
if (e.action === "itemchange") {
var item = e.items[0];
item.set("Total", item.Qty * item.Rate); // Changed to this
}
}
Note: The columns that you are going to update at real-time must be editable.
I use KendoUI grid with popup edit mode. After applying filter to any column it is not possible to add new object correctly. Pressing Add button many times does not show edit popup. But after clearing the filter empty objects are shown in the grid.
Is there any workaround?
I found a workaround. Instead of standard Add button use toolbar template in which add link "Add" with custom handler triggering grid add. In that handler check if filtering is used on grid and if so store current filtering to a var and remove filtering. Also bind to grid "save" and "cancel" events handlers which will apply previous filtering after adding new object (or cancelling).
<kendo:grid-toolbarTemplate>
<div>
<a class="k-button k-button-icontext" onclick="addItemHandler()">Add</a>
...
var gridFilter;
function addItemHandler() {
var table = $("#myGrid").data("kendoGrid");
gridFilter = table.dataSource.filter();
if (gridFilter) {
table.dataSource.filter(null);
}
table.addRow();
}
function gridSavedHandler(e) {
restoreFilter(e.sender);
}
function gridEditCanceledHandler(e) {
e.preventDefault();
e.sender.cancelChanges();
restoreFilter(e.sender);
}
function restoreFilter(table) {
if (gridFilter) {
table.dataSource.filter(gridFilter);
gridFilter = null;
}
}
$(document).ready(pageInitHandler);
function pageInitHandler() {
var table = $("#myGrid").data("kendoGrid");
table.bind("save", gridSavedHandler);
table.bind("cancel", gridEditCanceledHandler);
}
Workaround is complicated one but really works.