Skip to content

Commit

Permalink
Adding changes from build igniteui-xplat-examples-output+PRs_2023.10.…
Browse files Browse the repository at this point in the history
…30.3 (#392)

Co-authored-by: tfsbuild <tfsbuild@infragistics.com>
  • Loading branch information
azure-pipelines[bot] and tfsbuild authored Nov 13, 2023
1 parent ad6bc26 commit 71b596d
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 78 deletions.
3 changes: 2 additions & 1 deletion samples/grids/grid/action-strip/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,8 @@ export default class Sample extends React.Component<any, any> {
</IgrGridPinningActions>
<IgrGridEditingActions
editRow="true"
deleteRow="false">
deleteRow="true"
addRow="true">
</IgrGridEditingActions>
</IgrActionStrip>
<IgrColumn
Expand Down
108 changes: 49 additions & 59 deletions samples/grids/grid/binding-composite-data/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,18 @@ import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrGridModule } from 'igniteui-react-grids';
import { IgrInputModule } from 'igniteui-react';
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgrCellTemplateContext } from 'igniteui-react-grids';
import { IgrInput } from 'igniteui-react';

import 'igniteui-react-grids/grids/combined';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

const mods: any[] = [
IgrGridModule
IgrGridModule,
IgrInputModule
];
mods.forEach((m) => m.register());

