SfDataGrid NavigationView and Toolbar Niggles

[Suresh]

Hi

Overall, the SF controls are great. But I'm having trouble with a few things that I need your help with.

I attach an image showing the issues and a very small demo project.

Most of the issues are self explanatory in the image below, but I'll expand a little.

1. NavigationView
   • I can't figure out how to change the History icons, especially the drop down and uparrow. Specifying them in the Style (either designer or code) doesn't work. Maybe there's some interplay with theme - but I've tried every which way and can't figure it out.
   • CustomButtons are inserted without padding/margin. How can I create some space to both the left and right?
     
2. Toolbar
   • Neither of the SF Toolbars are usable. 
   • The SF StandardToolbar errors on load.
     
   • The XPToolBar only allows the addition of Bars. Nothing else shows up in the items Add dropdown, rendering it useless.
   • I guess you can ignore the screwed up checkboxes in the toolbar on my form, since it's the stanrd MS one.
3. Datagrid
• I had to subclass the Grid to implement hovering. It works. But something about it, completely screws up the rendering of the Filter drop down and the location of the Ok/Cancel button. There maybe some initialization I should do, but I can't figure it out.
  
• The showbusyindicator doesn't work at all. nor does its independent cousin - the BusyIndicator component. Push the "Show Busy" button in the sample.
• The Filter and Sort Icons are so close together it's easy to constantly click the wrong one. How does one create space between them.
• I want a TextColumn that allows an Icon in each cell. You have an ImageColumn but it doesn't support Sorting, no matter what you do. I have created a custom column TextColumnEx (not in the attached project) that implements an icon, but I then have to take over DrawCell and write so many lines of code to duplicate routines you already have inside the grid (but not exposed). Trying to calculate margins and padding so the icon and text are displayed in the write location would be so much easier if you allowed access to your underling routines and all I had to do was call:
  • PaintBackground
  • DrawIcon(icon, offset...)
  • DrawText(string, trimming, format, offset...)
• Even better is you allowed your ImageColumn to full support sorting on the underlying column data (and suppor allowSorting, allowFiltering, allowGrouping), just like a TextColumn.

Thanks!

Attachment: WinFormsApp1_228b34c5.zip

[Suresh]

Jpg isn't showing...so adding as an attachment inside zip.

Attachment: 20220125_151845_6f9ead57.zip

[Arulpriya Ramalingam]

Hi Suresh, 

 

NavigationView  I can't figure out how to change the History icons, especially the drop down and uparrow. Specifying them in the Style (either designer or code) doesn't work. Maybe there's some interplay with theme - but I've tried every which way and can't figure it out.  CustomButtons are inserted without padding/margin. How can I create some space to both the left and right?	We have forwarded the query to our internal team to validate the query and we will update with proper details on 28th January 2022.
Toolbar  Neither of the SF Toolbars are usable.   The SF StandardToolbar errors on load.  The XPToolBar only allows the addition of Bars. Nothing else shows up in the items Add dropdown, rendering it useless.  I guess you can ignore the screwed up checkboxes in the toolbar on my form, since it's the stanrd MS one.
I had to subclass the Grid to implement hovering. It works. But something about it, completely screws up the rendering of the Filter drop down and the location of the Ok/Cancel button. There may be some initialization I should do, but I can't figure it out.	We could understand the use case and replicate the scenario in provided sample. We need some more time to analyze further and update you with proper details on 28th January 2022.
The showbusyindicator doesn't work at all. nor does its independent cousin - the BusyIndicator component. Push the "Show Busy" button in the sample.	The busy indicator works with the provided sample as expected when filtering the records and we are unclear of the UI action that cause the issue at your end. So, we request you to share a simple video with replication procedures.
The Filter and Sort Icons are so close together it's easy to constantly click the wrong one. How does one create space between them.	We have analyzed the possibilities to increase the space between sort and filter icons and regret to let you know that it is not possible.
I want a TextColumn that allows an Icon in each cell. You have an ImageColumn but it doesn't support Sorting, no matter what you do. I have created a custom column TextColumnEx (not in the attached project) that implements an icon, but I then have to take over DrawCell and write so many lines of code to duplicate routines you already have inside the grid (but not exposed). Trying to calculate margins and padding so the icon and text are displayed in the write location would be so much easier if you allowed access to your underling routines and all I had to do was call:  PaintBackground  DrawIcon(icon, offset...)  DrawText(string, trimming, format, offset...)	We are checking the possibilities to add sorting behavior for image column with text with custom SortComparer and custom header cell renderer. We need some more time to analyze the possibilities and update you with proper details on 28th January 2022.
Even better is you allowed your ImageColumn to full support sorting on the underlying column data (and suppor allowSorting, allowFiltering, allowGrouping), just like a TextColumn.

 

