Develop Reference

How to prevent scrolling on like events using Socket.io? - Angular 7

When Array Element Update Use Socket.io then Page Scrolled Down in Angular 7. Please Tell How to stop page scroll down in like event.
this.socket.on(discussion.id, (reponse: any) =>
{
for (const [index, discussion] of this.discussionList.entries()) {
if (reponse.data.id == discussion.id)
{
reponse.data.displayComment = discussion.displayComment;
this.discussionList[index] = reponse.data;
console.log('Updated');
break; //Stop this loop, we found it!
}
console.log('finding....');
}
});

You basically updating some random item in array which is rendered as list. Of course your list will change content and new content can appear in current view. Its how html in browser works - nothing related to "Angular 7". Scroll not changed - changed what is visible in current scroll.
What you want to do is plain JS madness:
Before updating array 'remember' what was visible in current scrolled view. For example you read scrollTop and they loop over each item in list and check it's offset from top - closest to scrollTop is win.
After list updated find that element and scroll back to it.
It is messy, heavy for performance but thats a price of changing random piece of html on page.

Jquery is resetting after dynamic changes

I have a chartist.js bar graph. I want to customize x-axis labels. I wrote some following jquery for flipping first and last name and then add '...' at the end if the length of the text is more than 11 characters.
$(function () {
$('#AssignedLineChart .ct-labels, #ResolvedBarChart .ct-labels').find('.ct-label.ct-horizontal').each(function () {
var label = $(this).text();
var splitLabel = label.split(",");
var newLabel = splitLabel[1] + ", "+splitLabel[0];
if (newLabel.length > 13) {
newLabel = newLabel.substring(0, 10) + "...";
}
$(this).text(newLabel);
});
});
It applied fine when I load the page first time. There are some select options on bar charts for displaying individual ranges. When I select them the labels go back to their previous state. Selecting options are changing DOM. This also happens when I open inspect element tab.
Is there a way to use find or each method on dynamically changed elements?

$(function () {
This is only applied when the page finishes loading and get fired 1 time only.
Selecting options are changing DOM.
So the current process is like:
Page finishes loading.
The label got changed by document ready event. (*)
The label got changed by other events, this case, the select options. (**)
So, it changed the DOM dynamically and nothing like above (*) changes the label again.
So, to change the label after select options, you need to change it in the callback function of what is done after select options in the above mentioned (**).

Access rendered items

Playing around with Slickgrid. But got some questions that I'm not figurate out.
I have made an Regex filter on two X cells, and it works surprisingly well.
But for every time you filter or make other actions i want to flash all incorrect fields with cellFlash or highlighter.
Atm i have made a formatter with same regex as filter uses but it seems not 100% correct.
The problem when i'm using cellFlash is that it trigger the animation on ALL rows not only the rows thats rendered.
I'm not sure that i'm triggering the flashcell on correct callback/stage, I did it on my filter function i saved all incorrect rows in an array then i loop them throught and trigger flash.
So is it possible to get all items thats rendered in Viewport? Haven't find any information about this. Only data i can get out from getRenderedViewport.. is pxls. getRenderedRange() or getViewport()..

If you need to do processing on each data item in the current slick grid viewport, you can use getRenderedRange() to get the range of data item indexes that are rendered. You could then use that to get each visible data item
function forEachItemInViewport(fn) {
var range = slickGrid.getRenderedRange();
var bottom = range.bottom;
while(bottom--) {
var dataItem = slickGrid.getDataItem(bottom);
fn(dataItem);
}
}
forEachItemInViewport(function (item) {
// do your work on each item in viewport
});

Add rows to a JQuery DataTable without redrawing

How can you add rows to a JQuery DataTable without redrawing the entire table?
The behavior I would like is for it to find the correct location (based on the sort) to insert the row into the table while maintaining scroll position of the table and pagination if any.

I was facing the same problem. The solution i found for this were a new function with the name
fnStandingRedraw http://datatables.net/plug-ins/api/fnStandingRedraw.
I added the above code to be able to use this function,
$.fn.dataTableExt.oApi.fnStandingRedraw = function (oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
After that i execute the following commands,
theTable.fnAddData([reply], false);
theTable.fnStandingRedraw();
where,
theTable: is the datatable variable (var theTable = $('#example').dataTable();).
reply: is the information i add to a row of mine datatable. More on http://datatables.net/plug-ins/api/fnStandingRedraw.
The first command adds a row on the table without redrawing it. After this, the new row will not being displayed on the table.
The second command redraws the table, so the new raw will appear, but retain the current pagination settings.
This worked fine for me.

Use dataTable().fnAddData()
http://datatables.net/ref#fnAddData
Example:
http://www.datatables.net/release-datatables/examples/api/add_row.html

Is there a way to make jqGrid scroll to the bottom when a new row is added?

I have a jqGrid on a page and users can click a button to add a new row. If there are already enough rows on the page to fill the visible portion of the grid the new row is added and a scroll bar appears but the user needs to scroll to see the new row.
Is there a way to do this programmatically?

A quick and easy way to do this using the jqGrid API is to:
Call editRow (which will set focus to the edited row)
And then immediately call restoreRow (because you do not really want to edit the row)
Otherwise you should be able to use jQuery's focus function to set focus to the row, for example: jQuery("#" + row_id).focus() - but I have not tested this method, so YMMV.
Actually focus will not scroll the grid's div. But you can use the following code to guarantee that the grid scrolls such that the row with a given id is viewable:
function getGridRowHeight (targetGrid) {
var height = null; // Default
try{
height = jQuery(targetGrid).find('tbody').find('tr:first').outerHeight();
}
catch(e){
//catch and just suppress error
}
return height;
}
function scrollToRow (targetGrid, id) {
var rowHeight = getGridRowHeight(targetGrid) || 23; // Default height
var index = jQuery(targetGrid).getInd(id);
jQuery(targetGrid).closest(".ui-jqgrid-bdiv").scrollTop(rowHeight * index);
}

//i. Set newly added row (with id = newRowId) as the currently selected row
$('#myGrid').jqGrid('setSelection', newRowId);
//ii. Set focus on the currently selected row
$("#" + $('#myGrid').jqGrid('getGridParam', 'selrow')).focus();

FYI:
I found this example helpful. http://gurarie.org/jqGrid.html from this post, http://www.trirand.com/blog/?page_id=393/bugs/setselection-is-not-scrolling-to-the-selected-row
My issue was $(tableInstance).jqGrid('setSelection', id) didn't work even scrollrows: true when height: 'auto' in jqGrid config. I set height to a specific height 20 and 'setSelection' worked. The selected row was in view for the user. Super Cool