Binding a combo box inside a Rad Grid at runtime

[Rajesh]

Hi,

I am working on this scenario where the drop down list boxes are in each row of a Telerik Grid.

At runtime I want to bind the drop down list box to the database and the mechanism is similar to this (http://social.msdn.microsoft.com/Forums/vstudio/en-US/64f36ca4-bde9-4f32-8260-2b84e53bd8ca/wpf-datagridcomboboxcolumn-problem?forum=wpf)

But I found that it is applicable for WPF in Windows Forms and the syntax 

<ComboBox ItemsSource="{Binding Persons, RelativeSource={RelativeSource AncestorType=Window}}" DisplayMemberPath="NAME" SelectedValuePath="NAMEID" SelectedValue="{Binding NAMEID}" />

and DataContext = this; (code behind)

does not apply for Windows 8.1

The way I am doing this

<telerikGrid:RadDataGrid
            x:Name="QuestionAnswersGrid" AutoGenerateColumns="False" AlternateRowBackground="Lavender" ScrollViewer.HorizontalScrollMode="Auto"
            ScrollViewer.VerticalScrollMode="Auto"
            GroupHeaderDisplayMode="Frozen"  Margin="51,44,45,36" Grid.Row="1" Width="1200" UserGroupMode="Disabled">
            <telerikGrid:RadDataGrid.GroupDescriptors>
                <telerikGrid:PropertyGroupDescriptor PropertyName="Room" />
            </telerikGrid:RadDataGrid.GroupDescriptors>
            <telerikGrid:RadDataGrid.Columns>
                <!--<telerikGrid:DataGridTextColumn  PropertyName="Question" Header="Question" SizeMode="Fixed" Width="800"/>-->
                <telerikGrid:DataGridTemplateColumn Header="Question" SizeMode="Fixed" Width="700">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Name="{Binding QID}" Text="{Binding Question}" TextWrapping="Wrap" />
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>
                <telerikGrid:DataGridTemplateColumn Header="Answer" SizeMode="Fixed" Width="200">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate >
                        <DataTemplate>
                            <StackPanel>
                                <!--<ComboBox Name="{Binding QID}" Height="40">-->
                                <ComboBox ItemsSource="{Binding dropdownList, RelativeSource={RelativeSource Mode=TemplatedParent}}" DisplayMemberPath="{Binding AD_Ans}" SelectedValuePath="{Binding AD_Ans, Mode=TwoWay}" SelectedValue="{Binding AD_Ans}" Height ="40" />
                                    <!--<ComboBoxItem Content="Fail" Name="Fail" />
                                    <ComboBoxItem Content="Pass" Name="Pass" />
                                    <ComboBoxItem Content="Inconclusive" Name="Inconclusive" />
                                    <ComboBoxItem Content="Pass W/Comments" Name="Pass W/Comments" />-->
                                <!--</ComboBox>-->
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

                <telerikGrid:DataGridTemplateColumn Header="Notes" SizeMode="Fixed" Width="150">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate >
                        <DataTemplate>
                            <StackPanel>
                                <Image x:Name="IMG" Source="Assets/Mail.png" Stretch="Uniform" Width="40" Height="40" />
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

                <telerikGrid:DataGridTemplateColumn Header="Photo" SizeMode="Fixed" Width="150">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate >
                        <DataTemplate>
                            <StackPanel>
                                <Image x:Name="IMG" Source="Assets/Camera-01.png" Stretch="Uniform" Width="40" Height="40" />
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

            </telerikGrid:RadDataGrid.Columns>
        </telerikGrid:RadDataGrid>

and in code behind

List<QuestionDetails> questionList;

List<DropDownDetails> dropdownList;

public Questions()
        {
            this.InitializeComponent();
            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;
            this.navigationHelper.SaveState += navigationHelper_SaveState;

            DataContext = this;
        }

protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);

            try
            {
                await PopulateQuestions();

                this.QuestionAnswersGrid.ItemsSource = questionList;

                await PopulateDropDown();

            }
            catch(Exception ex)
            {
                Debug.WriteLine(ex.Message.ToString());
            }
            finally
            {

            }
        }

private async Task PopulateQuestions()
        {
            var dbpath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "demo.db");

            SQLiteAsyncConnection conn = new SQLiteAsyncConnection(dbpath);

            var stringSQL = string.Format(@"sqlstatement");

            questionList = await conn.QueryAsync<QuestionDetails>(stringSQL);
        }

        private async Task PopulateDropDown()
        {
            try
            {
                var dbpath1 = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "demo.db");

                SQLiteAsyncConnection conn = new SQLiteAsyncConnection(dbpath1);

                var stringSQL1 = string.Format(@"sqlstatement");

                dropdownList = await conn.QueryAsync<DropDownDetails>(stringSQL1);

                //DataContext = this;
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message.ToString());
            }
        }

