How to inline edit SfListView items during runtime?

[Subha]

Is there a way to edit SfListView during runtime? My requirement is to create checklist items using SfListview and tapping on item should allow it to edit and clicking anywhere outside should save it. Is that possible???

Editing listview item can be done by using modal popup, but I need inline editing method.

[Jayaleshwari N]

Hi Subha, 

 

Thanks for Contacting Syncfusion Support. 

 

We have checked the reported query “How to inline edit SfListView items during runtime?” from our side. You can achieve your requirement by loading Editor in SelectedItemTemplate with OneWay binding mode for particular property to avoid immediate update to property. And explicitly set the editor value to bound object when editor is unfocused using editor events. 

 

Code snippet XAML: Editor will be loaded when tap on the listview item. 

 

<syncfusion:SfListView.SelectedItemTemplate> 

    <DataTemplate> 

        <Editor x:Name="editorContactName" Text="{Binding ContactName, Mode=OneWay}"> 

            <Editor.Behaviors> 

                <local:EditorBehavior/> 

            </Editor.Behaviors> 

        </Editor> 

    </DataTemplate> 

</syncfusion:SfListView.SelectedItemTemplate> 

 

Code snippet C#: Editor value will be committed when you click outside              

 

public class EditorBehavior : Behavior<Editor> 

{ 

    private void OnEditorUnfocused(object sender, FocusEventArgs e) 

    { 

        var editor = sender as Editor; 

        var bindingContext = editor.BindingContext as Contacts; 

        bindingContext.ContactName = editor.Text; 

    } 

} 

 

We have attached the sample for your reference and you can download the same from the following location. 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/141191InlineEdit-859853599  

 

Note: LsitView can show case multiple property binding in ItemTemplate and using virtualization concept. So, you need to handle the each property for editing. You can refer our SfDataGrid for inline editing which supports editing and validation with templates. 

UG Link: https://help.syncfusion.com/xamarin/sfdatagrid/overview  

 

Please let us know if you would require further assistance. 

 

Regards, 

Jayaleshwari N. 

[Gautam Jain]

Thanks a lot Jayaleshwari.

It is working well. How can I close back the editor and show the original view that existed before selecting the item (and going in edit mode).

Meaning, the editor closes only when I select another item where another item goes in edit mode.

I want to close the editor when focus goes out of the editor.

Can you help please?

[Muthu Kumaran Gnanavinayagam]

Hi Gautam, 

 

We have checked the reported query “Need to disable/enable edit mode when needed” from our side. We have modified our sample to achieve the reported requirement. In our sample, we have added 2 buttons along with Editor control to choose whether the edited text have to be replaced in the model data. 

 

For your reference, we have attached the modified sample and you can download it from the below link. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/141191/ze/141191InlineEdit-1768717719 

 

Please let us know if you require further assistance. 

 

Regards, 

G.Muthu kumaran.