Essential JS 2 Grid: save/restore column order and width? - syncfusion

The use case is to a) allow the user to resize columns and reorder them, which the Grid can do, and then by user reset to what they had.
What I need: how do I a) read/set the column order and b) read/set the column widths? If there's a document with a description of grid column properties and methods, that's what I need. Or, if the column widths and order are stored elsewhere on the grid, the doc for that component.
thanks,
Hank

Based on your requirement, we have achieved the resetting of resize and reorder columns after we do both actions on Grid using getPersistData and setProperties methods. We have locally to store the Grid Properties using getPersistData(it is store feasible of resetting grid properties) method in load event of Grid and you can bind the locally stored grid properties to Grid using setProperties method when we reset the positions and width of the columns in the Grid. please refer to the Grid code example and sample for more information.
[Index.cshtml]
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowReordering="true" allowResizing="true" load="onLoad">
<e-grid-columns>
. . . .
</e-grid-columns>
</ejs-grid>
<script>
function onLoad() {
window.localStorage.setItem("gridPorps", this.getPersistData()); //Store the intial renderting Grid properties in global variable
}
document.getElementById("resetprops").addEventListener("click", function () {
var grid = (document.getElementById("Grid") as any).ej2_instances[0];
grid.setProperties(JSON.parse(window.localStorage.getItem("gridPorps"))); //Bind the stored Grid properties in the Grid
});
Sample link: https://www.syncfusion.com/downloads/support/directtrac/252153/ze/filter_core-120629378.zip
Else If you expect to reset the Grid columns positions and width after reorder and resizing the Grid columns. Please share your exact requirement to us it will help validate further.
Please get back to us, if you need further assistance.
Best,
Balaji S

Related

AG Grid: How to automatically fit to max inside a resizable div?

I have an ag grid that correctly shows within a div container and fills it. This is simply done by calling ...gridApi.sizeColumnsToFit() on the 'firstDataRenedered' output binding event which fires ONCE when the data is available and bound by grid's [rowData] input binding. Cool.
I am also able to resize the div container the grid is in. However, as the div is resized the grid does not automatically fill with it (note there is no new data so the 'firstDataRenedered' output binding event doesn't fire). How can I automatically resize the grid to fill the dynamic div?
the best solution i got in my mind is to use the gridSizeChanged event and invoke gridApi.sizeColumnsToFit()
here's an example for you

Format maxLabel on axis differently than other labels

I am hoping to use a different format specifically for the top axis label on my y-axis. For example, if I have a percentage value axis, I would like to see the % symbol only on the top axis label, while the rest of the labels beneath it remain formatted as numbers without a symbol.
So far, I've been using the formatter option and have created a function that receives value and index per the ECharts docs. The example link below does what I need it to do, but does it for the bottom of the axis rather than the top. I need a way to use this same logic, but select the maximum index on the axis.
Link to example in docs:
https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
Code from example in docs:
The if (index === 0) is the logic I'm referring to
// Use callback function; function parameters are axis index
formatter: function (value, index) {
// Formatted to be month/day; display year only in the first label
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join('/');
}
Here's what I've tried:
I attempted to use the index argument to figure out the max index # in my dataset, but couldn't figure out how to do that given that the function is called once per value and includes only the data for that value.
I tried passing params to the function since that's how formatter works in the series config, but it looks like that's not possible in the axis config
One (unattractive) alternative is to use the y-axis axisName to display any symbols I want to have appended to the top label, and manually position it using padding. This probably wouldn't work because I'll also need to use the axisName separately from time to time.
A Possible Hint
This might not be possible yet, but at least behind the scenes I know ECharts is able to select the top label through the showMaxLabel option in axisLabel.
Is there a way to check if a label is the maximum label in the formatter function for an axis?

DataGrid reconfigure with grid columns resulting in empty grid

I am trying to use reconfigure to rearrange the columns in data grid based on user moving and rearranging the columns.
Below here I am trying to do some testing on reconfigure, but the grid becomes empty. Is this the correct way to do it?
var dgorder = dataGrid.getView().getGridColumns();
dataGrid.reconfigure(undefined, dgorder);

Dynamically reading point coordinates from Spreadsheet in GeoGebra

I was using GeoGebra and I wanted to create a point whose co-ordinates are dynamically read off of a spreadsheet. The spreadsheet would have two columns for the values of x and y co-ordinates of this point, and this point would have to dynamically move from the first (x,y) value all the way through to the last one.
I tried using a slider to refer to the elements of the spreadsheet but am unable to do so. If this could be done, all I would have to do was create an animate button for the slider and that would be it. But I cannot figure out how to name the elements of the spreadsheet while incorporating the slider name as well.
If this idea cannot be implemented, is there another way of creating moving points in GeoGebra based on coordinate values created in an external file(which I was planning to copy to the spreadsheet)?
Thanks!
Yeah , there are two methods to do that one of them is using Object[] commend as you indicate in the comment ; the seconde method is creating a list follow these steps :
select a column for exemple A by clicking in the top of column
Right Click
create
list
then you can access to any element of the list in commend line by type for creating a point : (element(list1,n),element(list2,n))
n is the slider
hope i help you

How to set position columns Grid by alphabetic Label order in Form?

how to set position columns in form dynamics ax by alphabetic Label order ?
I have a Grid in my Form, I want to set the colums position Grid , I think to set this with code x++ in Form Init method, but I don't know how to do.
Thanks for help,
enjoy!
You have to add fields manually with the addDataField method on the FormBuildGridControl.
You can see an example in \Classes\SysTableBrowser\showAllFields