UWP Telerik RadDataGrid not allowing me to end row edit by hitting enter - xaml

I am having trouble ending an edit of a row in Telerik's UWP RadDataGrid. Once the data is populated I click on a cell to start an edit. After I finish editing the row I hit enter to finish editing but it remains in edit mode. Clicking a cell in another row ends the edit and the new data is intact but the bound collection does not get updated. Below is a screen shot of the grid I am using:
Here is the XAML code in my page:
<tg:RadDataGrid ColumnDataOperationsMode="Flyout" x:Name="grid" ItemsSource="{x:Bind ViewModel.Source}" UserEditMode="Inline" Grid.ColumnSpan="4" Grid.Row="1"/>
I would really appreciate some help. Thanks so much in advance!

After I finish editing the row I hit enter to finish editing but it remains in edit mode.
I created a 16299 UWP project to test and installed the Telerik.UI.for.UniversalWindowsPlatform(1.0.0.7) package for it. Then, I can reproduce this issue. But if I change my project's target version to "15063", when I hit Enter key, it will commit an edit operation successfully. So, this telerik control might has some issues when it's running in 16299. You could report this issue to their official site of Telerik.
And since the Telerik controls of UWP is open source, you could also check its source code and fix this issue by yourself, then you could compile your custom version by yourself and use it in your project.
I saw the relevant code about this issue maybe in this line code: https://github.com/telerik/UI-For-UWP/blob/master/Controls/Grid/Grid.UWP/View/RadDataGrid.Manipulation.cs#L392 Maybe, you could check it.
Clicking a cell in another row ends the edit and the new data is intact but the bound collection does not get updated.
I have not saw your code, so I didn't know where the issue is. But it worked well on my side. You could check my simple code sample for reference:
<telerikGrid:RadDataGrid x:Name="DataGrid" ItemsSource="{x:Bind ls}" UserEditMode="Inline"></telerikGrid:RadDataGrid>
public sealed partial class MainPage : Page
{
public ObservableCollection<Data> ls { get; set; }
public MainPage()
{
this.InitializeComponent();
ls = new ObservableCollection<Data>() {new Data { Country = "India", Capital = "New Delhi"},
new Data { Country = "South Africa", Capital = "Cape Town"},
new Data { Country = "Nigeria", Capital = "Abuja" },
new Data { Country = "Singapore", Capital = "Singapore" } };
}
}
public class Data:INotifyPropertyChanged
{
private string _Country;
public string Country
{
get { return _Country; }
set
{
_Country = value;
RaisePropertyChange("Country");
}
}
private string _Capital;
public string Capital
{
get { return _Capital; }
set
{
_Capital = value;
RaisePropertyChange("Capital");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChange(string propertyName)
{
if (PropertyChanged!= null)
{
PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
}
}
}

Related

Identify which MudExpansionPanel is being expanded

I want to present a list of up to 20 panels within a <MudExpansionPanels> component where the expanded child portion of each <MudExpansionPanel> is expensive to render. I tried the following test code but all instances of <LiveAgentSummary> are rendered as the parent is rendered, just to clarify this rendering of <LiveAgentSummary> happens before any panel is manually expanded.
<MudExpansionPanels>
#foreach (var liveAgent in _liveAgents)
{
<MudExpansionPanel Text=#liveAgent.Name>
<LiveAgentSummary AgentId=#liveAgent.Id />
</MudExpansionPanel>
}
</MudExpansionPanels>
I then looked into delaying the render of each <LiveAgentSummary> through use of a RenderFragment that is dynamically built during the <MudExpansionPanel> IsExpandedChanged event. However the event handler does not indicate which panel is being expanded and hence I do not know which liveAgent.Id param value to pass to <LiveAgentSummary> as I build a RenderFragment.
I think <MudExpansionPanels> is missing support for a bind-ActivePanelId property but hopefully I am overlooking an alternative solution to my delayed rendering objective.
This is the official MudBlazor example that prompted me to look into using a RenderFragment.
Update: A long answer briefly appeared yesterday suggesting that I could query the list of panel components on a built-in property that indicates the expanded state. The poster had gone to the trouble of reading the MudBlazor source code but the answer was then deleted.
I am now wondering how from code in an event handler it is possible to iterate over a component hierarchy declared as mark-up. Applying this to my example markup above, how could event handler code obtain a reference to each <MudExpansionPanel> child within <MudExpansionPanels>.
Can't you make use of the bool from the IsExpandedChanged callback? Something like this:
Index.razor
#page "/"
<MudExpansionPanels>
#foreach (var liveAgent in this.liveAgents)
{
<MudExpansionPanel
Text="#($"{liveAgent.Name} ({liveAgent.Data})")"
IsExpandedChanged="#(e => this.Load(e, liveAgent))">
<LiveAgentSummary Agent="#liveAgent" />
</MudExpansionPanel>
}
</MudExpansionPanels>
#code {
private readonly List<Agent> liveAgents = new()
{
new Agent("1", "Agent Smith"),
new Agent("2", "Agent Brown"),
new Agent("3", "Agent Jones")
};
private void Load(bool expanded, Agent agent)
{
if (expanded)
{
agent.Load();
}
}
}
LiveAgentSummary.razor
<MudText>id: #this.Agent.Id, data: #this.Agent.Data</MudText>
#code {
[Parameter]
public Agent Agent { get; set; } = default!;
}
Agent.cs
public record Agent(string Id, string Name)
{
public string Data { get; set; } = "Not loaded";
public void Load()
{
Console.WriteLine($"Loading agent {this.Id}...");
this.Data = "Loaded!";
}
}

