How to hande casading dropdons with odata v4 wep api

Question

Hello Team,I am using Syncfusion.Blazor 19.1.0.57.I have two problems one of which may be a bug.1- I try to use SfDatePicker in a GridColumn/Template for a date field, when ever its value is changed and tried to save it sends null object to web api post or update methods.If no change is made in Date field then it saves without problem.This can be a bug, can you please check if it works on 19.1.0.57 version for odata/web api crud?2- I cannot make cascading dropdowns work for odata/web api and could not find an example for odata/web api cascading dropdowns fro blazor.My razor component is like as follows: ... @{ Dealer dealer = context as Dealer; DealerSetupLocation CurrentDealerSetupLocation = null; string DistrictsUrl = null; bool districtsIsEnabled = false; } { CurrentDealerSetupLocation = args.Data; if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add)) { CurrentDealerSetupLocation.DealerId = dealer.CompanyId; } DistrictsUrl = $"odata/Districts?$filter=ProvinceId eq {CurrentDealerSetupLocation?.ProvinceId}"; districtsIsEnabled = true; }) OnActionBegin=@((args) => { if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) { districtsIsEnabled = false; } }) /> { CurrentDealerSetupLocation.District = null; DistrictsUrl = $"odata/Districts?$filter=ProvinceId eq {args.Value};"; districtsIsEnabled = true; DSLGrid.PreventRender(false); }) /> @code{ protected SfGrid Grid { get; set; } protected SfGrid DSLGrid { get; set; }}Example Models: public partial class Dealer { public Guid CompanyId { get; set; } public virtual ICollection DealerSetupLocations { get; set; } } public partial class DealerSetupLocation { public Guid Id { get; set; } public Guid DealerId { get; set; } public int ProvinceId { get; set; } public int? DistrictId { get; set; } public virtual Dealer Dealer { get; set; } public virtual District District { get; set; } public virtual Province Province { get; set; } } public partial class Province { public int Id { get; set; } public string Name { get; set; } public virtual ICollection DealerSetupLocations { get; set; } public virtual ICollection Districts { get; set; } } public partial class District { public int Id { get; set; } public int ProvinceId { get; set; } public string Name { get; set; } public virtual Province Province { get; set; } public virtual ICollection DealerSetupLocations { get; set; } public virtual ICollection SubDistricts { get; set; } }In above razor file DSLGrid.PreventRender(false);causes null reference exception and if i conet it then the second dropdown does not change Url.Can you please direct me to an odata/web api cascading dropdown example if any? I could not find any.Thanks.

Renjith Singh Rajendran · Accepted Answer

