We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

sfDataGrid columns not re-sizing to content

Thread ID:

Created:

Updated:

Platform:

Replies:

123307 Mar 6,2016 06:53 PM Mar 10,2016 05:53 AM UWP 10
loading
Tags: SfDataGrid
Arvin
Asked On March 6, 2016 06:53 PM

HI,

I'm trying to get the columns to resize so the texts in each column fit on one line. As per the instructionshereI did the following.
Added a style to set sizing to auto (I tried all other options as well)

<StyleTargetType="syncfusion:GridColumn">
<SetterProperty="ColumnSizer"Value="Auto"/>
Style>

My columns have a min and max width as instructed
<syncfusionGrid:SfDataGrid
	x:Name="PlaylistsTrackListUi"
	DataContext="{StaticResourcePlaylistViewModel}"
	ItemsSource="{BindingPlaylistsView.SelectedTracksView,Mode=OneWay}"
	AutoGenerateColumns="False"
	SelectionMode="Extended"
	SelectionUnit="Row"
	SelectionChanged="SelectionChanged"
	RightTapped="TracksRightTappedEvent">

<syncfusionGrid:SfDataGrid.Columns>
<syncfusionGrid:GridTextColumnDisplayBinding="{BindingTitle}"HeaderText="Title"MinimumWidth="100"MaximumWidth="1000"/>
<syncfusionGrid:GridTextColumnDisplayBinding="{BindingArtistName}"HeaderText="Artist"MinimumWidth="100"MaximumWidth="1000"/>
<syncfusionGrid:GridTextColumnDisplayBinding="{BindingAlbumName}"HeaderText="Album"MinimumWidth="100"MaximumWidth="1000"/>
<syncfusionGrid:GridTextColumnDisplayBinding="{BindingDurationInHoursMinutesAndSeconds}"HeaderText="Duration"MinimumWidth="50"MaximumWidth="200"/>
       syncfusionGrid:SfDataGrid.Columns>
syncfusionGrid:SfDataGrid>
I also have an even handler that gets called tore-sizethe columns when my item source (which is an ObservableCollection) gets updated. I verified it does get triggered.

privatevoidTracksChanged(objectsender,NotifyCollectionChangedEventArgse)
{
PlaylistsTrackListUi.GridColumnSizer.ResetAutoCalculationforAllColumns();
PlaylistsTrackListUi.GridColumnSizer.Refresh();
}

I'm not sure why the it's not working. Any ideas?

Thanks,

Gnanasownthari Thirugnanam [Syncfusion]
Replied On March 7, 2016 07:20 AM

Hi Arvin,

We have analyzed your query. We could not able to replicate the problem and the column widths are set based on cell content when setting SfDataGrid.ColumnSizer as Auto.  Find the screen shot and sample below,



Can you share the screen shot for the issue, you are facing? That will help us to replicate the problem.
Please refer the below sample.
http://www.syncfusion.com/downloads/support/forum/123307/ze/SfDataGridDemo-1250066035Regards,
 
Regards,
Gnanasownthari.

Gnanasownthari Thirugnanam [Syncfusion]
Replied On March 7, 2016 08:02 AM

 
Hi Arvin,

Please ignore our previous update,

We have analyzed your query. We could not able to replicate the problem and the column widths are set based on cell content when setting SfDataGrid.ColumnSizer as Auto.  Find the screen shot and sample below,



Can you share the screen shot for the issue, you are facing? That will help us to replicate the problem.

Please refer the below sample.
Sample location : http://www.syncfusion.com/downloads/support/forum/123307/ze/SfDataGridDemo1931224899

 
Regards,
Gnanasownthari T.

Arvin
Replied On March 7, 2016 06:06 PM

Hi,


Please see attachment for screenshot

Attachment: Ui_Screenshot_3f19ac1c.zip

Sivakumar R [Syncfusion]
Replied On March 8, 2016 10:37 AM

Hi Arvin,

