How to get CellTemplate (Edit and Delete Buttons) and CellEditTemplate (Save and Cancel Buttons) to show correctly and then fire off service calls?

[Scott]

First off, I'm using Silverlight 4 (company requirement, can't upgrade to 5).

I have a GridView that has 2 data columns called (Name and Data) and then 1 regular column for modification buttons, (Edit and Delete) and (Save and Cancel), where 1 set of buttons is shown by Default and the other by Edit Mode.

My GridView's ItemsSource is an ObservableCollection that contains objects that have the Name and Data properties.  This collection is pulled via a WCF service call that executes a Get stored procedure on our SQL Server.  I also have other stored procedures that will Add, Edit, or Delete a record.

I am trying to accomplish what I believe should be a very simple or basic task: 

I want to be able to Add, Edit, or Delete a record that would, in real time, fire off a WCF service call to execute the corresponding Add, Edit, or Delete stored procedure on our SQL Server.

My first issue is that I can't even get the CellTemplate and CellEditTemplate to show correctly.  I don't want to throw the row into Edit Mode based on a row or cell selection; I want to force the user to click the Edit button.  That should then trigger the Edit Mode so that the Save and Cancel buttons of the CellEditTemplate should show along with the Name and Data columns both becoming TextBoxes.  

At that point, clicking the Save button would update the object in the collection and then fire off a WCF service call to the Edit stored procedure.  Likewise, if the user clicks the "Click here to add new item" row, it would do just like before, but instead of the firing off a call to the Edit stored procedure, it would fire off a call to the Add stored procedure.

My GridView is defined as:

<telerik:RadGridView
  Grid.Row="8"
  Grid.Column="2"
  x:Name="KeyValuesGridView"
  ActionOnLostFocus="None"
  AlternateRowStyle="{StaticResource rgvAlternateRowStyle}"
  AlternationCount="2"
  AutoGenerateColumns="False"
  Background="DarkGray"
  BorderBrush="Black"
  BorderThickness="2"
  CanUserDeleteRows="True"
  CanUserFreezeColumns="False"
  CanUserInsertRows="True"
  CanUserReorderColumns="False"
  Foreground="Black"
  GridLinesVisibility="Both"
  HorizontalAlignment="Stretch"
  IsFilteringAllowed="False"
  IsReadOnly="False"
  NewRowStyle="{StaticResource rgvNewRowStyle}"
  RowIndicatorVisibility="Collapsed"
  RowStyle="{StaticResource rgvRowStyle}"
  ScrollMode="RealTime"
  SelectionMode="Single"
  ShowGroupFooters="False"
  ShowGroupPanel="False"
  ShowInsertRow="True">

My Name and Data columns are defined as:

<telerik:GridViewDataColumn
  DataMemberBinding="{Binding Name}"
  Header="Name"
  HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
  CellStyle="{StaticResource rgvCellStyle}"
  Width="Auto" />

<telerik:GridViewDataColumn
  DataMemberBinding="{Binding Data}"
  Header="Data"
  HeaderCellStyle="{StaticResource rgvHeaderCellStyle}"
  CellStyle="{StaticResource rgvCellStyle}"
  Width="*" />

My modification buttons column is defined as:

<telerik:GridViewColumn
  Width="Auto"
  IsResizable="False">

  <telerik:GridViewColumn.CellTemplate>
    <DataTemplate>

      <StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">

        <telerik:RadButton
          Content="Edit"
          Command="telerikGrid:RadGridViewCommands.Edit"
          CommandParameter="{Binding}"
          Style="{StaticResource BlueButton}" />

        <telerik:RadButton
          Content="Delete"
          Command="telerikGrid:RadGridViewCommands.Delete"
          CommandParameter="{Binding}"
          Style="{StaticResource BlueButton}" />

      </StackPanel>

    </DataTemplate>
  </telerik:GridViewColumn.CellTemplate>

  <telerik:GridViewColumn.CellEditTemplate>
    <DataTemplate>

      <StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">

        <telerik:RadButton
          Content="Save"
          Command="telerikGrid:RadGridViewCommands.Save"
          CommandParameter="{Binding}"
          Style="{StaticResource BlueButton}" />

        <telerik:RadButton
          Content="Cancel"
          Command="telerikGrid:RadGridViewCommands.Cancel"
          CommandParameter="{Binding}"
          Margin="10,0,0,0"
          Style="{StaticResource BlueButton}" />

      </StackPanel>

    </DataTemplate>
  </telerik:GridViewColumn.CellEditTemplate>

</telerik:GridViewColumn>

[Scott]

I'm kind of in a time crunch here. This was posted ~4 days ago.  No response at all?

[Maya]

Hi Scott,

Firstly, let me clarify a bit the scenario you want to accomplish:
1. You want to have Edit and Delete buttons in view mode and Save and Cancel in edit mode. 
2. You want to be able to edit an item only by pressing Edit button.

If my understanding is correct:
1. You cannot have the first column with the buttons in edit mode, while another column is edited as well. RadGridView supports only a single cell editing. If you want the buttons Save and Cancel to be available while modifying other values, you can try creating CellTemplateSelector, expose a new property - IsEditing for example and depending on it, to display "Edit and Delete" template or "Save and Cancel". Please take a look at our documentation about CellTemplateSelector and its corresponding demo.
2. You can set EditTriggers property of the grid to None. 

Let me know in case you need further assistance with the implementation.


Regards,
Maya
Telerik

 

 

[Scott]

Thanks for clearing that up about the the single cell editing. I'll take a look at the CellTemplateSelector and report back.