XAML forms have second picker sorted based on selection in first picker

I have 2 dropdowns (pickers) on a XAML form. The first is an ObservabelCollection of Territories. The second is an ObservableCollection of type Tracks. When the form loads my ViewModel loads both collections and each collection is bound to a picker. I want to filter and display only those tracks that are associated with the selected territory in the second picker.
FYI-the second picker is disabled until a selection is made in the first. Actually I don't require that the second picker's data source be set as the form loads, unless the solution requires it. The selection in the first picker will be the key to filter the data for the second.
I have tried to handle the filtering in the Territory picker's SelectedIndexChanged event but my ObservableCollection 'tracks' is not exposed here.
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
Tracks _track = tracks.Where(X => X.Territory = territory);<<<==== Does not work
trackPicker.ItemsSource = _track.Track;<<<==== Does not work
trackPicker.IsEnabled = true;
}
I've also tried to not build the Tracks OC until after the Territory is selected like this:
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
TrackViewModel vm = new TrackViewModel();
var _tracks = (Tracks)vm.Tracks; <<<<<==== This does not work
trackPicker.IsEnabled = true;
}
The ViewModel runs and the tracks are loaded via the API but when it returns here Tracks is empty.
I'm open to a reasonable solution (not 3rd party controls/packages) that will accomplish this task . Thanks
I figured it out by stumbling over the answer while researching another issue. I have been referencing my viewmodel in the {content].xaml page like this.
<ContentPage.BindingContext>
<vm:TrackViewModel />
</ContentPage.BindingContext>
When doing so the resources of that vm were not available in the code behind. But when I reference the VM in the page constructor Like this:
public partial class RequestmyTracks : ContentPage
{
TrackViewModel trackviewmodel = new TrackViewModel();
And then bind it here:
public RequestmyTracks()
{
InitializeComponent();
BindingContext = trackviewmodel;
}
The trackviewmodel is accessible in the SelectedIndexChanged event and everything else was really straight forward, Which looks like this:
private void territoryPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
string territory = picker.SelectedItem.ToString();
ObservableCollection<Tracks> dah = (ObservableCollection<Tracks>)trackviewmodel.Tracks;
List<string> trackNames = new List<string>();
foreach (var track in dah)
{
if (track.Territory == territory)
trackNames.Add(track.Track);
}
trackPicker.ItemsSource = trackNames;
if(trackNames.Count ==1)
trackPicker.SelectedIndex = 0;
trackPicker.IsEnabled = true;
}
Thanks for the help

Updating a property in a viewmodel of popup doesn't update the UI

