Skip to content

945055: Local time and autocomplete in foreign key column #4107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 2, 2025
Merged

945055: Local time and autocomplete in foreign key column #4107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b02763f
945055: Local time and autocomplete in foreign key column
NithyaSivaprakasam Apr 2, 2025
7c4fd9a
945055: correction
NithyaSivaprakasam Apr 2, 2025
b56ee84
Update foreign-key-column.md
NithyaSivaprakasam Apr 2, 2025
5bce4d5
945055: image correction
NithyaSivaprakasam Apr 2, 2025
dc14296
Merge branch '945055-local-time-latest' of https://github.com/syncfus…
NithyaSivaprakasam Apr 2, 2025
2751da8
945055: correction
NithyaSivaprakasam Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/localtime.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
public IActionResult Index()
{
// Timezone List for Dropdown.
List<TimeZoneData> timeZones = new List<TimeZoneData>
{
new TimeZoneData { Value = -12, Text = "-12:00 UTC" },
new TimeZoneData { Value = -11, Text = "-11:00 UTC" },
new TimeZoneData { Value = -10, Text = "-10:00 UTC" },
new TimeZoneData { Value = -9, Text = "-09:00 UTC" },
new TimeZoneData { Value = -8, Text = "-08:00 UTC" },
new TimeZoneData { Value = -7, Text = "-07:00 UTC" },
new TimeZoneData { Value = -6, Text = "-06:00 UTC" },
new TimeZoneData { Value = -5, Text = "-05:00 UTC" },
new TimeZoneData { Value = -4, Text = "-04:00 UTC" },
new TimeZoneData { Value = -3, Text = "-03:00 UTC" },
new TimeZoneData { Value = -2, Text = "-02:00 UTC" },
new TimeZoneData { Value = -1, Text = "-01:00 UTC" },
new TimeZoneData { Value = 0, Text = "+00:00 UTC" },
new TimeZoneData { Value = 1, Text = "+01:00 UTC" },
new TimeZoneData { Value = 2, Text = "+02:00 UTC" },
new TimeZoneData { Value = 3, Text = "+03:00 UTC" },
new TimeZoneData { Value = 4, Text = "+04:00 UTC" },
new TimeZoneData { Value = 5, Text = "+05:00 UTC" },
new TimeZoneData { Value = 5.5, Text = "+05:30 UTC" },
new TimeZoneData { Value = 6, Text = "+06:00 UTC" },
new TimeZoneData { Value = 7, Text = "+07:00 UTC" },
new TimeZoneData { Value = 8, Text = "+08:00 UTC" },
new TimeZoneData { Value = 9, Text = "+09:00 UTC" },
new TimeZoneData { Value = 10, Text = "+10:00 UTC" },
new TimeZoneData { Value = 11, Text = "+11:00 UTC" },
new TimeZoneData { Value = 12, Text = "+12:00 UTC" },
new TimeZoneData { Value = 13, Text = "+13:00 UTC" },
new TimeZoneData { Value = 14, Text = "+14:00 UTC" }
};

ViewBag.TimeZones = timeZones;
return View();
}


58 changes: 58 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
@{
ViewBag.Title = "Syncfusion Grid with Timezone Selection";
}

@using Syncfusion.EJ2

<div style="display: flex; align-items: center; margin-bottom: 10px;" >
<label style="margin-right: 10px">Select Timezone:</label>
@Html.EJS().DropDownList("timezone").DataSource((IEnumerable < object >)ViewBag.TimeZones).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Value", Text = "Text" }).Index(0).Width("200px").Change("onTimezoneChange").Render()
</div >
<div style="margin-bottom: 20px;">
@Html.EJS().CheckBox("timezoneCheckbox").Label("Prevent Timezone Conversion").Change("onCheckboxChange").Render()
</div>
<div>
@*Replace xxxx with your actual port number.*@
@Html.EJS().Grid("Grid").DataSource(dm => dm.Url("https://localhost:****/api/orders").Adaptor("WebApiAdaptor")).AllowPaging().Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
col.Field("Freight").HeaderText("Freight").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("dd/MM/yyyy HH:mm").Add();
}).Load("load").Render()
</div>

<script>
var selectedTimezone = -12;
var checkbox;
var grid;
function load() {
checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
grid = document.getElementById("Grid")?.ej2_instances?.[0];
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
}
function onTimezoneChange(event) {
selectedTimezone = Number(event.value);
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
grid.setProperties({
dataSource: new ej.data.DataManager({
url: "https://localhost:****/api/orders", // Replace **** with your actual port number.
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
})
});
grid.refresh();
}

function onCheckboxChange(event) {
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
grid.setProperties({
dataSource: new ej.data.DataManager({
url: "https://localhost:****/api/orders", // Replace **** with your actual port number.
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
})
});
grid.refresh();
}
</script>
58 changes: 58 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/tagHelper
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
@page
@model IndexModel
@{
var timeZoneList = ViewBag.TimeZones;
}
<div style="display: flex; align-items: center; margin-bottom: 10px;">
<label style="margin-right: 10px">Select Timezone:</label>
<ejs-dropdownlist id="timezone" dataSource="@timeZoneList" fields="@(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "Text", Value = "Value" })" placeholder="Select a Timezone" popupHeight="220px" width="200px" change="onTimezoneChange"></ejs-dropdownlist>
</div>
<div style="margin-bottom: 20px;">
<ejs-checkbox type="checkbox" id="timezoneCheckbox" label="Prevent Timezone Conversion" onchange="onCheckboxChange"></ejs-checkbox>
</div>
<ejs-grid id="Grid" load="load" height="314" allowPaging="true">
@* Replace **** with your actual port number.*@
<e-data-manager url="https://localhost:****/api/Grid" adaptor="WebApiAdaptor"></e-data-manager>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="160"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format="dd/MM/yyyy HH:mm" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>

<script>
var selectedTimezone = -12;
var checkbox;
var grid;

function load() {
checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
grid = document.getElementById("Grid")?.ej2_instances?.[0];
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
}

function onTimezoneChange(event) {
selectedTimezone = Number(event.value);
updateTimezoneOffset();
}

function onCheckboxChange() {
if (!checkbox) {
checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
}
updateTimezoneOffset();
}

function updateTimezoneOffset() {
ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
grid.setProperties({
dataSource: new ej.data.DataManager({
url: "https://localhost:****/api/Grid", // Replace **** with your actual port number.
adaptor: new ej.data.WebApiAdaptor(),
crossDomain: true
})
});
grid.refresh();
}
</script>
Loading