We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Edit Documentation incomplete

Thread ID:

Created:

Updated:

Platform:

Replies:

146520 Aug 7,2019 01:19 AM UTC Aug 7,2019 12:38 PM UTC Blazor 1
loading
Tags: Grid
Raul
Asked On August 7, 2019 01:19 AM UTC

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>



Rahul Narayanasamy [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon