Skip to content

Commit 9532f5b

Browse files
BalajiSGridBalajiSGrid
authored
Merge pull request #34 from SyncfusionExamples/999589-EmpMgmt
999589: Fixing in Employee management sample
2 parents 05e77db + 4c106d7 commit 9532f5b

File tree

4 files changed

+185
-19
lines changed

4 files changed

+185
-19
lines changed

‎Employee_Managment_App/src/components/EmployeeLeave.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
.drp-left-icon.e-daterangepicker .e-range-icon::before {
2+
color: #0078d4; /* Blue for icon */
3+
}
4+
.drp-left-icon.e-daterangepicker input.e-input {
5+
color: #666; /* Gray text */
6+
border-radius: 4px; /* Subtle rounding */
7+
}
8+
.drp-left-icon.e-daterangepicker .e-input-group {
9+
border: 1px solid #ccc;
10+
background: #f9f9f9;
11+
}
12+
13+
/* Outer wrapper to position custom icons */
14+
.drp-input-wrapper {
15+
position: relative;
16+
display: inline-block;
17+
}
18+
19+
/* Use the Syncfusion-generated wrapper element as our visible control.
20+
We tweak its border to match the target screenshot. */
21+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
22+
border: 1px solid #ccc;
23+
border-radius: 4px; /* squared, not pill */
24+
box-shadow: none;
25+
}
26+
27+
/* Keep the built-in range icon hidden (we use our overlay icons instead). */
28+
.custom-syncfusion-drp .e-input-group-icon.e-range-icon {
29+
display: none !important; /* built-in icon suppressed */
30+
}
31+
/* Make sure the input has enough padding for our custom icons. */
32+
.custom-syncfusion-drp .e-date-range-wrapper .e-input {
33+
/* give more room on the left so text doesn't sit under the calendar icon */
34+
padding: 0 34px 0 52px; /* top/right/bottom/left */
35+
cursor: pointer; /* matches expectation: click to open */
36+
}
37+
38+
/* Common styles for our overlay buttons */
39+
.drp-icon-left,
40+
.drp-caret-right {
41+
position: absolute;
42+
top: 50%;
43+
transform: translateY(-50%);
44+
height: 36px;
45+
width: 36px; /* clickable area */
46+
border: 0;
47+
background: transparent;
48+
color: #333;
49+
cursor: pointer;
50+
outline: none;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
z-index: 2; /* above the input text */
55+
}
56+
57+
/* Place icons slightly inset from edges so they don't touch the border */
58+
.drp-icon-left { left: 8px; }
59+
.drp-caret-right { right: 6px; }
60+
61+
.calendar-svg, .caret-svg {
62+
width: 14px;
63+
height: 14px;
64+
}
65+
66+
/* Optional hover feedback (subtle) */
67+
.drp-icon-left:hover,
68+
.drp-caret-right:hover {
69+
color: #000;
70+
}
71+
72+
/* size and align Syncfusion icon font elements inside the overlay buttons */
73+
.drp-icon-left .e-icons,
74+
.drp-caret-right .e-icons,
75+
.calendar-i,
76+
.caret-i {
77+
font-family: "e-icons" !important;
78+
font-size: 14px;
79+
line-height: 1;
80+
display: inline-block;
81+
vertical-align: middle;
82+
color: inherit;
83+
}
84+
85+
/* ensure icon button sits above the input text */
86+
.drp-icon-left,
87+
.drp-caret-right {
88+
z-index: 3;
89+
}
90+
91+
/* Compact size tweaks to better match the target screenshot */
92+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
93+
height: 36px;
94+
padding: 6px 8px;
95+
background: #fff;
96+
}
97+
98+
99+
.custom-syncfusion-drp .e-date-range-wrapper .e-input,
100+
.e-control .e-daterangepicker.e-input{
101+
font-size: 13px;
102+
/* make the input fill the control height and vertically center the single-line text */
103+
height: 100%;
104+
box-sizing: border-box;
105+
/* room for left calendar icon (52px) and right caret (34px) */
106+
padding: 0 34px 0 52px;
107+
line-height: 36px; /* match control height (36px) to vertically center text */
108+
caret-color: #333;
109+
z-index: 1;
110+
position: relative;
111+
white-space: nowrap;
112+
overflow: hidden;
113+
text-overflow: ellipsis;
114+
display: block;
115+
text-align: center !important;
116+
}
117+
118+
/* slightly darker border on focus */
119+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper:focus-within {
120+
border-color: #b3d4fc;
121+
box-shadow: none;
122+
}
123+
124+
/* (icon height handled above) */