Regards, 

Arulpriya Ramalingam 

[Suresh]

Thanks for the quick and thoughtful reply.

With respect to the busy icon, I have a long running process (scanning file directories and files) and simply want to show a busy indicator or the form OR the Datagrid. It should be as simple as:

SfDataGrid1.ShowBusyIndicator = True

But that doesn't do anything. I think you are saying, that it will only show when the internals of the Grid are busy, which doesn't work for me, since my operations are outside of the grid and the grid is refreshed once finished. So I had hoped to Show the busy indicator at the start of my operation and then Hide it afterwards.

I also tried creating an independent BusyIndicator, following the instructions here:

https://www.syncfusion.com/blogs/post/introducing-busy-indicator-in-windows-forms.aspx

But that doesn't show a busy indicator when I issue a busyIndicator.Show. It's a bug in the z-order. If I undock controls in the main part of the form and shrink them, the indicator shows. But when dock = fill, it doesn't show. I bet its working, but is "BEHIND" the docked grid.

Thanks for your time on this. It's much appreciated.

[Mohanram Anbukkarasu]

Hi Suresh, 

We are currently validating your requirements. We will update further details on February 1, 2022. We appreciate your patience until then.  

Regards, 

Mohanram A. 

[Sampathnarayanan Sankaralingam]

Hi Suresh,  

 Please find the response below, 

NavigationView   I can't figure out how to change the History icons, especially the drop down and uparrow. Specifying them in the Style (either designer or code) doesn't work. Maybe there's some interplay with theme - but I've tried every which way and can't figure it out.   	We can analyze your requested behavior, an icon of dropdown, and a history button is drawn internally, it cannot be customized.
CustomButtons are inserted without padding/margin. How can I create some space to both the left and right?	Custom buttons are drawn internally, it cannot be customized. This is correct behavior, you can see the system window also.
The SF StandardToolbar errors on load.  .	We have recommended to can use the XPToolbar control. Please find the documentation link below,     UG link- https://help.syncfusion.com/windowsforms/xptoolbar/getting-started
The XPToolBar only allows the addition of Bars. Nothing else shows up in the items Add dropdown, rendering it useless.	Yes, XPToolbar only allows the bar items only. You can add the DropDownBarItem to set the PopupContainer. And we've provided a working sample and UG Link for your convenience.   Please refer to the below Ug link,    UG link-  https://help.syncfusion.com/windowsforms/xptoolbar/baritem-types#dropdownbaritem  Sample : https://www.syncfusion.com/downloads/support/forum/172295/ze/WinFormsApp_Modifiyed)1783308074
I had to subclass the Grid to implement hovering. It works. But something about it, completely screws up the rendering of the Filter drop down and the location of the Ok/Cancel button. There may be some initialization I should do, but I can't figure it out.	We are need of more details about the requirement. Please provide details about what kind of initialization you are trying to perform and please provide some video illustration about the requirement so that we can check and update the prompt and timely solution.
I want a TextColumn that allows an Icon in each cell. You have an ImageColumn but it doesn't support Sorting, no matter what you do. I have created a custom column TextColumnEx (not in the attached project) that implements an icon, but I then have to take over DrawCell and write so many lines of code to duplicate routines you already have inside the grid (but not exposed). Trying to calculate margins and padding so the icon and text are displayed in the write location would be so much easier if you allowed access to your underling routines and all I had to do was call:   PaintBackground   DrawIcon(icon, offset...)   DrawText(string, trimming, format, offset...)   Even better is you allowed your ImageColumn to full support sorting on the underlying column data (and suppor allowSorting, allowFiltering, allowGrouping), just like a TextColumn.	We regret to inform you that there is no possibilities to sorting operations in the image column. However you can add the image within the cell using SfDataGrid.DrawCell event and by doing this if you sort the column, the column will be sorted respective to the underlying cell value. Please refer the below UG for more details.  UG : https://help.syncfusion.com/windowsforms/datagrid/conditionalstyling#adding-an-image-for-a-cell
Regarding the busy indicator issue	We are validating the reported issue. we will update you with more details on February 3,2022.

  