Hi Ali, Greetings from Syncfusion support. Query 1 : I try to use SfDatePicker in a GridColumn/Template for a date field, when ever its value is changed and tried to save it sends null object We suggest you to ensure to provide proper ID value for the SfDatePicker component inside EditTemplate of Grid. The ID property value should be similar to the Field value. And also ensure your codes based on the below documentation reference. Reference : https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template ... If you are still facing difficulties, kindly share with us the complete code example of using SfDatePicker in Grid. Query 2 : I cannot make cascading dropdowns work for odata/web api and could not find an example for odata/web api cascading dropdowns fro blazor. We suggest you to modify the codes based on the below suggestions to overcome the reported problem. We have also prepared a sample based on your requirement, please download the sample from the link below, Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridTestApp613682778 Please find the list of modifications(total 3 points) suggested from our side. Place the defining codes under @code section instead of using it inside DetailTemplate. Please refer and modify based on the below highlighted codes. ... @{ Dealer dealer = context as Dealer; //Place the codes which you have used here under code section } ... @code{ protected SfGrid Grid { get; set; } //Codes which you have used inside DetailTemplate DealerSetupLocation CurrentDealerSetupLocation = null; string DistrictsUrl = null; bool districtsIsEnabled = false; ... } Provide corresponding ref values for the Grid’s generated inside DetailTemplate. Use the below codes to define the @ref for Grid inside DetailTemplate. We have used DetailDataBound event of parent grid to generate a unique valued @ref for the corresponding grids generated using DetailTemplate. @{ Dealer dealer = context as Dealer; //Place the codes which you have used here under code section } ... ... { CurrentDealerSetupLocation.District = null; ... //Use the unique ref generated for the corresponding Grid generated using DetailTemplate myComponents[dealer.Id.ToString()].PreventRender(false); }) /> @code{ ... public string id { get; set; } //for storing Detail Grid reference dynamically private Dictionary> myComponents = new Dictionary>(); public void DetailDataBoundHandler(DetailDataBoundEventArgs args) { id = args.Data.Id.ToString(); //set detail Grid id for ref when opening detail Grid }} Use the Query property of SfDropDown to update the DataSource of second Dropdown instead of modifying the Url property of SfDataManager. Please refer the codes below, ... { CurrentDealerSetupLocation.District = null; districtsIsEnabled = true; //DistrictsUrl = $"odata/Districts?$count=true&$filter=(Id eq {args.Value})"; DistrictsQuery = new Query().Where("Id", "equal", args.Value); myComponents[dealer.Id.ToString()].PreventRender(false); }) /> @code{ Query DistrictsQuery = new Query(); ...} Please get back to us if you need further assistance. Regards, Renjith R

ali arslan · Answer

Hello Renjith,Thank you very much for your detailed answer and code sample for casdading dropdownlist. It works fine. Before making any selection for Province, DistrictsQuery was null so it was listing all Districts without Province filter, to update DistrictsQuery before edit dialog is opened for DealerSetupLocation i made following change: { CurrentDealerSetupLocation = args.Data; if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add)) { CurrentDealerSetupLocation.DealerId = dealer.CompanyId; } // update district query to filter districts for current province DistrictsQuery = new Query().Where("ProvinceId", "equal", CurrentDealerSetupLocation?.ProvinceId); })It may be helpful for others having difficulty.For SfDatePicker, still have problem. To see where the problem is i made a project and tested DateTime with a custom model and it was working fine, then added added and sql server table with exact same fields this time it wasnt working. I am attaching project,Here [Table("Person")] public partial class Person { [Key] public Guid Id { get; set; } [Required] [StringLength(50)] public string Name { get; set; } [Column(TypeName = "date")] public DateTime? BirthDate { get; set; } }in Shared.Models folder is a database model,and public partial class PersonModel { [Key] public Guid Id { get; set; } public string Name { get; set; } public DateTime? BirthDate { get; set; } }is a custom model.Added conreollers for both, PeopleController (for db model), PersonModelsController (for custom nodel)If you can make an SQL Server database with name TestDb and add table named Person with above fields and some records in table you can see grids for both controllers on Index.razor.ConnectionString is in appsettings.json, you may need to change it for your database.If you make changes in BirthDate field abd save you will see that it works for PersonModel but not for Person.I don't know where the problem is. I hope you can have time to have look at it.Regards.Ali A.

ali arslan · Answer

Sorry, forgot to add projectAttached: ODataV4AdapterWithDateTimeRegardsAttachment: ODataV4AdapterWithDateTime_48978daf.zip

ali arslan · Answer

Hello,The proplem is with annotation  [Column(TypeName = "date")]    [Table("Person")]    public partial class Person    {        [Key]        public Guid Id { get; set; }        [Required]        [StringLength(50)]        public string Name { get; set; }        //[Column(TypeName = "date")]        public DateTime? BirthDate { get; set; }    }if it is commented out then it works.Regards.

Renjith Singh Rajendran · Answer

Hi Ali, 

We are able to reproduce the reported problem from our side. As we are not certain about, whether the reported problem is related to Grid or OData side, we are currently validating this scenario to find the root cause.  

We will update you further details in two business days. Until then we appreciate your patience. 

Regards, 
Renjith R

Renjith Singh Rajendran · Answer

Hi Ali, 

We have considered it as a usability improvement and logged a task “Date format serialization support in posted data”. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. We will implement this feature in any of our upcoming releases. 
  
You can also communicate with us regarding the open features any time using our Feature Report page.     
https://www.syncfusion.com/feedback/25055/date-format-serialization-support-in-posted-data 

Regards, 
Renjith R