‎Employee_Managment_App/src/components/EmployeeLeave.tsx‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Inject,
1616
RowInfo
1717
} from '@syncfusion/ej2-react-grids';
18+
import './EmployeeLeave.css';
1819
import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';
1920
import { DataManager, Query, UrlAdaptor, Predicate } from '@syncfusion/ej2-data';
2021
import {
@@ -53,21 +54,51 @@ const Presets = (props: { dateRangeChange: (args: RangeEventArgs) => void }) =>
5354
const lastSixEnd: Date = new Date(
5455
new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString()
5556
);
57+
const dateRangePickerRef = React.useRef<DateRangePickerComponent>(null);
5658

5759
return (
58-
<DateRangePickerComponent
59-
placeholder="Select a range"
60-
value={[yearStart, yearEnd]}
61-
change={props.dateRangeChange}
62-
width={190}
63-
>
64-
<PresetsDirective>
65-
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
66-
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
67-
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
68-
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
69-
</PresetsDirective>
70-
</DateRangePickerComponent>
60+
<div className="drp-input-wrapper">
61+
{/* left calendar icon (overlay) - opens the picker */}
62+
<button
63+
type="button"
64+
className="drp-icon-left"
65+
aria-hidden
66+
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
67+
>
68+
{/* Syncfusion icon (e-icons) for calendar */}
69+
<span className="e-input-group-icon e-range-icon e-icons" aria-hidden="true"></span>
70+
</button>
71+
72+
<DateRangePickerComponent
73+
ref={dateRangePickerRef}
74+
placeholder="Select a range"
75+
value={[yearStart, yearEnd]}
76+
format={'MMM d, yyyy'}
77+
change={props.dateRangeChange}
78+
width={240}
79+
cssClass="custom-syncfusion-drp drp-left-icon"
80+
showClearButton={false}
81+
>
82+
<PresetsDirective>
83+
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
84+
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
85+
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
86+
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
87+
</PresetsDirective>
88+
</DateRangePickerComponent>
89+
90+
91+
92+
{/* right caret icon (overlay) - also opens the picker */}
93+
<button
94+
type="button"
95+
className="drp-caret-right"
96+
aria-hidden
97+
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
98+
>
99+
<span className="e-icons e-chevron-down caret-i" aria-hidden="true"></span>
100+
</button>
101+
</div>
71102
);
72103
};
73104

@@ -247,8 +278,8 @@ const EmployeeLeave = (props: { employeeData: EmployeeDetails; userInfo: Employe
247278
actionComplete={actionComplete}
248279
>
249280
<ColumnsDirective>
250-
<ColumnDirective field="EmployeeCode" headerText="Code" visible={false} width="120" />
251-
<ColumnDirective field="AttendanceID" headerText="Task ID" isPrimaryKey={true} width="140" />
281+
<ColumnDirective field="EmployeeCode" headerText="ID" visible={false} width="120" />
282+
<ColumnDirective field="AttendanceID" headerText="Leave ID" isPrimaryKey={true} width="140" />
252283
<ColumnDirective field="AbsenceType" headerText="Leave Type" width="120" />
253284
<ColumnDirective field="ShiftName" headerText="Shift Name" width="120" />
254285
<ColumnDirective field="From" type="date" format="d MMM yyyy" textAlign="Right" width="120" />

‎Employee_Managment_App/src/components/Employees.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ const Employees = (props?: EmployeesProps) => {
3232
const employeeGridIns = useRef<GridComponent>(null);
3333
const tooltipObj = useRef<TooltipComponent>(null);
3434

35+
// Use Syncfusion Grid API to auto-fit column widths and keep height auto-sized
36+
const onGridDataBound = React.useCallback(() => {
37+
const grid: any = employeeGridIns.current;
38+
if (!grid) return;
39+
// Ensure grid height is set to auto so it adapts to content (Syncfusion supports 'auto')
40+
if (grid.element) {
41+
grid.height = 'auto';
42+
}
43+
}, []);
44+
3545
// Apply/clear remote filters on pill changes or routed context
3646
useEffect(() => {
3747
const grid = employeeGridIns.current;
@@ -177,6 +187,7 @@ const Employees = (props?: EmployeesProps) => {
177187
allowFiltering={true}
178188
filterSettings={{ type: 'Excel', enableInfiniteScrolling: true }}
179189
recordClick={recordClick}
190+
dataBound={onGridDataBound}
180191
>
181192
<ColumnsDirective>
182193
<ColumnDirective
@@ -192,7 +203,7 @@ const Employees = (props?: EmployeesProps) => {
192203
/>
193204
<ColumnDirective
194205
field="EmployeeCode"
195-
headerText="Code"
206+
headerText="ID"
196207
template={codeTemplate}
197208
customAttributes={{ class: 'infotooltip' }}
198209
width="120"
@@ -205,7 +216,7 @@ const Employees = (props?: EmployeesProps) => {
205216
headerText="Date Joined"
206217
textAlign="Right"
207218
type="date"
208-
format={{ type: 'date', skeleton: 'medium' }}
219+
format={{ type: 'date', format: "d MMM yyyy"}}
209220
clipMode="EllipsisWithTooltip"
210221
width="150"
211222
/>

‎Employee_Managment_App/src/components/Policies.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@ const Policies: React.FC = () => {
161161
<ColumnsDirective>
162162
<ColumnDirective field="policyName" headerText="Policy Name" width="220" template={policyNameTemplate} />
163163
<ColumnDirective field="category" headerText="Category" width="170" template={categoryTemplate} />
164-
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" textAlign="Left" />
165-
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" textAlign="Left" />
164+
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
165+
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
166166
<ColumnDirective field="statusText" headerText="Status" width="130" template={statusTemplate} />
167167
<ColumnDirective headerText="Actions" width="110" commands={viewCommands} textAlign="Center" />
168168
</ColumnsDirective>

0 commit comments

Comments
 (0)