Regards,  

Sampath Narayanan.S 

[Suresh]

I was impressed by your first response...but we have gone backwards.

1. NavigationView
   You say the icons cannot be customized. Then why do you provide a style property to set the icons. I have wasted hours trying to get this to work.
2. Subclassing the grid. 
   I have given you everything you need including a simple project. Load the project and click the filter icon. It renders incorrectly...and is almost unusable as a result. Please refer to that very simple project example and revert.
3. TextColumn with icon with sorting.
   Your example is different. It is a full image in the cell. I want an Icon AND the text. You have various examples floating around the forums, but you hard code the padding and bounds. In real-life that is not practical. You have code inside your libraries to calculate the correct positioning. Please consider making them public instead of friend. 
4. Busy Indicator
   I await your response.

[Sampathnarayanan Sankaralingam]

Hi Suresh,  

 Please find the response below,

You say the icons cannot be customized. Then why do you provide a style property to set the icons. I have wasted hours trying to get this to work.

Sorry for the inconvenience this has caused.

 

You can change the icon based on the theme type you're using, and we've included a list of icons which you can able to customize.

 

Please refer to the below documentation on how to apply the theme to controls

Documentation link - https://help.syncfusion.com/windowsforms/skins/getting-started

 

Property List

 

DropDownStyle	NavigationBar Style
DropDownIcon   DropDownHoverIcon   PressedDropDownIcon   DisabledDropDownIcon	DropDownIcon   DropDownHoverIcon   PressedDropDownIcon   DisabledDropDownIcon   ForwardIcon   ForwardHoverIcon   PressedForwardIcon   DisabledForwardIcon   BackwardIcon   BackwardHoverIcon   PressedBackwardIcon   DisabledBackwardIcon

I have given you everything you need including a simple project. Load the project and click the filter icon. It renders incorrectly...and is almost unusable as a result. Please refer to that very simple project example and revert.

 

We checked the filterpop up in your sample and the appearance is the expected one and it is the default appearance.

Your example is different. It is a full image in the cell. I want an Icon AND the text. You have various examples floating around the forums, but you hard code the padding and bounds. In real-life that is not practical. You have code inside your libraries to calculate the correct positioning. Please consider making them public instead of friend. 

As we updated earlier, you can achieve your requirement  by adding the image within the cell using SfDataGrid.DrawCell event and there will no other possibilities to achieve this.

Regarding BusyIndicator

We have created the simple sample to load the busy indicator in the datagrid. Please refer the sample and let us know if you have any concerns.

 

https://www.syncfusion.com/downloads/support/forum/172295/ze/WinFormsApp22037011837

 

Regards,

Sampath Narayanan.S

[Suresh]

ISSUE #1.

On January 26th, you said: 

We could understand the use case and replicate the scenario in provided sample. We need some more time to analyze further and update you with proper details on 28^th January 2022. 

Yesterday you seem to have changed your mind and said:

We checked the filterpop up in your sample and the appearance is the expected one and it is the default appearance.

Below is a screenshot. The filter contents are clipped and the OK & Cancel buttons are in the wrong position.

ISSUE #2:

With respect to the spinner, I don't care about the datagrid spinner as I previously explained. I care about the independent control:  https://www.syncfusion.com/blogs/post/introducing-busy-indicator-in-windows-forms.aspx

It displays behind your other controls (I think) and is therefore hidden. I need it at the front of the z-order.