Expand Down Expand Up @@ -106,6 +109,7 @@ export default class Sample extends React.Component<any, any> {
<>
<div className="contact-container">
<span><strong>Name:</strong> {cell.row.data.ContactName}</span>
<br />
<span><strong>Title:</strong> {cell.row.data.ContactTitle}</span>
<br />
<span><strong>Company:</strong> {cell.row.data.CompanyName}</span>
Expand All @@ -124,32 +128,25 @@ export default class Sample extends React.Component<any, any> {

return (
<>
<div className="contact-container--edit" style={{display: "inline-grid"}}>
<div>
<strong>Name:</strong>
<input id='ContactName' onChange={(e: any) =>
{
cell.row.data.ContactName = e.target.value;
this.forceUpdate();
}
} value={cell.row.data.ContactName}></input>
</div>
<div>
<strong>Title:</strong>
<input id='ContactTitle' onChange={(e: any) =>
{
cell.row.data.ContactTitle = e.target.value;
this.forceUpdate();
}} value={cell.row.data.ContactTitle}></input>
</div>
<div>
<strong>Company:</strong>
<input id='CompanyName' onChange={(e: any) =>
{
cell.row.data.CompanyName = e.target.value;
this.forceUpdate();
}} value={cell.row.data.CompanyName}></input>
</div>
<div className="contact-container--edit" style={{padding: "1rem"}}>
<IgrInput label='Name' inputOcurred={(input: any, e: any) =>
{
cell.row.data.ContactName = e.detail;
this.forceUpdate();
}
} value={cell.row.data.ContactName}></IgrInput>
<IgrInput label='Title' inputOcurred={(input: any, e: any) =>
{
cell.row.data.ContactTitle = e.detail;
this.forceUpdate();
}
} value={cell.row.data.ContactTitle}></IgrInput>
<IgrInput label='Company' inputOcurred={(input: any, e: any) =>
{
cell.row.data.CompanyName = e.detail;
this.forceUpdate();
}
} value={cell.row.data.CompanyName}></IgrInput>
</div>
</>
);
Expand Down Expand Up @@ -190,38 +187,31 @@ export default class Sample extends React.Component<any, any> {

return (
<>
<div className="address-container--edit" style={{display: "inline-grid"}}>
<div>
<span><strong>Country:</strong></span>
<input id='Country' onChange={(e: any) =>
{
cell.row.data.Country = e.target.value;
grid.markForCheck();
}} value={cell.row.data.Country}></input>
<br/>
<span><strong>City:</strong></span>
<input id='City' onChange={(e: any) =>
{
cell.row.data.City = e.target.value;
grid.markForCheck();
}} value={cell.row.data.City}></input>
</div>
<div>
<span><strong>Postal Code:</strong></span>
<input id='PostalCode' onChange={(e: any) =>
{
cell.row.data.PostalCode = e.target.value;
grid.markForCheck();
}} value={cell.row.data.PostalCode}></input>
<br/>
<span><strong>Selected:</strong></span>
<input id='Phone' onChange={(e: any) =>
{
cell.row.data.Phone = e.target.value;
grid.markForCheck();
}} value={cell.row.data.Phone}></input>
</div>
<br/>
<div className="contact-container--edit" style={{padding: "1rem"}}>
<IgrInput label='Country' inputOcurred={(input: any, e: any) =>
{
cell.row.data.Country = e.detail;
this.forceUpdate();
}
} value={cell.row.data.Country}></IgrInput>
<IgrInput label='City' inputOcurred={(input: any, e: any) =>
{
cell.row.data.City = e.detail;
this.forceUpdate();
}
} value={cell.row.data.City}></IgrInput>
<IgrInput label='Postal Code' inputOcurred={(input: any, e: any) =>
{
cell.row.data.PostalCode = e.detail;
this.forceUpdate();
}
} value={cell.row.data.PostalCode}></IgrInput>
<IgrInput label='Phone' inputOcurred={(input: any, e: any) =>
{
cell.row.data.Phone = e.detail;
this.forceUpdate();
}
} value={cell.row.data.Phone}></IgrInput>
</div>
</>
);
Expand Down
30 changes: 13 additions & 17 deletions samples/grids/grid/binding-nested-data-1/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrGridModule } from 'igniteui-react-grids';
import { IgrInputModule } from 'igniteui-react';
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import { IgrCellTemplateContext } from 'igniteui-react-grids';
import { IgrExpansionPanel } from 'igniteui-react';
import { IgrExpansionPanel, IgrInput } from 'igniteui-react';

import 'igniteui-react-grids/grids/combined';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

const mods: any[] = [
IgrGridModule
IgrGridModule,
IgrInputModule
];
mods.forEach((m) => m.register());

Expand Down Expand Up @@ -59,7 +61,7 @@ export default class Sample extends React.Component<any, any> {
field="Employees"
header="Employees"
bodyTemplate={this.webGridNestedDataCellTemplate}
width="30%"
width="20%"
name="column1">
</IgrColumn>
<IgrColumn
Expand Down Expand Up @@ -110,20 +112,14 @@ export default class Sample extends React.Component<any, any> {
{value.Name}
</div>
<div className="description">
<div style={{display: "flex", alignItems: "center"}}>
<label htmlFor="title" style={{width: "2rem", margin: "0rem"}}>Title</label>
<input id='Title' type="text" name="title" value={value.Title} onChange={(e: any) => {
props.dataContext.cell.value[0][e.target.id] = e.target.value;
grid.markForCheck();
}} style={{textOverflow: "ellipsis"}} />
</div>
<div style={{display: "flex", alignItems: "center"}}>
<label htmlFor="age" style={{width: "2rem", margin: "0rem"}}>Age</label>
<input id='Age' type="number" name="title" value={value.Age} onChange={(e: any) => {
props.dataContext.cell.value[0][e.target.id] = e.target.value;
grid.markForCheck();
}} style={{textOverflow: "ellipsis"}} />
</div>
<IgrInput type="text" label="Title" name="title" value={value.Title} change={(s:any, e: any) => {
props.dataContext.cell.value[0][s.label] = e.detail;
grid.markForCheck();
}} style={{textOverflow: "ellipsis"}} />
<IgrInput type="number" label="Age" name="title" value={value.Age} inputOcurred={(s:any, e: any) => {
props.dataContext.cell.value[0][s.label] = e.detail;
grid.markForCheck();
}} style={{textOverflow: "ellipsis"}} />
</div>
</IgrExpansionPanel>
</>);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default class Sample extends React.Component<any, any> {
}

public webGridPinFirstGroupToggle(sender: any, args: IgrPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
const grid: IgrGrid = this.grid
const grid: IgrGrid = this.grid;
const firstColumnGroup = grid.getColumnByName("CompanyName").parent;
firstColumnGroup.pinned = !firstColumnGroup.pinned;
grid.markForCheck();
Expand Down

0 comments on commit 71b596d

Please sign in to comment.