1. Home
  2. Forum
  3. Blazor
  4. Need to use localization in inline grid editing

Need to use localization in inline grid editing

I am using the french localization and there is comma instead of dot for decimal values. I have used localization to display the values in french but at the time of inline editing i am not able to enter the comma for decimal value. Also in inline editing of the grid i am not able to edit the time value. 

I need to map the values in the view model only not the database store. Here is my code.


<SfGrid @ref="EmployeeGrid" DataSource="@_employeeViewModels" GridLines="GridLine.Both" AllowResizing="true" AllowSelection="false" Locale="fr">

           <GridEditSettings AllowEditing="true"></GridEditSettings>

            <GridColumns>

                <GridColumn Field=@nameof(EmployeeViewModel.Reference) Width="350" HeaderText="Collaborateur" IsPrimaryKey="true">

                    <Template>

                        @{

                            EmployeeViewModel employee = (context as EmployeeViewModel);

                            <div @onclick:stopPropagation="true">

                                <a rel='nofollow' href="#" @onclick="@(() => EditEmployee(employee.Reference))" @onclick:preventDefault>@employee.Reference</a>

                            </div>

                        }

                    </Template>

                </GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.PreferenceZoneProductivity) TextAlign="TextAlign.Center" Width="180" HeaderText="Prod zone préférence" AllowEditing="true" EditType="EditType.NumericEdit"></GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.AllowedZoneProductivity) TextAlign="TextAlign.Center" Width="180" HeaderText="Prod zone autorisée" AllowEditing="true" EditType="EditType.NumericEdit"></GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.StartTime) Width="150" HeaderText="Heure de début" AllowEditing="true" ></GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.EndTime) Width="150" HeaderText="Heure de fin" AllowEditing="true" ></GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.ZonePreferences) Width="150" HeaderText="Zones de préférence" AllowEditing="false"></GridColumn>

                <GridColumn Field=@nameof(EmployeeViewModel.ZoneAllowed) Width="150" HeaderText="Zones autorisées" AllowEditing="false"></GridColumn>

                <GridColumn Width="50px" HeaderText="">

                    <Template>

                        @{

                            EmployeeViewModel employee = (context as EmployeeViewModel);

                            <div @onclick:stopPropagation="true">

                                <a rel='nofollow' href="#" @onclick="@(() => DeleteEmployee(employee.Reference))" @onclick:preventDefault>

                                    <span class="oi oi-trash"></span>

                                </a>

                            </div>

                        }

                    </Template>

                </GridColumn>

            </GridColumns>

        </SfGrid>



View Model

public class EmployeeViewModel

    {

        public int Order { get; set; }

        public string Reference { get; set; }

        public string ZonePreferences { get; set; }

        public string ZoneAllowed { get; set; }

        public Time StartTime { get; set; }

        public Time EndTime { get; set; }

        public double PreferenceZoneProductivity { get; set; } = 1;

        public double AllowedZoneProductivity { get; set; } = 1;

        public string Color { get; set; }

}


5 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team February 4, 2021 01:03 PM UTC

Hi Rekhanshi, 

Greetings from Syncfusion support. 

Please find the details below. 

Query 1: At the time of inline editing i am not able to enter the comma for decimal value 
 
We have validated your query by using the below localization sample but unfortunately we are unable to reproduce the reported problem. Please find the video demonstration showing that we are able to type comma while editing. 



Kindly provide us the following details to proceed further. 

  1. Share us the Syncfusion NuGet version details.
  2. Kindly provide us the issue reproducing sample or reproduce the issue in the provide sample.

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Query 2:  i am not able to edit the time value.  
 
To achieve your requirement we suggest you to use the Edit template feature of the grid. Please refer the below code snippet and the sample for your reference. 

        <GridColumn Field=@nameof(EmployeeViewModel.StartTime) Width="150" Format="hh:mm tt" HeaderText="Heure de début" AllowEditing="true"> 
            <EditTemplate> 
                <SfTimePicker ID="StartTime" TValue="DateTime?" @bind-Value="@((context as EmployeeViewModel).StartTime)"></SfTimePicker> 
            </EditTemplate> 
        </GridColumn> 

Documentation: 



Regards, 
Jeevakanth SP. 


Marked as answer
RE Rekhanshi February 4, 2021 02:01 PM UTC

Thanks for replying Jeevakanth Palaniappan

  1. Share us the Syncfusion NuGet version details.18.4.0.31
Post upgrading the version to latest it worked for me thanks

JP Jeevakanth Palaniappan Syncfusion Team February 5, 2021 04:47 AM UTC

Hi Rekhanshi, 

We are glad that your issue has been resolved in the latest version. Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


RE Rekhanshi February 16, 2021 02:43 PM UTC

Hi Jeevakanth ,

When I added timepicker in the grid with edit template , its not binding my custom class to it, as you have also used the DateTime? , but I am having a custom class Time 
here is my class

public class Time
    {
        /// <summary>
        /// Time from where we consider as the previous day
        /// </summary>
        private readonly TimeSpan PivotTime = TimeSpan.FromHours(18);

        private TimeSpan _time;

        public Time()
        {

        }

        public Time(string time)
        {
            _time = Parse(time);
        }

        public Time(TimeSpan timespan)
        {
            _time = timespan;
        }

        public Time(DateTime date)
        {
            _time = new TimeSpan(date.Hour, date.Minute, date.Second);
        }

        public override string ToString()
        {
            var time = (time.TotalSeconds < 0 ? TimeSpan.FromDays(1) : TimeSpan.FromDays(0)) + time;

            return ((int)time.TotalHours).ToString("00") + ":" + time.ToString("mm\\:ss");
        }

        public TimeSpan ToTimeSpan()
        {
            return _time;
        }

        public string ToShortString()
        {
            return ((int)_time.TotalHours).ToString("00") + ":" + _time.ToString("mm");
        }

        private static TimeSpan Parse(string time)
        {
            return TimeSpan.Parse(time);
        }

        public static implicit operator Time(string time)
        {
            return new Time(time);
        }

        public static implicit operator Time(TimeSpan time)
        {
            return new Time(time);
        }

        // TODO : implement a custom json serializer
        // This property is used only for serialization
        public string Value
        {
            get
            {
                return _time.ToString();
            }
            set
            {
                _time = Parse(value);
                if (_time >= PivotTime)
                {
                    _time -= TimeSpan.FromDays(1);
                }
            }
        }
    }

could you please suggest how to use the custom class in the timepicker

JP Jeevakanth Palaniappan Syncfusion Team February 19, 2021 12:47 PM UTC

Hi Rekhansi, 

We have checked your code. But to proceed further we suggest you to share us the full code on how you are using this custom class in the time picker. If possible kindly share us the issue reproducing sample or reproduce the issue in sample which we have provide previously. 

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible.  
 
Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon