Skip to content

999589: Fixing in Employee management sample #34

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
BalajiSGrid merged 1 commit into from
Dec 19, 2025
Merged

999589: Fixing in Employee management sample #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
124 changes: 124 additions & 0 deletions Employee_Managment_App/src/components/EmployeeLeave.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
.drp-left-icon.e-daterangepicker .e-range-icon::before {
color: #0078d4; /* Blue for icon */
}
.drp-left-icon.e-daterangepicker input.e-input {
color: #666; /* Gray text */
border-radius: 4px; /* Subtle rounding */
}
.drp-left-icon.e-daterangepicker .e-input-group {
border: 1px solid #ccc;
background: #f9f9f9;
}

/* Outer wrapper to position custom icons */
.drp-input-wrapper {
position: relative;
display: inline-block;
}

/* Use the Syncfusion-generated wrapper element as our visible control.
We tweak its border to match the target screenshot. */
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
border: 1px solid #ccc;
border-radius: 4px; /* squared, not pill */
box-shadow: none;
}

/* Keep the built-in range icon hidden (we use our overlay icons instead). */
.custom-syncfusion-drp .e-input-group-icon.e-range-icon {
display: none !important; /* built-in icon suppressed */
}
/* Make sure the input has enough padding for our custom icons. */
.custom-syncfusion-drp .e-date-range-wrapper .e-input {
/* give more room on the left so text doesn't sit under the calendar icon */
padding: 0 34px 0 52px; /* top/right/bottom/left */
cursor: pointer; /* matches expectation: click to open */
}

/* Common styles for our overlay buttons */
.drp-icon-left,
.drp-caret-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 36px;
width: 36px; /* clickable area */
border: 0;
background: transparent;
color: #333;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 2; /* above the input text */
}

/* Place icons slightly inset from edges so they don't touch the border */
.drp-icon-left { left: 8px; }
.drp-caret-right { right: 6px; }

.calendar-svg, .caret-svg {
width: 14px;
height: 14px;
}

/* Optional hover feedback (subtle) */
.drp-icon-left:hover,
.drp-caret-right:hover {
color: #000;
}

/* size and align Syncfusion icon font elements inside the overlay buttons */
.drp-icon-left .e-icons,
.drp-caret-right .e-icons,
.calendar-i,
.caret-i {
font-family: "e-icons" !important;
font-size: 14px;
line-height: 1;
display: inline-block;
vertical-align: middle;
color: inherit;
}

/* ensure icon button sits above the input text */
.drp-icon-left,
.drp-caret-right {
z-index: 3;
}

/* Compact size tweaks to better match the target screenshot */
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
height: 36px;
padding: 6px 8px;
background: #fff;
}


.custom-syncfusion-drp .e-date-range-wrapper .e-input,
.e-control .e-daterangepicker.e-input{
font-size: 13px;
/* make the input fill the control height and vertically center the single-line text */
height: 100%;
box-sizing: border-box;
/* room for left calendar icon (52px) and right caret (34px) */
padding: 0 34px 0 52px;
line-height: 36px; /* match control height (36px) to vertically center text */
caret-color: #333;
z-index: 1;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
text-align: center !important;
}

/* slightly darker border on focus */
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper:focus-within {
border-color: #b3d4fc;
box-shadow: none;
}

