How to Add a Column in silverlight grid having image buttons

4 posts, 0 answers
  1. Vineet Dhingra
    Vineet Dhingra avatar
    5 posts
    Member since:
    Sep 2009

    Posted 25 Sep 2009 Link to this post

    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.
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 25 Sep 2009 Link to this post

    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.
  3. Chhavi Nath
    Chhavi Nath avatar
    1 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    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

     

  4. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 17 Jan 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top