1. Home
  2. Forum
  3. Blazor
  4. Grid Edit Documentation incomplete

Grid Edit Documentation incomplete

Hi, Im working with a grid and a .net core web api to retrieve data.

1. I want to be able to execute a method when someones adds a new record, modifies, or delete it, but there is no clear way to execute the method and recieve the values to add.

2. Also, is it possible to set datepickeredit to only display years?, I know how to do it on the EjsDatePicker, but I cant find the way to customize it on the grid.

    <EjsGrid id="Grid" DataSource="@vehicles"  AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
        <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings>
        <GridPageSettings PageSizes="true"></GridPageSettings>
        <GridColumns>
            <GridColumn Field="@nameof(VehicleIJ.VehicleShortName)" HeaderText="Short Name"></GridColumn>
            <GridColumn Field="@nameof(VehicleIJ.VehicleYear)" EditType="datepickeredit" Format="y" HeaderText="Year"></GridColumn>
        </GridColumns>
    </EjsGrid>



1 Reply
RN Rahul Narayanasamy Syncfusion Team August 7, 2019 12:38 PM UTC

Hi Raul, 
 
Greetings from Syncfusion. 
 
Query: I want to be able to execute a method when someones adds a new record, modifies, or delete it, but there is no clear way to execute the method and recieve the values to add. 
 
Based on your requirement, we have prepared a sample in WebApiAdaptor. You can get the added, edited and deleted record details in Post, Put and Delete methods at the DefaultController. Please find the below code example and sample for your reference. 
 
[code example] 
[index.razor] 
... 
 
<EjsGrid @ref="@grid" TValue="Order" AllowPaging="true" AllowSorting="true" AllowGrouping="true" AllowFiltering="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel"})"> 
    <GridPageSettings PageSize="4"></GridPageSettings> 
    <EjsDataManager Url="/api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Right" Width="90"></GridColumn> 
        ... 
   </GridColumns> 
</EjsGrid> 
 
 
@code{ 
 
    EjsGrid<Order> grid; 
 
    ... 
 
} 
[DefaultController] 
[HttpPost] 
        public object Post([FromBody]Orders Order) 
        { 
 
            /// code for Insert operation    
        } 
 
        //// PUT: api/Default/5 
        [HttpPut] 
        public object Put([FromBody]Orders Order) 
        { 
            /// code for Update operation 
        } 
 
 
        //// DELETE: api/ApiWithActions/5 
        [HttpDelete("{id}")] 
        public void Delete(int id) 
        { 
            /// code for delete operation 
 
        } 
 
[screenshot][edited values] 
 
 
Or if you want to access edited values before sending the date to controller, then you can use OnActionBegin or OnActionComplete events to achieve your requirement. Please find the below documentation link for your reference. 
 
 
Query: Also, is it possible to set datepickeredit to only display years?, I know how to do it on the EjsDatePicker, but I cant find the way to customize it on the grid. 
 
Yes, you can achieve your requirement(display Year values in DatePicker while editing) by using editparams property of the Grid and (Start and Depth properties) properties of DatePicker. Please find the below code example and sample for your reference. 
 
[code example] 
... 
@using Syncfusion.EJ2.Blazor.Calendars 
 
<EjsGrid @ref="@grid" TValue="Order" AllowPaging="true" AllowSorting="true" AllowGrouping="true" AllowFiltering="true" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel"})"> 
    ... 
   <GridColumns> 
        ... 
       <GridColumn Field="OrderDate" HeaderText=" Order Date" EditType="datepickeredit" Edit="@(new { @params = new Syncfusion.EJ2.Blazor.Calendars.EjsDatePicker() { Start = CalendarView.Decade, Depth = CalendarView.Decade } })" Format="y" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
    </GridColumns> 
</EjsGrid> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


Loader.
Up arrow icon