ISSUE #3:

With regards to the drawcell issue, you have completely missed my point about exposing the engine that calculates the position in a future update. I have got it to work - but only by writing 200 lines of code to duplicate what your own protected methods do, to position the icon and the cell in the right place, without hardcoding offsets. This is such a waste of code -- and all you need to do is expose the methods you use internally to paint the background rectangle, paint the icon and draw the text. You can see it working perfectly in the bottommost screenshot.

ISSUE 1 - SCREEN GRAB

ISSUE 3: SCREEN GRAB

[Sampathnarayanan Sankaralingam]

Hi Suresh,

Sorry for the inconvenience

We checked the filterpop up in your sample and the appearance is the expected one and it is the default appearance. Below is a screenshot. The filter contents are clipped and the OK & Cancel buttons are in the wrong position.	Rendering issue in FilterPopUp is not occurs in our side. Please refer the video illustration. We suspect that issue may depends on the system configuration. We have checked the issue in Windows 10 with screen resolution  1366 X 768 and DPI is 100%. Please share the configuration details in your end.   https://www.syncfusion.com/downloads/support/forum/172295/ze/VideoReference-867120171
With respect to the spinner, I don't care about the datagrid spinner as I previously explained. I care about the independent control:  https://www.syncfusion.com/blogs/post/introducing-busy-indicator-in-windows-forms.aspx It displays behind your other controls (I think) and is therefore hidden. I need it at the front of the z-order.	We have not shown the internal busy indicator of the DataGrid. We have shown the our BusyIndicator Control in the SfDataGrid independently in the provided sample and it is showing in front of the z-order. Please check the sample and revert to us with code snippet or modified sample to replicate the issue in our end.
With regards to the drawcell issue, you have completely missed my point about exposing the engine that calculates the position in a future update. I have got it to work - but only by writing 200 lines of code to duplicate what your own protected methods do, to position the icon and the cell in the right place, without hardcoding offsets. This is such a waste of code -- and all you need to do is expose the methods you use internally to paint the background rectangle, paint the icon and draw the text. You can see it working perfectly in the bottommost screenshot.	As we updated earlier, you can achieve your requirement only by using the DrawCell event and also we are not able to provide a public methods as you have mentioned calculate the position of icon has to be made in sample level.

Regards,

Sampath Narayanan.S

[Suresh]

Please provide an example for the below. I have studied the documentation but am unable to change the icons for the items you say are customizable.

========================================

You can change the icon based on the theme type you're using, and we've included a list of icons which you can able to customize.

Please refer to the below documentation on how to apply the theme to controls

Documentation link - https://help.syncfusion.com/windowsforms/skins/getting-started

 

Property List

 

DropDownStyle	NavigationBar Style
DropDownIcon   DropDownHoverIcon   PressedDropDownIcon   DisabledDropDownIcon	DropDownIcon   DropDownHoverIcon   PressedDropDownIcon   DisabledDropDownIcon   ForwardIcon   ForwardHoverIcon   PressedForwardIcon   DisabledForwardIcon   BackwardIcon   BackwardHoverIcon   PressedBackwardIcon   DisabledBackwardIcon

[Sampathnarayanan Sankaralingam]

  

Hi Suresh

We've created the sample for your requested behavior "How to set the icon in navigationview". Please find the sample from the below link and code snippets for your reference. 

Code snippets: 

BackWardIcon	this.navigationView1.ThemeName= "Office2019Colorful";              this.navigationView1.ThemeStyle.NavigationBarStyle.BackwardIcon = Image.FromFile(@"..\..\Icon\Backward.png");
ForeWardIcon	this.navigationView1.ThemeStyle.NavigationBarStyle.ForwardIcon = Image.FromFile(@"..\..\Icon\Foreward.png");
DropDownIcon	this.navigationView1.ThemeStyle.NavigationBarStyle.DropDownIcon = Image.FromFile(@"..\..\Icon\DropDown.png");

Sample Link : https://www.syncfusion.com/downloads/support/forum/172295/ze/navigationview_sample641415877 

Regards, 

Sampath Narayanan.S