sfDataGrid columns not re-sizing to content

[Arvin]

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]

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]

 
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 : https://www.syncfusion.com/downloads/support/forum/123307/ze/SfDataGridDemo1931224899

 
Regards,
Gnanasownthari T.

[Arvin]

Hi,

Please see attachment for screenshot

Attachment: Ui_Screenshot_3f19ac1c.zip

[Sivakumar R]

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:
https://www.syncfusion.com/downloads/support/forum/123307/ze/SfDataGridDemo116429374



Thanks,
Sivakumar

---

AR Arvin March 8, 2016 06:20 PM UTC

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

---

AR Arvin March 9, 2016 12:42 AM UTC

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.

---

AR Arvin March 9, 2016 01:10 AM UTC

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?

---

GT Gnanasownthari Thirugnanam Syncfusion Team March 9, 2016 02:02 PM UTC

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.

---

AR Arvin March 9, 2016 08:11 PM UTC

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

---

GT Gnanasownthari Thirugnanam Syncfusion Team March 10, 2016 10:53 AM UTC

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.

[Arvin]

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]

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]

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]

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]

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]

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.