Thanks for the screen shot. We are able to see the problem in your screenshot. But we could not able to replicate in our sample application (Refer the below sample and screen shot). Can you please share the below details,
1.     Essential studio version you are using
2.     Can you share the XAML code or modify the below sample to replicate the issue.


Sample:
http://www.syncfusion.com/downloads/support/forum/123307/ze/SfDataGridDemo116429374



Thanks,
Sivakumar


Arvin
Replied On March 8, 2016 01:20 PM

Hi Sivakumar,

I modified your demo project to show you what's happening. I think this is because the binding update doesn't kick in before the updated even fires.

I added a button that will add a new item to the collection.
I added an event handler that fires when my observable collection is updated. The event calls GridColumnSizer.ResetAutoCalculationforAllColumns() and GridColumnSizer.Refresh();

If you run it you will see when you add an item via the button the grid won't update but when you add again it does. Is there an even I can subscribe to that fires after the binding update is complete on the datagrid?



Attachment: SfDataGridDemo_38508c69.zip

Arvin
Replied On March 8, 2016 07:42 PM

So I think I figured out the solution. You need to wait for the Grid to be updated before the re-size function is called. This took a while since some of the obvious candidates for events to handle didn't work .

So you need to handle the datagrid event  View.Records.CollectionChanged. The problem is View is not initialized by the time the page constructor finishes. So you need to create the handler in the function you create to handle DataGrid's Loaded event.

Arvin
Replied On March 8, 2016 08:10 PM

So one final obstacle. Since my datagrid is empty at first. The View is null in the datagrid. So I can't subscribe to the View.Records.CollectionChanged event when the datagrid is loaded. Is there an event that fires when the View is initialized?

Gnanasownthari Thirugnanam [Syncfusion]
Replied On March 9, 2016 09:02 AM

Hi Arvin,

We are analyzed your query and you have to wire the View.Source.CollectionChanged Event within the ItemsSourceChanged Event. Please refer the below code example.

C#



public MainPage()

        {
            this.InitializeComponent();
            this.sfdatagrid.ItemsSourceChanged += Sfdatagrid_ItemsSourceChanged;
        }

        private void Sfdatagrid_ItemsSourceChanged(object sender, GridItemsSourceChangedEventArgs e)
        {
            if (this.sfdatagrid.View == null)
                return;

            this.sfdatagrid.View.SourceCollectionChanged += View_SourceCollectionChanged;
        }

        private void View_SourceCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            //Note, below process will take time to calculate width of column based on content. So all this for one time after loading data
            //instead of calling for each new addition in collection.
            this.sfdatagrid.GridColumnSizer.ResetAutoCalculationforAllColumns();
            this.sfdatagrid.GridColumnSizer.Refresh();
        }
}




Please let me know if you have any other concerns,

Regards,
Gnanasownthari T.



Arvin
Replied On March 9, 2016 03:11 PM

Hi,

As stated in your example that is good for when you first load the grid but not when items are updated. I want the grid to live update its size

The best solution I found was using my ViewModel to send a message (ala MVVM Lite) to the View when it's done updating the observable collection to update the gridsize.

Thanks,
Arvin

Gnanasownthari Thirugnanam [Syncfusion]
Replied On March 10, 2016 05:53 AM

Hi Arvin,

Thank you for your update. You can achieve your requirement by wiring the View.Records.CollectionChanged event within the ItemsSourceChanged Event. You can calculate the column width based on newly added item content in live update using View.Records.CollectionChanged Event. 


  private void Sfdatagrid_ItemsSourceChanged(object sender, GridItemsSourceChangedEventArgse)

        {

            if (this.sfdatagrid.View == null)

                return;

 

            this.sfdatagrid.View.Records.CollectionChanged += Records_CollectionChanged;

        }

 

        private void Records_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)

        {

            this.sfdatagrid.GridColumnSizer.ResetAutoCalculationforAllColumns();

            this.sfdatagrid.GridColumnSizer.Refresh();

        } 
      



Regards,
Gnanasownthari T.




CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;