Filtering sfchat data

Question

Supposing I have a page where I show a combobox and after selecting a value I'd like to open another page showing a SfChat with the data filtered based on the value selected in the combobox

Do you have a suggestion to perform this ?

I'm using the Shell Navigation after selecting the value in the combobox to open the page with the SfChat inside

await Shell.Current.GoToAsync($"{nameof(ChatPage)}?param="+comboboxselectedvalue);

but I don't find any way to filter the SfChat.ItemSource based on this value

I manged to get this value inside the SfChat ViewModel using the QueryProperty approach but how can I use this value to filter the SfChat data ?

[QueryProperty("param", " param ")]

param

")]

Suthi Yuvaraj · Accepted Answer

Walter Martin , Sorry for the delay,We have checked your requirement , you can filter the data through passing
param by the below approaches, Approach 1: By Shell.Current.GoToAsync()Here if you want to pass the
parameter, you can send them by 'Dictionary'. Or create an
object that contain these parameters. Please refer the below code snippet
for more reference In Model.cs

public class Model
  {
      private string selection;
      public Model()
      {
      }
      public string Selection
      {
          get {
  return selection; }
          set
          {
              selection
  = value;
              RaisedOnPropertyChanged("Selection");
          }
      }
  }

In AppShell.xaml.cs

public partial class AppShell : Shell
   {
       public AppShell()
       {
           InitializeComponent();
           Routing.RegisterRoute(nameof(ChatPage),
  typeof(ChatPage));
   }
       private async void
  comboBox_SelectionChanged(object sender,
  Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
       {
           var
  selection = sender as SfComboBox;
           if
  (selection == null || selection.SelectedItem == null)
           {
               return;
           }
   
           Model
  package = new Model() { Selection = selection.SelectedItem.ToString() };
           var
  navigationParameter = new Dictionary<string, object> { {
  "MyModel", package } };
           await
  Shell.Current.GoToAsync($"ChatPage", navigationParameter);
  }
   }

In ChatPage.xaml.cs

[QueryProperty(nameof(MyModel), "MyModel")]
     public partial class ChatPage :
  ContentPage
     {
         public Model
  MyModel
         {
             set
             {
                 ShowMessage(value);
      }
  }
         public
  ChatPage()
         {
             InitializeComponent();
         }
   
         private void
  ShowMessage(Model value)
         {
             var
  selectedItem = value.Selection;
             if
  (selectedItem != null)
             {
                vm.SelectedValueCollection(selectedItem);
             }
             else
             {
                 foreach
  (var message in vm.Messages)
                 {
                     vm.SelectedMessages.Add(message);
                 }
             }
         }

Approach 2:By Navigation.PushAsync()You can pass the combo box selected value by parameterized constructor.In App.xaml.cs

public partial class App :
  Application
      {
          public
  App()
          {
              InitializeComponent();
              MainPage
  = new NavigationPage(new AppShell());
          }
      }

In AppShell.xaml.cs

private async void
  comboBox_SelectionChanged(object sender,
  Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
   {
       var selection = sender as
  SfComboBox;
       if(selection != null)
       {
           Navigation.PushAsync(new
  ChatPage(selection.SelectedItem));
     }
  }

In ChatPage.xaml.cs

public
  ChatPage(object selectedItem)
   {
       InitializeComponent();
       if (selectedItem != null)
       {
           vm.SelectedValueCollection(selectedItem.ToString());
       }
       else
       {
           foreach
  (var message in vm.Messages)
           {
               vm.SelectedMessages.Add(message);
           }
       }
   
   }

Please let us know if you have any concerns,Attachment: ChatMaui_b244e5dc.zip

Suthi Yuvaraj · Answer

Hi Walter Martin,We have checked your requirement, and we have created a sample with SfChat, able to filter the text based on the combo box selection. We have attached the workable sample, please have a look at the sample and let us know if you have any concerns.UG Link:https://help.syncfusion.com/maui/chat/getting-startedRegards,Suthi Yuvaraj.Attachment: ChatMaui_b0b2553b.zip

Walter Martin · Answer

Many thanks for your help.Your version is working perfectly but how can I do the same if I want to show the sfchat messages filtered as you did in a new page ?I'm trying to use this approach

await Shell.Current.GoToAsync($"{nameof(ChatPage)}?param="+comboboxselectedvalue);

to filter then the messages in the new page but I don't find the right way to recevie the parameter value in the second page to filter the data

Walter Martin · Answer

Basically what I need to do is a sort of Master Detail in two pages.

In the fist page I select an item from a list and then I show in the second page the details of that item.

It's like a whatsapp messaging where I have in the first page the list of contacts and in the second page the details of the conversation.

For this job I think the only solution is to pass to the second page a parameter to specify the contact I selected and this parameter must be used in some way to show the conversation (filtering the messages of that contact)

I know it's possible to use Shell.Current.GotoAsync to pass a parameter to the second page or it's possible to use Navigation.PushAsync and Navigation.PopAsync but I prefer the first way because I'm reading in internet that Navigation can create a lot of problems in case you want to use the pushasync, then the popasync and then the pushasync again to the same page.

Using the GotoAsync method instead, I'm not able to use the parameter in the second page constructor to filter the data

I can't imagine this job has no solution

Thanks