Intersoft Community - Crosslight - Crosslight Editable Table View

Crosslight Editable Table View

leo.c — Tue, 15 Sep 2015 09:55:26 GMT

Hi Thomas,

For your information, Programmatically change SelectedItems property in ViewModel in editing mode issue has been fixed. You should be able to find the hotfix from this link.

note : It is recommended to removed the work around that have been suggested previously before you applied this hotfix.

Best Regards,
Leo

Edit : Hotfix Link has been fixed.

Crosslight Editable Table View

thomas.albert@tea-net.ch — Mon, 16 Mar 2015 18:43:56 GMT

Hello Leo,

works as intended.

Thanks,

Thomas

Crosslight Editable Table View

leo.c — Mon, 16 Mar 2015 10:31:36 GMT

Hi Thomas,

Yes. You must add this.RegisterViewIdentifier("EditButton", this.EditButton);
Sorry, I seem I miss it on my answer.

Regarding setting SelectedItems programmatically, there is a work around by implementing this in view controller:

protected override void OnViewModelPropertyChanged(PropertyChangedEventArgs e){
    if(e.PropertyName == "SelectedItems"){
        //Deselected all item in view
        if(this.TableView.IndexPathsForSelectedRows != null)
            foreach(NSIndexPath selectedPath in this.TableView.IndexPathsForSelectedRows){
                this.TableView.DeselectRow(selectedPath, true);
            }
        //Reselect all item based on current SelectedItems on ViewModel
        if(this.ViewModel.SelectedItems != null)
            foreach(DataSamples.Models.Item item in this.ViewModel.SelectedItems){
                var index = this.ViewModel.Items.IndexOf(item);
                var groupIndex = 0;
                if(this.ViewModel.GroupItems != null){
                    bool founded = false;
                    List<CategoryGroup> list = (List<CategoryGroup>)this.ViewModel.GroupItems;
                    for(int i=0;i<list.Count;i++){
                        var groupItem = list[i];
                        for(int j=0;j<groupItem.Count;j++){
                            var tempItem = groupItem[j];
                            if(tempItem == item){
                                index = j;
                                groupIndex = i;
                                break;
                            }
                        }
                        if (founded)
                            break;
                    }
                }
                var indexs = NSIndexPath.FromRowSection(index, groupIndex);
                this.TableView.SelectRow(indexs,true,UITableViewScrollPosition.None);
            }
    }
}

That should do it.

Best Regards,
Leo

Crosslight Editable Table View

thomas.albert@tea-net.ch — Thu, 12 Mar 2015 16:42:45 GMT

Hello Leo,

Thank you for your support.

The custom bar button works as you described :)

The custom text for the "Edit" button does not always work as described :(

In the ViewController I had to add 'this.RegisterViewIdentifier("EditButton", this.EditButton);' even when using the built-in edit button. Without this line the data binding has no connection to the button. The "TwoWay" binding mode for the text is not necessary, because the update is always triggered by the ViewModel and there is no setter in the "EditText" property, too. Nevertheless thank you for your hints.

In the mean time I have another problem. I added a custom button to the toolbar when in edit mode. It is a "Select all" button. The button is bound to a DelegateCommand. When I am in edit mode and there are items in the table the button is active. When I click the button I hit the related method of the DelegateCommand and I add each item of the table to "this.SelectedItems". The "OnSelectedItemsCollectionChanged" gets called when I modify the "this.SelectedItems". The problem is that the selected state of a table item is not displayed in the table. When in edit mode each table item has a circle on the left side. When selecting an item the circle turns blue and is checked. But when I add the items to 'this.SelectedItems' programmatically, the circles remain empty and the are not blue and checked.

I added two screenshots to clarify the problem.

A quick solution would be nice.

Thanks,

Thomas

Crosslight Editable Table View

leo.c — Mon, 09 Mar 2015 06:24:51 GMT

Hi Thomas,

For your first question, you could bind EditButton to viewmodel and set it to the value you want to display. Then set the value acording to current state. The following are the sample code:

BindingProvider:

this.AddBinding("EditButton", BindableProperties.TextProperty, "EditText",BindingMode.TwoWay);
this.AddBinding("TableView", BindableProperties.IsEditingProperty, "IsEditing", BindingMode.TwoWay);

ViewModel:

public string EditText
{
    get {
        return (!base.IsEditing) ? "Bearbeiten" : "Fertig";
    }
}
protected override void OnPropertyChanged(string propertyName)
{
    base.OnPropertyChanged(propertyName);
    if(propertyName == "IsEditing"){
        OnPropertyChanged("EditText");
    }
}

Regarding the second question, you need to create the button and add it to view when InitializeView was called. Then Bind your button to a command in bindingprovider. The following are the sample code on how to do it:

ViewController:

UIBarButtonItem customButton = new UIBarButtonItem();
customButton.Style = UIBarButtonItemStyle.Bordered;
customButton.Title = "Button";
this.SetToolbarItems(new UIBarButtonItem[] { deleteButton, customButton }, false);
this.RegisterViewIdentifier("CustomButton", customButton);

Binding Provider:
this.AddBinding("CustomButton", BindableProperties.CommandProperty, "CustomCommand");

That should do it.

Best Regards,
Leo

Crosslight Editable Table View

thomas.albert@tea-net.ch — Sun, 08 Mar 2015 10:24:49 GMT

Hello Crosslight Support,

I have some questions about the "Editable Table View" on iOS.

1. How can I customize button names? In the editable table view there is an "Edit" button on the top right corner. Entering edit mode the button name turns to "Done". How can I translate these names, because my language is German and the names should be "Bearbeiten" and "Fertig".

2. When entering the edit mode, a toolbar appears at the bottom. Here one can have a "Delete" button for example like in your "Data Sample -> Multiple Delete". How is it possible to add custom buttons and bind these buttons to commands in the ViewModel.

Thanks for your support.

Thomas