Showing "Editor" Control on Cell Focus

[Logan Lehman]

We are currently trying to create custom "editors" per say (we are porting software from another language/platform). They are basically controls that add extra functionality to standard cells. 

For example, one custom control consists of a textbox, a few buttons, and a whole lot of custom functionality for interacting with special objects in another application. Mainly it is used for grabbing directories or other information, holding it for use by other components, and displaying the data it retrieved in the cell.

We want to be able to put the control inside of the cell as an "editor" (i.e., only when in edit mode). Afterward, we want the cell to go back to normal and just show the data that the editor grabbed. 

Is there any simplistic way to do this?

Thanks in advance.

[Shakul Hameed M]

Hi Logan,

 

Thanks for using Syncfusion products.

 

We have analyzed your query and we can achieve your requirement by using CellEditItemTemplate and CellItemTemplate.

CellEditItemTemplate is the DateTemplate type property, which is used to set the Edit DataTemplate for the cell and

CellItemTemplate is a DateTemplate type property, which is used to set the Item DataTemplate for the cell.

 

Please refer the following code snippet.

 

Code Snippet:

<syncfusion:GridDataVisibleColumn HeaderText="Ship Country" MappingName="ShipCountry">

 

      <syncfusion:GridDataVisibleColumn.CellEditItemTemplate>

           <DataTemplate>

               <Grid>

                   <Grid.ColumnDefinitions>

                          <ColumnDefinition Width="40" />

                           <ColumnDefinition Width="*" />

                   </Grid.ColumnDefinitions>

 

                   <Image Height="15" VerticalAlignment="Center"

                        Source="{Binding Path=CellBoundValue,

                        Converter={StaticResource StringToImageConverter}}" />

                

                   <TextBox Grid.Column="1" VerticalAlignment="Center"

                           Text="{ Binding CellBoundValue}"/>                                       

               </Grid>

           </DataTemplate>

       </syncfusion:GridDataVisibleColumn.CellEditItemTemplate>

 

    <syncfusion:GridDataVisibleColumn.CellItemTemplate>

          <DataTemplate>

             <Grid>

                  <Grid.ColumnDefinitions>

                      <ColumnDefinition Width="*" />

                  </Grid.ColumnDefinitions>

                  <TextBlock Grid.Column="1" VerticalAlignment="Center"

                             Text="{Binding CellBoundValue}" />

              </Grid>

          </DataTemplate>

     </syncfusion:GridDataVisibleColumn.CellItemTemplate>

 

</syncfusion:GridDataVisibleColumn>

 

Here I have loaded an image and a textbox to a cell when the cell is in edit mode, after editing, the default item template is loaded i.e., TextBlock is loaded to the same cell.

By using this, you can load any type of custom controls to a cell.

 

We have prepared a sample based on your requirement, please find the sample from the below location.

 

Sample: Loading Custom control in edit.zip

 

Here the CellEditItemTemplate and CellItemTemplate is loaded in the Ship Country Column.

 

Please let us know if you have any queries.

 

Thanks,

Shakul Hameed