I would like to scroll to a specific column in the AG-Grid table Ag-Grid table.
The cypress command scrollTo() doesn't work for me for this kind of tables.
Do you have a idea how i can solve this problem?
Thank you!
did a work around for this by using keyboard command using .type
I have found a solution for my scroll problem.
Now I use the AG-Grid API link.
Example:
Cypress.Commands.add('ensureColumnVisible', (component: string, colId: string): Cypress.Chainable<void> =>{
return cy.getGridApi(component).then(api => {
api.ensureColumnVisible(colId);
return cy.log(`Scrolling column: '${colId}' was successfully!`);
})
});
cy.ensureColumnVisible('nameOfgrid', 'colID');
Related
I'm trying to get the row data from a table which is connected to a dataset. So as per the this article, since, I need the whole data of the selected row, I'm using OnCurrentIndexChange event handler to get the selected row's data from the dataset. But for some strange reason, the first row item will always be triggered on the load of the table/page.
Basically, the first row data will be selected on the load of the page/table. Is this a bug or am I doing something wrong?
Any help will be greatly appreciated.
Thanks,
Jilu
Though I couldn't get to work with OnCurrentIndexChange handler. But I found a work around by which I could fix this bug/issue for my application.
Solution:
Instead of using OnCurrentIndexChange handler of the dataset, I used OnSelectRow event handler to get the row index of the table and used that index to get the whole row data from the dataset. More on this get method, you can find here.
Below is the code for your reference:
export function tblCustomerList_rowSelect(event) {
$w("#dsCustomer").getItems(event.rowIndex, 1)
.then(result => {
let selectedRow = result.items[0];
console.log(selectedRow);
if (selectedRow !== null) {
let returnObj = {
"name": selectedRow.name,
"id": selectedRow._id
}
wixWindow.lightbox.close(returnObj);
}
})
}
Hope this will be helpful for people who are stuck with such kind of issue in wix.
Thanks,
Jilu
I've got a datatable with pagination and I've got anchors with popovers generated for each row but popovers are only shown on first results page. While filtering results or moving to another results page, popovers don't appear.
I wonder if someone already had the same problem and what I can do to fix this issue.
An alternative to ditscheri 's solution is using fnDrawCallback:
"fnDrawCallback": function ( oSettings ) {
$(".js_popover").popover({ html:true });
// $("[data-toggle=popover]").popover({ html:true });
},
The DataTables Plugin destroys and rebuilds the DOM elements on filtering/sorting. You might get along with something like this:
var myTable = $('#myTable').dataTable();
/* Apply the popover using the API */
myTable.$("[id^=popover-]").popover();
Here's some documentation on it: http://www.datatables.net/release-datatables/examples/advanced_init/events_post_init.html
If it doesn't help, you might want to provide a basic example of you code.
(Bootstrap 4, DataTables 1.10.25)
In my situation popovers worked on the first page - but NOT subsequent pages (page number > 1).
For my application this code allowed popovers to work on subsequent pages:
const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });
onCellSelect : function(rowid, iCol, cellcontent) {
$('#caseHistoryGrid').dialog('close');
$('#Case_Id').val(jQuery("#case").jqGrid('getCell', rowid,'caseId'));
$('#visitId').val(jQuery("#case").jqGrid('getCell', rowid,'visitId'));
alert($('#visitId').val()
);
}
when i click any cell. i get First VisitID only.
what s my Fault.
Please help.
Thanks in Advance
in This Code Not Problem But i get data from database using Ajax in tese data is formate
id
.....
give id is Not Unique So it gives the same celll
I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.
I tried adding
.Batch(true)
for the data source and below is my function for delete button outside the grid.
function deleteRule() {
var grid = $("#grid").data("kendoGrid");
grid.select().each(function () {
grid.removeRow($(this));
});
}
Any suggestions please ?
Yo mate,
How exactly do you remove that one row? Why you use the select method?
Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$('.cool:selected').each(function(){
grid.removeRow($(this).closest('tr'));
})
}
I hope you got the idea mate.
Good luck.
Here is what i use
works very well
$('#your-grid-id').data("kendoGrid").select().each(function () {
grid.dataSource.remove(grid.dataItem($(this).closest("tr")));
});
I've been messing around with autoNumeric, a plug-in for jQuery that formats currency fields.
I'd like to wire the plug-in so that all currency fields are formatted by the time the user sees the page, e.g., on load.
Currently, the default that I can't seem to get around is that fields are formatted upon blur, key-up or other action in the fields themselves.
I've been experimenting with the plug-in code and it looks like it will take this relative newcomer some time to resolve this, if at all.
Anybody on this?
Lille
Triggering 'focusout' event formats the field. Triggering 'change' does not work in the most recent version (1.7.4).
$('input.money').autoNumeric({aNeg: '-'}).trigger('focusout');
autoNumeric does all formatting after 'onchange' event fires. So all that you need is to programmatically fire this event. Like this:
$('input.money').autoNumeric({aNeg: '-'}).trigger('change');
Hope this helps!
I just ran into this problem myself. I had to make it more general, but this worked for me:
$('input.auto-numeric').ready(function(){
var format_options = {
aSign: '$'
};
$('input.auto-numeric').each(function(){
$(this).autoNumeric(format_options);
if($(this).attr('id')){
$(this).val($.fn.autoNumeric.Format($(this).attr('id'), $(this).val(), format_options));
}
});
});
This should work.
jQuery(function($) {
$('input.auto').ready(function(){
$('input.auto').autoNumeric();
var inputID = uniqueID; // use the jQuery.get() function to retrieve data
var formatValue = '1234.00'; // use the jQuery.get() function to retrieve data
if(jQuery().autoNumeric){
$('#id').val($.fn.autoNumeric.Format(inputID, formatValue));
}
else{
alert('plugin not available');
}
});
});
Bob
This is what I eventually did:
$(document).ready(function(){
$('input.auto').autoNumeric();
$('input.auto').each(function(){
var element = this
if(element.value !=""){
$('#'+element.id).val($.fn.autoNumeric.Format(element.id, element.value));
}
}
);
});
Another way of forcing formatting is using 'update' like
$(".input-numeric").autoNumeric('update');
In the current version 2.* and onward, this is done by default thanks to the formatOnPageLoad option that is set to true.
It's that simple ;)