Previously, I used persistent grid plugin, until I found out that it caused some terrible slowdown - about 3-4 extra seconds of grid rendering (~20 columns and 300 rows). So, I do not want all this plugin functionality, the only thing I want to have is scrolling to a selected record in grid (there may be a lot of records selected, so scrolling to the first one is enough). I try to do it like this:
.... a lot of code ...
rowIndex=grid.store.indexOf(grid.getSelectionModel().getSelection()[0]);
record=grid.getSelectionModel().getSelection()[0];
grid.store.remove(record); // <- I remove it, because its content has changed
grid.store.insert(rowIndex,Ext.create('GridModel',json.items[0])); // <- I insert
// it back with new values
grid.getSelectionModel().select( rowIndex ); // <- This works, I see a checkmark
grid.getView().focusRow( record ); // <- This is not working
....
Instead of what I expect to see, I see scrolling to the top of the grid.
EDIT
This is not working:
Ext.fly(grid.getView().getNode(rowIndex)).scrollIntoView(); // instead of focus
Also not working:
var rowEl=grid.getView().getNode(rowIndex);
rowEl.scrollIntoView(grid.el, false);
So, what to use instead of focus?
EDIT
Setting deferRowRender to false in grid config also has no effect. Still, grid scroll to the very top of its view.
EDIT
Well, as it turned out, focusRow had no effect because of the grid.store.sync call. So, I put this routine inside sync callback function and now it is working.
In extjs 4 the solution might be use method scrollBy() http://docs.sencha.com/extjs/4.2.6/#!/api/Ext.Component-method-scrollBy
In Extjs 5: try the methods getScrollable().scrollTo(...);
http://docs.sencha.com/extjs/5.1.3/api/Ext.grid.Panel.html#placeholder-accessor-getScrollable
http://docs.sencha.com/extjs/5.1.3/api/Ext.grid.Panel.html#method-scrollTo
In Extjs 6: try the methods getScrollable().scrollToRecord(...);
http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-getScrollable
http://docs.sencha.com/extjs/6.2.1/modern/Ext.grid.Grid.html#method-scrollToRecord
Although on a different issue, this post may be useful: How to scroll to the end of the form in ExtJS
try below code
grid.getView().focusRow( record );
Try this:
var numIndex=** //this is record index
var x=grid.getView().getScrollX();
grid.getView().scrollTo(x,numIndex*21); //x,y --> unit is pixel
Related
Ok, I know that title could use some work, but I'm not sure how else to put it.
Here's the setup.
I have a (potentially) massive table that gets generated via an ng-repeat. All the rows need to be editable but, when the dataset is so large, all those bindings slow things to a crawl. I could literally be waiting upwards of 20 seconds for large sets to load!
We noticed that dumping the data in a read-only state significantly decreased the load time. So, we came up with the idea of loading it read-only, but, when the table row was clicked, it became editable. This is accomplished like so. I have two cells output. editableRow is initially false. When the row is clicked, editableRow becomes true. The idea being that, when editableRow becomes true, I see the other cell.
(proprietary code obfuscated)
<TABLE-CELL class="value-col" ng-if="readtime.editableRow === true">
<input type="text"
name="readingTime"
ng-model="<data model>"
ng-disabled="<param>"
ng-change="<function>"
ng-class="<classes>"
/>
</TABLE-CELL>
<TABLE-CELL class="value-col" ng-if="readtime.editableRow === false">
<input type="text"
placeholder="{{<data model>}}"
ng-class="<classes>"
/>
</TABLE-CELL>
The problem is, on the click, for a tiny fraction of a second both cells are visible. It really is only visible on the first click. Subsequent clicks still do it, but it goes so fast that the human eye can't catch it. I know it's there since I slowed everything down with a breakpoint on the mouse click. This also revealed that this happens as the value turns true - turning on the first cell, but the second one doesn't disappear in the same moment. So, it causes a "flicker" of sorts. This seems to happen outside my actual code, inside the jQuery, so I'm not sure how to short circuit it.
I've tried playing with using ng-show/hide instead, which worked a little bit, but also totally negated the time-saving aspect, since it actually renders everything, and it took a long time. I've also tried ng-cloak with no effect whatsoever.
The breakpoint that it keeps stopping on (when I told it to stop on event listeners to do with the mouse click) is the following code in jquery.js:
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
It hits that line about 4 times, and, on the last one, both cells are visible. Then, the second one disappears.
I'm out of ideas and would appreciate any thoughts on this.
I finally found an answer that works!
On this page: disable nganimate for some elements the answer right BELOW the accepted answer is what finally worked!
To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex.
Config
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
$animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})
Usage
Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.
Instead of manually selecting the check boxes of several pages,
I am using TamperMonkey to select all the check boxes with a small Javascript function.
The checkboxes get selected but the next step (SyncNow)for the procedure is greyed out.
I think it has to do with changing classes.
Is there another way to select the checkboxes with a 'click' via TamperMonkey?
or
How do I add an extra class that will hopefully not grey out the next step?
You can see the code that I have here:
https://codepen.io/Marina_2019/pen/dxXmZL
I tried this, and it did not work:
function selectAll(){
document.getElementById("AllInventorySelected").checked = true;
}
}, false);
This function worked:
checkThem([].slice.call(document.querySelectorAll('input[type="checkbox"]')));
function checkThem(nodes) {
nodes.forEach(function(n) { n.checked = true });
}
The problem is that the next after selecting all the check boxes are greyed out (unless I do it manually).
I noticed that a class gets added if I select the check boxes manually.
Code snippets are here:
https://codepen.io/Marina_2019/pen/dxXmZL
I'm facing a problem to get gridContext on save event of a editable subgrid. I need to get the data from editable subgrid and do some operations on the form but while getting the grid from gridContext it shows the error message called:
gridContext.getGrid is not a function
JavaScript code:
I'm referring the below MSDN links to get gridContext and grid data.
https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/clientapi-grid-context
https://learn.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/grids/gridrowdata
You need to remove the parenthesis "()" in the getGrid, since it is not a function.
The correct code would be:
var myRows = gridContext.getGrid.getRows();
I am using create ChartJS for create chart.And system provide facility to search data in date range. When searching new rage load chart corectly, but when focus to chart old chart values display again.
To solve that remove previous canvas content and load new canvas using
$('#line').remove();
$('#chart_container').append('<canvas id="line" height="600px" style="margin-top:20px;" ></canvas>');
After that fix chart load properly, but browser console display bellow error
This happens because the events (resize) are binded at creation and there is no check whether the canvas exists or not in the resize handler.
In order to prevent this issue, you can modify the resize function and insert the following line before everything else:
if( !this.canvas ) return;
Instead of removing the chart, you can update your datasets like this:
myChart.chart.config.data.labels = myNewLabelsArray;
myChart.chart.config.data.datasets[0].data = myNewDataArray;
myChart.update();
I remember having a lot of problems with old data displaying, and this is what fixed it for me. Not destroying, just updating.
You're removing the plugin as well as the old HTML element. Try re-iniciating the ChartJS library after appending the new HTML.
I have a div that I want to make draggable or not, depending on the state of some other stuff on my page. I seem to be able to easily make it draggable, but I can't seem to figure out how to best remove the draggability from the div.
I am making it draggable with:
var dd = Ext.create('Ext.dd.DDProxy', mydiv, 'myDDGroup', { isTarget: false });
And I've tried to then remove the draggability by removing the only group it's a member of
dd.removeFromGroup('myDDGroup');
and just destroying the dd object with
delete dd;
Neither of these seem to actually keep me from starting a drag on the element. I suspect I should be able to use the b4Drag override in some way to simply cancel a drag of my div before it even begins, rather than toggling the draggable state of the div at all, but I can't seem to find docs on how I might cancel the drag during the b4Drag call.
So, how can I make a div undraggable after I have already made it draggable?
Seems to be working for me.
Here is the JSFiddle http://jsfiddle.net/01gx33h0/
var dd = Ext.create('Ext.dd.DDProxy', 'test123', 'myDDGroup', { isTarget: false });
Ext.fly('btn123').on('click', function() {
dd.removeFromGroup('myDDGroup');
});
Can you give me the sample code where it is not working. And what version of ExtJs are using?
You have to unreg. Not removeFromGroup.
It just removes from group. But events are not removed on that element.
dd.unreg();
https://fiddle.sencha.com/#fiddle/1eun
When looking at something specific that needs to be dragged, you might consider that allowing dragging is something users expect, for general ease of use you might try the ondragstart="return, this could be appended to your images, or links like so:
<a ondragstart="return false" href="#link">link</a>.