As in the title I have a problem where updating a property in a viewmodel of popup doesn't update the UI. I use popups from xamarin community toolkit. I'm using a command that does this task:
async Task ShowPopup()
{
MessagingCenter.Send(AnimeGroupObservable, "AnimeGroups");
Shell.Current.ShowPopup(new MediaListGroupsPopup());
}
It sends a message with payload and shows popup. This is popup viewmodel:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using OtakuApp.Models;
using Xamarin.Forms;
namespace OtakuApp.ViewModels
{
class MediaListGroupsPopupViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public ObservableCollection<Group> _AnimeGroups = new ObservableCollection<Group>();
public ObservableCollection<Group> AnimeGroups
{
get => _AnimeGroups;
set
{
if (_AnimeGroups == value)
return;
_AnimeGroups = value;
OnPropertyChanged();
}
}
public String _label;
public String label
{
get => _label;
set
{
if (value == _label)
return;
_label = value;
OnPropertyChanged();
}
}
public MediaListGroupsPopupViewModel()
{
MessagingCenter.Subscribe<ObservableCollection<Group>>(this, "AnimeGroups", (AnimeGroupObservable) =>
{
Console.WriteLine(AnimeGroupObservable[0].Name);
label = AnimeGroupObservable[1].Name;
MessagingCenter.Unsubscribe<ObservableCollection<Group>>(this, "AnimeGroups");
});
}
}
}
I'm planning on having a small collection view of labels to select from. But right now I'm struggling to update one label just for testing purposes, so you can imagine that I've tried collection view and it didn't work. Setting _label to something manually in the code shows that binding works. It's just not updating for some reason.
Popup xaml file:
<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup
x:Class="OtakuApp.Popups.MediaListGroupsPopup"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Size="300,300">
<StackLayout>
<Label Text="{Binding label}" />
</StackLayout>
</xct:Popup>
So right now I have two problems:
Label doesn't update. It's binded to a property that has INotifyPropertyChanged
Weirdly this subscription happens only the second time (and after that too, just not the first time) I open up a popup. Is this because it's in the constructor? If yes, what's the correct way to deal with it?
Also a small question - I have unsubscribe at the end of subscription. When I didn't have it and I printed out AnimeGroupObservable[0].Name, the first time it was printed one time, the second time I open up the popup two times etc. Is the unsubscribe at the end the correct way to fix this?
since you are passing a single parameter to a single page, using the constructor would be much simpler than MessagingCenter (which is great, but overkill for this scenario)
when creating the page, pass the parameter in the constructor
Shell.Current.ShowPopup(new MediaListGroupsPopup(AnimeGroupObservable));
then modify the page constructor to accept the parameter
public MediaListGroupsPopup(ObservableCollection<Group> groups)
{
// you did't show how you create your VM, but I assume it's something like this
this.BindingContext = new MediaListGroupsPopupViewModel(groups);
}
then modify your VM constructor
public MediaListGroupsPopupViewModel(ObservableCollection<Group> groups)
{
label = groups[1].Name;
}
if you really are only using a single string value, you could just pass that instead of the entire ObservableCollection

Syncfusion calender OnMonthCellLoaded custom event is passing a null to my command