/* (icon height handled above) */
61 changes: 46 additions & 15 deletions Employee_Managment_App/src/components/EmployeeLeave.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
Inject,
RowInfo
} from '@syncfusion/ej2-react-grids';
import './EmployeeLeave.css';
import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { DataManager, Query, UrlAdaptor, Predicate } from '@syncfusion/ej2-data';
import {
Expand Down Expand Up @@ -53,21 +54,51 @@ const Presets = (props: { dateRangeChange: (args: RangeEventArgs) => void }) =>
const lastSixEnd: Date = new Date(
new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString()
);
const dateRangePickerRef = React.useRef<DateRangePickerComponent>(null);

return (
<DateRangePickerComponent
placeholder="Select a range"
value={[yearStart, yearEnd]}
change={props.dateRangeChange}
width={190}
>
<PresetsDirective>
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
</PresetsDirective>
</DateRangePickerComponent>
<div className="drp-input-wrapper">
{/* left calendar icon (overlay) - opens the picker */}
<button
type="button"
className="drp-icon-left"
aria-hidden
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
>
{/* Syncfusion icon (e-icons) for calendar */}
<span className="e-input-group-icon e-range-icon e-icons" aria-hidden="true"></span>
</button>

<DateRangePickerComponent
ref={dateRangePickerRef}
placeholder="Select a range"
value={[yearStart, yearEnd]}
format={'MMM d, yyyy'}
change={props.dateRangeChange}
width={240}
cssClass="custom-syncfusion-drp drp-left-icon"
showClearButton={false}
>
<PresetsDirective>
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
</PresetsDirective>
</DateRangePickerComponent>



{/* right caret icon (overlay) - also opens the picker */}
<button
type="button"
className="drp-caret-right"
aria-hidden
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
>
<span className="e-icons e-chevron-down caret-i" aria-hidden="true"></span>
</button>
</div>
);
};

Expand Down Expand Up @@ -247,8 +278,8 @@ const EmployeeLeave = (props: { employeeData: EmployeeDetails; userInfo: Employe
actionComplete={actionComplete}
>
<ColumnsDirective>
<ColumnDirective field="EmployeeCode" headerText="Code" visible={false} width="120" />
<ColumnDirective field="AttendanceID" headerText="Task ID" isPrimaryKey={true} width="140" />
<ColumnDirective field="EmployeeCode" headerText="ID" visible={false} width="120" />
<ColumnDirective field="AttendanceID" headerText="Leave ID" isPrimaryKey={true} width="140" />
<ColumnDirective field="AbsenceType" headerText="Leave Type" width="120" />
<ColumnDirective field="ShiftName" headerText="Shift Name" width="120" />
<ColumnDirective field="From" type="date" format="d MMM yyyy" textAlign="Right" width="120" />
Expand Down
15 changes: 13 additions & 2 deletions Employee_Managment_App/src/components/Employees.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@ const Employees = (props?: EmployeesProps) => {
const employeeGridIns = useRef<GridComponent>(null);
const tooltipObj = useRef<TooltipComponent>(null);

// Use Syncfusion Grid API to auto-fit column widths and keep height auto-sized
const onGridDataBound = React.useCallback(() => {
const grid: any = employeeGridIns.current;
if (!grid) return;
// Ensure grid height is set to auto so it adapts to content (Syncfusion supports 'auto')
if (grid.element) {
grid.height = 'auto';
}
}, []);

// Apply/clear remote filters on pill changes or routed context
useEffect(() => {
debugger;
Expand Down Expand Up @@ -178,6 +188,7 @@ const Employees = (props?: EmployeesProps) => {
allowFiltering={true}
filterSettings={{ type: 'Excel', enableInfiniteScrolling: true }}
recordClick={recordClick}
dataBound={onGridDataBound}
>
<ColumnsDirective>
<ColumnDirective
Expand All @@ -193,7 +204,7 @@ const Employees = (props?: EmployeesProps) => {
/>
<ColumnDirective
field="EmployeeCode"
headerText="Code"
headerText="ID"
template={codeTemplate}
customAttributes={{ class: 'infotooltip' }}
width="120"
Expand All @@ -206,7 +217,7 @@ const Employees = (props?: EmployeesProps) => {
headerText="Date Joined"
textAlign="Right"
type="date"
format={{ type: 'date', skeleton: 'medium' }}
format={{ type: 'date', format: "d MMM yyyy"}}
clipMode="EllipsisWithTooltip"
width="150"
/>
Expand Down
4 changes: 2 additions & 2 deletions Employee_Managment_App/src/components/Policies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@ const Policies: React.FC = () => {
<ColumnsDirective>
<ColumnDirective field="policyName" headerText="Policy Name" width="220" template={policyNameTemplate} />
<ColumnDirective field="category" headerText="Category" width="170" template={categoryTemplate} />
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" textAlign="Left" />
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" textAlign="Left" />
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
<ColumnDirective field="statusText" headerText="Status" width="130" template={statusTemplate} />
<ColumnDirective headerText="Actions" width="110" commands={viewCommands} textAlign="Center" />
</ColumnsDirective>
Expand Down