We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to inline edit SfListView items during runtime?

Thread ID:

Created:

Updated:

Platform:

Replies:

141191 Nov 29,2018 03:35 AM UTC Jan 16,2019 12:47 PM UTC Xamarin.Forms 3
loading
Tags: SfListView
Subha
Asked On November 29, 2018 03:35 AM UTC

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 [Syncfusion]
Replied On November 29, 2018 06:18 AM UTC

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. 
 
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. 
 
Please let us know if you would require further assistance. 
 
Regards, 
Jayaleshwari N. 


Gautam Jain
Replied On January 15, 2019 06:57 AM UTC


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 [Syncfusion]
Replied On January 16, 2019 12:47 PM UTC

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. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
G.Muthu kumaran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;