If my technique of populating the combo boxes is wrong, I kindly request you to let me know how to do it correctly.

Thanks,

Rajesh.

[Rosy Topchiyska]

Hi Rajesh,

Thank you for the question.

I have attached a sample project that demonstrates how the code you have send could be refactored in order to follow the MVVM pattern and it demonstrates a much easier way to populate the ItemsSource of the ComboBox control. From your code I can see that the answers to all questions are the same, and for that reason I have added a static property of the QuestionDetails class that holds the answers collection.

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Rajesh]

Hi Rosy,

Thank you for this elegant solution and it worked perfectly. I made some changes to pull the data from a SQLite database. The data displayed elegantly in the grid. However I am running into some other challenges for working with this grid. I am summarizing them below and hope that you will be able to find a solution for them.

I want to identify the id of each question since it is bound to a column in the table. But since the x:name of a control cannot be set to {Binding ColumnFromClass} I would like to know how to identify the question that was selected as well as the answer for which question it corresponds to.

I tried another way in which to add a hidden column to the grid and bind it to a particular column in the table. Then when selecting the particular row in the grid, I can retrieve this hidden column and find out the question id. But when setting the width of this column to 0 it does not display anything in the grid. Why is this so. And setting it to a value of 0.5 displays a very tiny line which does not look attractive.

I went through this example given by you for a similar type (http://www.telerik.com/forums/getting-specified-cell) and downloaded the sample. I am always getting the error "Invalid row/col".  How do I identify the row that was selected in a grid.

I want to group the data in the grid based on a value in the query and I have explained this in another thread. This is related to this same grid. Please have a look at that thread also. Here each room has a id and they should be sorted on that id. Instead it is sorting on alphabetical order of the rooms (http://www.telerik.com/forums/custom-grouping-using-delegategroupdescriptor)

And finally I am using a BasicPage.xaml which adds additional coding for the Navigation in a multi-page application. I found that when I set the value of the Back button to Collapsed, the grid fails to show the data. When setting it to nothing it is visible and the grid shows the data. I do not want to allow the user to navigate back. Same issue when commenting out the code for the back button. Deleting this code for the back button shows the data in the grid.

<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
            Style="{StaticResource NavigationBackButtonNormalStyle}"
            VerticalAlignment="Top"
            AutomationProperties.Name="Back"
            AutomationProperties.AutomationId="BackButton"
            AutomationProperties.ItemType="Navigation Button" Visibility="Collapsed" />

Thanks,

Rajesh.

[Rajesh]

Hi,

Today I observed a strange behaviour when using this MVVM in my page that loads the RAD Grid with the questions/answers.

The navigation mechanism of my application is as follows.

Page 1: RAD Grid (with  5 columns  all populated from a query). There will be X rows in the grid. 

Page 2: RAD Grid (with the question/answers as explained above in detail).

I have to click on a row in the grid on Page 1 and the grid on Page 2 is populated and displayed.

At random times I observed that when Page 2 loads, the grid is empty and does not show any control. Sometimes the grid is populated with questions. Please help to diagnosis the cause of this problem.

Thanks and regards,

Rajesh.

[Rosy Topchiyska]

Hello Rajesh,

In the attached project from my previous answer you can get the selected answer with the QuestionDetails.SelectedAnswer property. I am not completely sure what is your scenario, but  you can listen to the QuestionDetails.PropertyChanged event to see when the user has changed the answer for a question. If you wish to see what item has been selected in the grid, you can use the RadDataGrid.SelectionChanged event, although this does not behave well with template columns with focusable elements (e.g. ComboBox).

As to your second problem, it may be related to a known issue with the RadDataGrid when the grid does not update its data when the ItemsSource is changed too early. You can try to fill the ViewModel collections before you set the ItemsSource of the grid.

I hope this was useful. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Rajesh]

Hi Rosy,

Let me explain my requirement about identifying the row that was selected in the grid. The attachment explains it in depth.

Since I have already explained the logic in another thread (http://www.telerik.com/forums/how-to-identify-the-tag-property-of-a-control-on-clicked-when-inside-a-rad-grid) I am attaching the screen shot to make it clear to understand.

Hope that I will be able to get a feasible solution at the earliest.

Thanks,

Rajesh.

[Rosy Topchiyska]

Hi Rajesh,

Since this discussion is spread out into several threads, and your last question is answered in another thread, I will just close this one and answer your question in this thread:
How to identify the Tag property of a control on clicked when inside a RAD Grid

Regards,
Rosy Topchiyska
Telerik