Preface: Syncfusion provides a free Calender control called SfCalendar for Xamarin.Forms. This calender has an event called OnMonthCellLoaded. The problem with this event is that its eventargs is type MonthCell which does not inherit from System.EventArgs unfortunately. This is a problem because the eventargs of an event must inherit from System.EvenArgs in order for it to properly used by the Prism EventToCommand behavior.
Objective: I am trying to bind the OnMonthCellLoaded event using prism behaviors in order to set the data context of the MonthCell. I hope this is clear.
Current situation:
I have extended the SfCalendar calender like follow:
public class sfCalendarExtended : Syncfusion.SfCalendar.XForms.SfCalendar
{
public event EventHandler<MonthCellEventArgs> OnMonthCellLoadedExtended;
public sfCalendarExtended()
{
this.OnMonthCellLoaded += SfCalendarExtended_OnMonthCellLoaded;
}
private void SfCalendarExtended_OnMonthCellLoaded(object sender, MonthCell e)
{
if (this.OnMonthCellLoadedExtended != null)
{
if (e != null)
{
Debug.Print(e.Date.ToLongDateString());
var eventArgs = new MonthCellEventArgs() { Value = new MonthCell(e.Date) };
this.OnMonthCellLoadedExtended(this, eventArgs);
}
}
}
}
public class MonthCellEventArgs : System.EventArgs
{
public MonthCell Value { get; set; }
public MonthCellEventArgs()
{
}
}
This is my Xaml
<Controls:sfCalendarExtended x:Name="calendar">
<Syncfusion:SfCalendar.MonthViewSettings>
<Syncfusion:MonthViewSettings DateSelectionColor="#dddddd" CellTemplate="{StaticResource weathertemplate}"/>
</Syncfusion:SfCalendar.MonthViewSettings>
<Syncfusion:SfCalendar.Behaviors>
<prismbehaviors:EventToCommandBehavior EventName="OnMonthCellLoadedExtended" Command="{Binding BindMonthCellToDateCommand}"/>
</Syncfusion:SfCalendar.Behaviors>
</Controls:sfCalendarExtended>
Where controls is the alias for the namespace where the sfCalenderExtended class resides.
Now let's take a look at the Command implementation in my view model:
public DelegateCommand<MonthCellEventArgs> BindMonthCellToDateCommand { get; set; }
public ViewModel()
{
BindMonthCellToDateCommand = new DelegateCommand<MonthCellEventArgs>(
(MonthCellEventArgs obj) =>
{
// more code here
Now everything goes according to plan until I hit MonthCellEventArgs obj with the debugger and obj is always null.
Any help would be highly appreciated.
Alright, so I have emailed Syncfusion about this and they have addressed this issue by changing the args parameter of MonthCellLoaded event handler to inherit from System.EventArgs. More information in their online forum here.
My solution above works if and only if I use Corcav behaviors (see link) instead of Prism behaviors.
We have fixed the issue’s with “System.ArgumentException has been thrown while using EventToCommand behavior in SfCalendar”. As per the implementation Monthcell is moved to EventArgs from View and it is deprecated in OnMonthCellLoaded event and use MonthCellLoadedEventArgs. Please find the Custom assemblies for this fix below.
Custom assemblies: http://www.syncfusion.com/downloads/support/directtrac/217023/ze/Assembly1814496033.zip
Please clear the NuGet cache before replacing the custom assemblies. Please find the link below,
https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache
Assembly Version: 16.3.0.21
Installation Directions:
Replace the files “Syncfusion.SfCalendar.XForms.dll, Syncfusion.SfCalendar.XForms.Android.dll, Syncfusion.SfCalendar.XForms.iOS.dll” under following folders. Before replacing the new assemblies please take backup of old assemblies.
{Syncfusion Installed location} \Essential Studio\16.3.0.21\Xamarin\lib\pcl\Syncfusion.SfCalendar.XForms.dll
{Syncfusion Installed location} \Essential Studio\16.3.0.21\Xamarin\lib\Android\Syncfusion.SfCalendar.XForms.dll
{Syncfusion Installed location}\EssentialStudio\16.3.0.21\Xamarin\lib\Android\Syncfusion.SfCalendar.XForms.Android.dll
{Syncfusion Installed location} \Essential Studio\16.3.0.21\Xamarin\lib\iOS\Syncfusion.SfCalendar.XForms.dll
{Syncfusion Installed location}\EssentialStudio\16.3.0.21\Xamarin\lib\iOS\Syncfusion.SfCalendar.XForms.iOS.dll
Regards,
Vigneshkumar R

Xamarin Forms Dynamically Load Content in a Page

My current set up:
Xamarin Forms, consisting of iOS, Android, WP app and shared PCL.
Using MVVM Light to keep a nice separation of concerns.
Brief intro into what I want to achieve. I want to have a Base page that has a Cancel and Next button. On pressing the Next button Content is loaded dynamically within that base page.
Xaml View:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LogInPresenterView">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Cancel" Priority="0" Order="Primary" Command="{Binding Cancel}"></ToolbarItem>
<ToolbarItem Text="Next" Priority="1" Order="Primary" Command="{Binding Next}"></ToolbarItem>
</ContentPage.ToolbarItems>
</ContentPage>
ViewModel Code:
public class LogInPresenterViewModel : ViewModelBase
{
public LogInPresenterViewModel() {}
private RelayCommand _next;
public RelayCommand Next
{
get
{
return _next ?? (_next = new RelayCommand(async () => await DoNext()));
}
}
private async Task DoNext()
{
// IN HERE I WOULD LIKE TO DYNCAMICALLY LOAD CONTENT / VIEWS
}
}
Usually you would have a StackLayout etc before the element. However, on clicking the Next Toolbar Item I want to dynamically load content (that has a viewmodel).
So maybe my ICommand for my next button checked to see what the current content type was, and depending on that I would load another bit of content.
The scenario would be, the base page would load along with the first bit of content - Enter Email and Password. User enters that then clicks on next, if all ok, the content is replaced with the option to enter a security code, keeping the base Close and Next buttons at the top.
Hopefully this makes sense. I know what I want to do in my head, I just don't know how to translate that into Xamarin Forms...
Ok,
So first job is to create your region service in your PCL. This will look something like this:
using System;
using System.Collections.Generic;
namespace xxx
{
public class RegionService : IRegionService
{
private Dictionary<string, object> _regionDictionary;
public RegionService ()
{
_regionDictionary = new Dictionary<string, object> ();
}
#region IRegionService implementation
public bool RegisterRegion (string regionName, object regionObject)
{
object region = null;
_regionDictionary.TryGetValue (regionName, out region);
if (region != null)
_regionDictionary [regionName] = regionObject;
else
_regionDictionary.Add (regionName, regionObject);
return true;
}
public object ResolveRegion (string regionName)
{
object region = null;
_regionDictionary.TryGetValue (regionName, out region);
if (region == null)
throw new RegionServiceException ("Unable to resolve region with given name");
return region;
}
#endregion
}
}
This when you create your page with the dynamic content register your dynamic contentview in your code behind:
ContentView contentView = this.FindById<ContentView>("myContentView");
regionService.RegisterRegion("DynamicView", contentView);
You'll need to create an interface for your views and pages to use to indicate which region they wish to be presented in:
using System;
namespace xxx
{
public interface IRegionView
{
string GetRegionName ();
}
}
Then in your code behind for your view implement this interface to return the name of the region to display in.
You now need a custom presenter to use this region code. I use MVVMCross, so the details will vary for the MVVM implementation you are using, but essentially something like this is what you need:
public async static Task PresentPage(Page page)
{
if (typeof(IRegionView).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
{
IRegionService regionService = Mvx.Resolve<IRegionService>();
string regionName = (page as IRegionView).GetRegionName();
Page region = regionService.ResolveRegion(regionName) as Page;
if (typeof(IModalPage).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
await region.Navigation.PushModalAsync(page);
else if (typeof(IPopupPage).GetTypeInfo().IsAssignableFrom(page.GetType().GetTypeInfo()))
region.PushOverlayPage(page);
else if (typeof(NavigationPage).GetTypeInfo().IsAssignableFrom(region.GetType().GetTypeInfo()))
await (region as NavigationPage).PushAsync(page);
}
}
I hope this is useful for you :)
So if this was me. I would create a region service where the contentview registers a unique region name.
Content would then be marked to use that region, and a custom presenter can be used to show the view model's content in the appropriate region.
I'm on my phone whilst travelling at the moment but I can post some code later on if that helps :)
Tristan
You can dynamically load Xamarin Forms UI with XAML.
Old Answer:
This can be achieved with the use of the LoadFromXaml method. It works in the same was as XamlReader.Load in Silverlight/WPF. It is a hidden method that can be only accessed through reflection. There is an article on how to do it here:
http://www.cazzulino.com/dynamic-forms.html
But, I would like to ask to you go to this feature request at Xamarin and ask that the method be made public so that it becomes a fully supported feature:
https://forums.xamarin.com/discussion/comment/252626