So I just bought the sync fusion package, and now I want to create a sparkline.
Their documentation states that I can just create a model and pass it as a binding to the sparkline.
This is what I've done. I've created an empty page, with a sparkline object like this:
<Charts:SfLineSparkline x:Name="yay" ItemsSource="{Binding OrderList}" YBindingPath="Number" MarkerVisibility="Visible" HorizontalAlignment="Left" Height="138" VerticalAlignment="Top" Width="456" Background="#FFFF9A9A"/>
In my code behind I've got a model "OrderViewModel" that looks like this:
public class OrderViewModel
{
public OrderViewModel()
{
this.OrderList = new ObservableCollection<Order>();
DateTime date = DateTime.Today;
OrderList.Add(new Order { Number = 2, TimeStamp = date.AddHours(1) });
OrderList.Add(new Order { Number = 3, TimeStamp = date.AddHours(2.3) });
OrderList.Add(new Order { Number = 1, TimeStamp = date.AddHours(4) });
}
public ObservableCollection<Order> OrderList { get; set; }
}
The "Order" class looks like this:
public class Order
{
public DateTime TimeStamp { get; set; }
public int Number { get; set; }
}
So far this is not working.
According to their docs, it says that I have to do something like adding a data context to the grid above, using a local namespace tag, which I don't have.
It's supposed to look like this:
<Grid.DataContext>
<local:OrderViewModel/>
</Grid.DataContext>
I realize that this is probably a real noob question, but I have been trying to get this working for some time now, and it just wont.
This is the docs I'm reffering to :)
http://help.syncfusion.com/UG/Windows%20Phone%208/Documents/creatingsparkline.htm
Replace MyProject with yours.
xmlns:local="using:MyProject"
Or if the OrderViewModel in another namespace
xmlns:local="using:MyProject.ViewModels"
You should add it with
xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts"
Another way:
Use Properties window if it's closed open it with F4, click the grid tag then go to the DataContext property and press new or the yellow square to select your OrderViewModel.
Related
I have a view-model like this:
public class U1MyProfile1ViewModel : U1Profile
{
public List<SelectListItem> CountryList { get; set; }
}
Thinking that I want the model accessible to the view, plus a some extra fields that aren't really part of the model, such as a drop down list of countries.
Then in the controller I try to "pass the model over to the view-model"
var myProfile = await _mainDbContext.U1Profiles
.AsNoTracking()
.FirstOrDefaultAsync(i => i.SiteUserId == mySiteUserId);
U1MyProfile1ViewModel myProfileViewModel = (U1MyProfile1ViewModel)myProfile;
this compiles, but I get a runtime error of:
InvalidCastException: Unable to cast object of type 'WebApp.Models.U1Profile' to type 'WebApp.ViewModels.U1MyProfile1ViewModel'.
Any ideas on how to do this easily?
Something simpler than assigning the model to the view-model field by field.
Set your View model like follow:
View modal
public class U1MyProfile1ViewModel
{
public List<SelectListItem> CountryList { get; set; }
public U1Profile U1Profile{get;set;}
public string othervariable{get;set;}
}
Controller
var myProfile = await _mainDbContext.U1Profiles
.AsNoTracking()
.FirstOrDefaultAsync(i => i.SiteUserId == mySiteUserId);
U1MyProfile1ViewModel myProfileViewModel = new U1MyProfile1ViewModel;
U1MyProfile1ViewModel.U1Profile=myProfile;
U1MyProfile1ViewModel.CountryList=yourcountrylist;
And finally just passed your viewmodal to View and you get your result.
For better understanding just see below link:
Link1
Link2
If MVC only allows you to have one ViewModel per View, how does one incorporate a dropdownlist (need to have a separate ViewModel for this) into an existing View which is already used by another ViewModel (ie an entity which has a column for this dropdownlist)?
This Question in addition, I guess, Got everything you are looking for:
How to write a simple Html.DropDownListFor()?
As a beginner, I did a very basic implementation of dropDownlist using the NorthWind Database only.
I had imported the Product & Suppliers table from Northwind database.
In the ProductController.cs file, which is the controller file for my Product table, add method: GetAllSuppliers to get all SuppliersID which we will display in a dropdown.
public IEnumerable<int> GetAllSuppliers()
{
NorthwindEntities db = new NorthwindEntities();
return db.Suppliers.Select(e => e.SupplierID);
}
Now, in the Create action method in ProductController.cs, pass all the values of SupplierID in ViewData as seen below:
public ActionResult Create()
{
ViewData["Suppliers"] = new SelectList(GetAllSuppliers());
return View(new Product());
}
In your corresponding Create.aspx View, use this:
<%: Html.DropDownListFor(model => model.SupplierID, ViewData["Suppliers"] as SelectList) %>
Below is a snapshot of the Result:
Let me know if you need any explanation.
You can make a property inside your main ViewModel which contains ViewModel for dropdownlist and use it with dropdown.
Assume you have controller.
public class HomeController
{
public ActionResult Index()
{
var viewModel = new MainViewModel
{
SomeProperty = "SomeValue",
DropDownData = new DropDownDataViewModel() // Initialize it with appropriate data here.
};
return this.View(viewModel);
}
}
And MainViewModel
public class MainViewModel
{
public string SomeProperty {get; set;}
public DropDownDataViewModel DropDownData { get; set; }
}
So, inside your view you can call #Model.DropDownData to get access to this viewmmodel.
I have a CustomerOrder-view where I would like to change an existing CustomerOrder.
I have a viewmodel that very simpliefied looks something like this:
public class CustomerOrderViewModel
{
public int ID { get; set; }
public Customer Customer { get; set; }
public DateTime Date { get; set; }
public IEnumerable<OrderRow> OrderRows { get; set; }
}
public class OrderRow
{
public int id { get; set; }
public int price { get; set; }
}
public class Customer
{
public string Name { get; set; }
}
I also have a database with mapping tables / fields.
In my GET Action Method I load the Order with the help of Automapper like this:
var customerOrder = using (var ctx = new My_Entities()) {
return ctx.CustomerOrders.
Include("Orderrows").
Include("Customer").
Single(o => o.CustomerOrderID == id);
}
var model= AutoMapper.Mapper.DynamicMap<DataAccessLayer.CustomerOrder, CustomerOrderViewModel>(customerOrder);
In the View I use Knockout to bind to a viewmodel there, where the user can update the CustomerOrder. That includes editing Customer information and adding new orderrows etc.
Then in the post back a map the ViewModel back to the ObjectContext CustomerOrder:
var customerOrderToBeSaved =
AutoMapper.Mapper.DynamicMap<CustomerOrderViewModel, CustomerOrder>(
customerOrderViewModel);
try
{
using (var ctx = new MyEntities())
{
ctx.CustomerOrders.Attach(customerOrderToBeSaved);
ctx.CustomerOrders.ApplyCurrentValues(customerOrderToBeSaved);
...
ctx.SaveChanges();
}
}
I get the error message: An object with the same key already exists in the ObjectStateManager. The ObjectStateManager cannot track multiple objects with the same key.
OK, that I can understand. But how should I go about this? Can I get the existing object and apply Changes to that one, because that is really what I'd like. I've tried to look up the old one and detach it but I haven't got it to wrok.Perhaps I'm doing this in a completely wrong way. Please advice.
You should not attach customerOrderToBeSaved, see MSDN about the argument of ApplyCurrentValues.
The detached object that has property updates to apply to the original object.
So you've got to load the entity from the database into the context and then ApplyCurrentValues with the detached object that has the new values.
You don't have to load the row from the database to update it.
You can do something like this:
var entity = ctx.CustomerOrders.Attach(customerOrderToBeSaved);
ctx.Entry( entity ).State = EntityState.Modified;
ctx.SaveChanges();
This will tell EF to issue an UPDATE SQL statement that overwrites all the columns in the record.
You can select which columns you want to update like this:
var entity = ctx.CustomerOrders.Attach(customerOrderToBeSaved);
var entry = ctx.Entry( entity );
entry.Property( o => o.<ColumnPropertyToUpdate> ).IsModified = true;
entry.Property( o => o.<ColumnPropertyToUpdate> ).IsModified = true;
...
ctx.SaveChanges();
If you do this, EF will only include the columns you've marked as modified in the UPDATE statement.
While I was developing a startscreen for my app using the GridView control, I run into a problem. I have a GridView on my main screen which has a CollectionViewSource set as ItemSource.
For this CollectionViewSource the source is set to an ObservableCollection list. Each GroupViewModel has a ObservableCollection in it. In code the important parts looks like the following:
public class StartPageViewModel : ViewModelBase
{
public ObservableCollection<GroupViewModel> Groups { get; set; }
public CollectionViewSource GroupsCvs { get; set; }
public StartPageViewModel()
{
// fill Groups with some mock data
GroupsCvs.Source = Groups;
GroupsCvs.IsSourceGrouped = true;
}
public void MoveItems(GroupViewModel grp)
{
// add a dummy item
grp.AddRecipe(new ItemViewModel(new Item()) { Id = "123" });
RaisePropertyChanged("GroupsCvs");
RaisePropertyChanged("Groups");
}
}
public class GroupViewModel : ViewModelBase, IEnumerable<ItemViewModel>
{
public ObservableCollection<ItemViewModel> Items { get; set; }
}
View:
public sealed partial class MainPage : LayoutAwarePage
{
private ViewModelLocator locator = new ViewModelLocator();
public MainPage()
{
this.InitializeComponent();
this.DataContext = locator.Main; // returns StartPageViewModel
}
}
XAML part for MainPage, GridView
<GridView ItemsSource="{Binding GroupsCvs.View}" ...
</GridView>
How is it possible to get the UI refreshed when I add an Item to a Group's collection? In my StartPageViewModel I'm adding dummy item to the GroupViewModel and I raise propertychanged, but the Grid remains the same.
I've also tried to fire property changed event in the GroupViewModel class, when the Items collection changes without any luck.
Edit: As I wrote in comments it's possible to refresh with reassigning the source property however this gets the GridView rendered again which is not nice. I'm looking to options which would result in a nicer user experience.
I suppose CollectionViewSource doesn't react to PropertyChanged event. Try reassigning Source to GroupCvs after you modify it. It's not elegant but it should work:
GroupsCvs.Source = Groups;
As a last resort you could create a new instance of ObservableCollection<GroupViewModel> before reassigning it:
Groups = new ObservableCollection<GroupViewModel>(Groups)
GroupsCvs.Source = Groups;
<GridView ItemsSource="{Binding GroupsCvs.View, **BindingMode=TwoWay**}" ...
</GridView>
How can I get DesignTime data in WinRT XAML so the designer shows sample data?
Simple enough.
Create a Model like this:
public class Fruit
{
public string Name { get; set; }
}
Create a base ViewModel like this:
public class BaseViewModel
{
public ObservableCollection<Fruit> Fruits { get; set; }
}
Create a real ViewModel like this:
public class RealViewModel : BaseViewModel
{
public RealViewModel()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
LoadData();
}
public void LoadData()
{
// TODO: load from service
}
}
Create a fake-data ViewModel like this:
public class FakeViewModel : BaseViewModel
{
public FakeViewModel()
{
this.Fruits = new ObservableCollection<Fruit>
{
new Fruit{ Name = "Blueberry"},
new Fruit{ Name = "Apple"},
new Fruit{ Name = "Banana"},
new Fruit{ Name = "Orange"},
new Fruit{ Name = "Strawberry"},
new Fruit{ Name = "Mango"},
new Fruit{ Name = "Kiwi"},
new Fruit{ Name = "Rasberry"},
new Fruit{ Name = "Blueberry"},
};
}
}
Do this in your XAML:
<Page.DataContext>
<local:RealViewModel />
</Page.DataContext>
<d:Page.DataContext>
<local:FakeViewModel />
</d:Page.DataContext>
Have fun!
PS: you can also attempt to use d:DesignData.
That approach also works. I feel it is not as straight forward.
In the end, it's up to you how to do it.
Either way, don't miss out on DeisgnTime data!
Here is the d:DesignInstance sample:
I will also use Jerry's Fruit class, but I won't use MVVM here as you don't need that to make it works.
Basically, we need to create the data model class (e.g., ViewModel or Model) that we want to have design data (e.g., in this case, I create a child class, but you don't need to).
public class Fruit
{
public string Name { get; set; }
}
public class SampleFruit : Fruit
{
public SampleFruit()
{
Name = "Orange (Sample)";
}
}
Then in our XAML, we can use d:DataContext to bind the child class.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding}"
d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}">
<TextBlock Text="{Binding Name}"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="42"/>
</Grid>
Please note this line:
d:DataContext="{Binding Source={d:DesignInstance Type=local:SampleFruit, IsDesignTimeCreatable=True}}"
Now you should see your design time data on both Visual Studio Designer and Blend.
P.S. In Blend 2013, there is a data tab that let you create sample data as well.