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();
Related
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
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 this code:
grid.getSelectionModel().on('selectionchange', function(selModel, selections) {}
and inside the function with the variable 'selections' I want to get the selected row field 'name' data.
How do I do it?
I have tried 'selections.data.name' and 'selections.get('name')' but none works.
I know it's possible because Firebug shows the data of the variable 'selections'.
The answer is:
selections[0].data.name or selections[0].get('name')
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
My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.