How to Add a Column in silverlight grid having image buttons

[Vineet Dhingra]

Hi,
Actually i am designing a grid which would have a edit and a delete column. Can anyone tell me how to add these column which would be having a image button and how to get it's button click event. actually i have found how to add a normal button but it does not have attribute to make it an image button.

[Pavel Pavlov]

Hi Vineet Dhingra,

To convert the button to  an image button just set the  button's content property to an image element.
Something like :

<Button   Click="buttonTest_Click">
         <StackPanel Orientation="Vertical">
            <Image Source="image1.jpg" />
            <TextBlock Text="Test 1" />
         </StackPanel>
</Button>

Let me know if  you have further troubles implementing this into RadGridView

Kind regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chhavi Nath]

Hi Pavel,

 Can you please describe how to do the same using MVVM approach?
 I have tried it using MVVM approach but when i click on the image button, it does not call the method associated with the command property.
 

<

 

 

telerik:RadGridView Grid.Row="1" Margin="0" x:Name="SearchCustomerGrid" ItemsSource="{Binding CustomerSearchResultList}"

 

 

 

SelectedItem="{Binding CustomerSelectedInGrid, Mode=TwoWay}" IsReadOnly="False"

 

 

 

RowIndicatorVisibility="Collapsed" ShowGroupFooters="False" ShowGroupPanel="False"

 

 

 

AutoGenerateColumns="False" SelectionMode="Single"

 

 

 

VerticalAlignment="Stretch" Width="Auto" HorizontalAlignment="Stretch" Height="Auto">

 

 

 

 

<telerik:RadGridView.Columns>

 

 

 

 

 

     <telerik:GridViewDataColumn>

 

 

 

 

         <telerik:GridViewDataColumn.CellTemplate>

 

 

 

 

            <DataTemplate>

 

 

 

 

                   <Button  Width="20"Height="21" Command="{Binding  ElementName=LayoutRoot,Path=DataContext.UnBlockCommand}" HorizontalAlignment="Center">

 

 

 

 

                        <Image Source="{Binding Image,Mode=OneWay}" />

 

 

 

 

 

 

 

                    </Button>

 

 

 

 

            </DataTemplate>

 

 

 

 

         </telerik:GridViewDataColumn.CellTemplate>

 

 

 

 

     </telerik:GridViewDataColumn>

 

 

 

 

 

</telerik:RadGridView.Columns>

 

 

 

 

</telerik:RadGridView>

Following line of code is written in the constructor of the ViewModel.

 

        UnBlockCommand =

 

new DelegateCommand(UnBlockCustomer);

Thanks
Chhavi

 

[Pavel Pavlov]

Hi,

Using ElementName binding inside the cells is not recommended.  Please try the following .
Expose your model as a static resource and for the command binding use a static resource instead element name.

This should do the trick.

Kind regards,
Pavel Pavlov
the Telerik team