Hi,
Am following this link for spreadsheet
https://ko.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-configuring
when we click on particular row and apply filter it gives excel style filtering. now clicking on that filter it opens up the modal windows showing different events
i have couple of questions
1. can we configure this window to open on left or right side of cell(am showing spreadsheet in the pop up and that modal window is partially hiding for the first column)
2. when i click on sorting it is not doing any thing even in the example provided
3. when we click on filter can we get unique values for that column as in excel
Adding an example of how the spreadsheet filter appears in the igx modal pop up outside the spreadsheet and also outside the igxmodal
Hello Peru,
My team and I have done an initial review of this forum thread, and I have a few questions for you on this matter, as I am a little unsure of a few things on this. Can you please provide some information on the following?
1. You mentioned a “modal window” in your description – is the IgxSpreadsheet within one of your modal windows, or is the modal window just something you are opening in response to actions on the spreadsheet, and it is cutting off the filter dialog / context menu of the spreadsheet?
2. Which “window” are you trying to configure the opening position in point 1 of your original description? Are you referring to the drop-down menu or context menu that happens when you click the icon at the top of the cell? I cannot quite tell from your screenshot.
3. Regarding your point 2 in that the sorting is not working for you, I cannot reproduce the sorting not working in the example you linked. If I right click one of the cells and choose one of the sort options, this works on my end. Being that I can see in the screenshot that you have drop-downs in the header though, this lead me to believe that perhaps the sample there had been modified in some way? Can you detail the changes that you made?
Regarding your point 3, there unfortunately does not currently exist a filter in the IgxSpreadsheet for getting the unique values for the column. If you would like to see this feature potentially developed in a future version of the IgxSpreadsheet, I would recommend suggesting a new product idea for this at our Ignite UI for Angular GitHub page, here: https://github.com/igniteui/igniteui-angular/issues. This will place you in direct communication with our product management and development teams that plan and prioritize upcoming features based on user feedback.
Please let me know if you have any other questions or concerns on this matter.
one more thing i noticed in the solution is after i delete the first 2 rows automatically infragtics add Column 1 , column2 etc as first name may be because am setting true
hasHeaderRow doesnot exist on the Worksheettable
instead can i set the existing first row itself as header so that the row is not sorted
I have been investigating into your most recent requirements in this case, and I have some information for you.
Regarding setting a particular row as the header row of the table in a Worksheet, this will by default be the first row in the region that you define. If there is no data in the first row of the region you define, which is the case with the Worksheet you provided with the “A1:C11” region, this will generate default column headers, which I believe is the behavior you are seeing. If you wanted row 3 to be the header, you would need to ensure that is the first row in the region (“A3:C11”).
Regarding dynamically calculating and setting the region, I would recommend utilizing the following code, as this should help you, assuming you want the entirety of the data region to be part of the table:
let sheet = this.spreadsheet.activeWorksheet; let startCell: WorksheetCell; let endCell: WorksheetCell; let rows = sheet.rows(); for (let row of rows) { let cells = row.cells(); for (let cell of cells) { if(cell.value != null){ if(startCell == null){ startCell = cell; } endCell = cell; } } } sheet.workbook.cellReferenceMode = CellReferenceMode.R1C1; let address = "R" + (startCell.rowIndex + 1) + "C" + (startCell.columnIndex + 1) + ":R" + (endCell.rowIndex + 1) + "C" + (endCell.columnIndex + 1); sheet.tables().add(address, true);
The loop in that code may make you believe that you will be looping through all possible rows and columns in the Worksheet, but this is not the case – the Worksheet only registers the cells and rows that have been modified in some way. For example, in the case of your Worksheet, I am seeing some null-value cells, which leads me to believe that they had been modified in some way prior to saving the file.
Regarding “hasHeaderRow” not existing on the WorksheetTable, you are correct – this does not exist, but the table does have an isHeaderRowVisible property that you can set to prevent the headers from being visible.
Regarding documentation for styling the tables, unfortunately it does not appear that we have this in our Angular documentation at the time of writing this. I will be investigating into getting this written or enabled, as this should be there. In the meantime, it is worth noting that the Excel Library that the IgxSpreadsheet hinges on is the same API across all of our platforms, and so a similar documentation topic exists here: https://ko.infragistics.com/help/wpf/excelengine-support-named-tables-in-an-excel-spreadsheet#_Ref320528495. I am aware that this is for our WPF product and not Angular, but the information provided there should work the same as in the Ignite UI for Angular product’s Excel Library.
Thanks this might help in our requirement. one last question regarding style. can you share some example how i can initialize the style
i tried
The error that “the specified WorksheetTableStyle does not belong to the same workbook as the table” means that the string ID that you have passed to your table is not registered with the Workbook. You can use the following code snippet as guidance on creation of a WorkbookTableStyle:
let style: WorksheetTableStyle = new WorksheetTableStyle("myCustomTableStyle", true); sheet.workbook.customTableStyles().add(style);
let color: Color = new Color(); color.colorString = "#FF0000"; let colorInfo: WorkbookColorInfo = new WorkbookColorInfo(color);
style.areaFormats(WorksheetTableStyleArea.WholeTable).fill = CellFill.createSolidFill(colorInfo);
let table: WorksheetTable = sheet.tables().add(address, true, style);
Please let me know if have any other questions or concerns on this matter.
The Infragistics Excel Library and Spreadsheet control is on other .NET Core platforms like WPF, Windows Forms, etc., so you can use the library in a C# .NET Core application. Those platforms support .NET Core via NuGet, and you can read how to set up the NuGet feed by reading the following documentation: https://ko.infragistics.com/help/wpf/nuget-feeds.
Regarding the syntax for adding a table to a Worksheet, it is essentially the same properties, just in C# syntax. The APIs are the same between Ignite UI for Angular and our .NET Core platforms, but for example, this would be the code, where “sheet” is the Worksheet:
sheet.Tables.Add("A3:C11", true);
and one example for adding any default excel style table. documentation is hard to find without examples :)
thanks this helps a lot in customization.
A quick final question may not be related to topic.
can we use infragistics library with C# in .net core API ?(for purpose of creating excel)