From ca1135de07727bc812b87d4ad2a354b8b0e34b67 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 10 Jul 2025 10:48:57 +0530 Subject: [PATCH] Integrated latest changes at 07-10-2025 10:30:07 AM --- .../data/getting-started-cs2/program.cs | 31 ++++++++ .../getting-started-cs3/systemjs.config.js | 39 ---------- .../data/getting-started-cs34/program.cs | 31 ++++++++ .../data/getting-started-cs35/program.cs | 31 ++++++++ .../data/getting-started-cs36/program.cs | 31 ++++++++ .../data/getting-started-cs37/program.cs | 31 ++++++++ .../grid/toolbar-custom-cs2/datasource.ts | 76 +++++++++++++++++++ .../grid/toolbar-custom-cs2/es5-datasource.js | 76 +++++++++++++++++++ .../grid/toolbar-custom-cs2/index.css | 14 ++++ .../grid/toolbar-custom-cs2/index.js | 57 ++++++++++++++ .../grid/toolbar-custom-cs2/index.ts | 52 +++++++++++++ .../grid/toolbar-custom-cs2/js/index.html | 42 ++++++++++ .../toolbar-custom-cs2}/systemjs.config.js | 24 +++--- .../grid/toolbar-custom-cs2/ts/index.html | 32 ++++++++ ej2-javascript/data/adaptors.md | 48 +++++++++--- .../grid/tool-bar/tool-bar-items.md | 39 +++++++++- 16 files changed, 594 insertions(+), 60 deletions(-) create mode 100644 ej2-javascript/code-snippet/data/getting-started-cs2/program.cs delete mode 100644 ej2-javascript/code-snippet/data/getting-started-cs3/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/data/getting-started-cs34/program.cs create mode 100644 ej2-javascript/code-snippet/data/getting-started-cs35/program.cs create mode 100644 ej2-javascript/code-snippet/data/getting-started-cs36/program.cs create mode 100644 ej2-javascript/code-snippet/data/getting-started-cs37/program.cs create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.css create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.js create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.ts create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/js/index.html rename ej2-javascript/code-snippet/{data/getting-started-cs2 => grid/toolbar-custom-cs2}/systemjs.config.js (82%) create mode 100644 ej2-javascript/code-snippet/grid/toolbar-custom-cs2/ts/index.html diff --git a/ej2-javascript/code-snippet/data/getting-started-cs2/program.cs b/ej2-javascript/code-snippet/data/getting-started-cs2/program.cs new file mode 100644 index 000000000..ac50d1674 --- /dev/null +++ b/ej2-javascript/code-snippet/data/getting-started-cs2/program.cs @@ -0,0 +1,31 @@ +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddControllers().AddJsonOptions(options => +{ + options.JsonSerializerOptions.PropertyNamingPolicy = null; // Use PascalCase. +}); + +// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle. +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (app.Environment.IsDevelopment()) +{ + app.UseSwagger(); + app.UseSwaggerUI(); +} + +app.UseDefaultFiles(); +app.UseStaticFiles(); + +app.UseHttpsRedirection(); + +app.UseAuthorization(); + +app.MapControllers(); + +app.Run(); diff --git a/ej2-javascript/code-snippet/data/getting-started-cs3/systemjs.config.js b/ej2-javascript/code-snippet/data/getting-started-cs3/systemjs.config.js deleted file mode 100644 index 69129aff2..000000000 --- a/ej2-javascript/code-snippet/data/getting-started-cs3/systemjs.config.js +++ /dev/null @@ -1,39 +0,0 @@ -System.config({ - transpiler: "typescript", - typescriptOptions: { - compilerOptions: { - target: "umd", - module: "commonjs", - moduleResolution: "node", - emitDecoratorMetadata: true, - experimentalDecorators: true - } - }, - paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/" - }, - map: { - main: "index.ts", - typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", - "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", - "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", - "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", - "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", - "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", - "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", - "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", - "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", - "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", - "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", - "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", - "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", - "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" - } -}); - -System.import('index.ts').catch(console.error.bind(console)).then(function () { - document.getElementById('container').style.visibility = "visible"; -}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/data/getting-started-cs34/program.cs b/ej2-javascript/code-snippet/data/getting-started-cs34/program.cs new file mode 100644 index 000000000..ac50d1674 --- /dev/null +++ b/ej2-javascript/code-snippet/data/getting-started-cs34/program.cs @@ -0,0 +1,31 @@ +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddControllers().AddJsonOptions(options => +{ + options.JsonSerializerOptions.PropertyNamingPolicy = null; // Use PascalCase. +}); + +// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle. +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (app.Environment.IsDevelopment()) +{ + app.UseSwagger(); + app.UseSwaggerUI(); +} + +app.UseDefaultFiles(); +app.UseStaticFiles(); + +app.UseHttpsRedirection(); + +app.UseAuthorization(); + +app.MapControllers(); + +app.Run(); diff --git a/ej2-javascript/code-snippet/data/getting-started-cs35/program.cs b/ej2-javascript/code-snippet/data/getting-started-cs35/program.cs new file mode 100644 index 000000000..ac50d1674 --- /dev/null +++ b/ej2-javascript/code-snippet/data/getting-started-cs35/program.cs @@ -0,0 +1,31 @@ +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddControllers().AddJsonOptions(options => +{ + options.JsonSerializerOptions.PropertyNamingPolicy = null; // Use PascalCase. +}); + +// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle. +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (app.Environment.IsDevelopment()) +{ + app.UseSwagger(); + app.UseSwaggerUI(); +} + +app.UseDefaultFiles(); +app.UseStaticFiles(); + +app.UseHttpsRedirection(); + +app.UseAuthorization(); + +app.MapControllers(); + +app.Run(); diff --git a/ej2-javascript/code-snippet/data/getting-started-cs36/program.cs b/ej2-javascript/code-snippet/data/getting-started-cs36/program.cs new file mode 100644 index 000000000..ac50d1674 --- /dev/null +++ b/ej2-javascript/code-snippet/data/getting-started-cs36/program.cs @@ -0,0 +1,31 @@ +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddControllers().AddJsonOptions(options => +{ + options.JsonSerializerOptions.PropertyNamingPolicy = null; // Use PascalCase. +}); + +// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle. +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (app.Environment.IsDevelopment()) +{ + app.UseSwagger(); + app.UseSwaggerUI(); +} + +app.UseDefaultFiles(); +app.UseStaticFiles(); + +app.UseHttpsRedirection(); + +app.UseAuthorization(); + +app.MapControllers(); + +app.Run(); diff --git a/ej2-javascript/code-snippet/data/getting-started-cs37/program.cs b/ej2-javascript/code-snippet/data/getting-started-cs37/program.cs new file mode 100644 index 000000000..ac50d1674 --- /dev/null +++ b/ej2-javascript/code-snippet/data/getting-started-cs37/program.cs @@ -0,0 +1,31 @@ +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddControllers().AddJsonOptions(options => +{ + options.JsonSerializerOptions.PropertyNamingPolicy = null; // Use PascalCase. +}); + +// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle. +builder.Services.AddEndpointsApiExplorer(); +builder.Services.AddSwaggerGen(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (app.Environment.IsDevelopment()) +{ + app.UseSwagger(); + app.UseSwaggerUI(); +} + +app.UseDefaultFiles(); +app.UseStaticFiles(); + +app.UseHttpsRedirection(); + +app.UseAuthorization(); + +app.MapControllers(); + +app.Run(); diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/datasource.ts b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/datasource.ts new file mode 100644 index 000000000..afaf65670 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/datasource.ts @@ -0,0 +1,76 @@ +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/es5-datasource.js b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/es5-datasource.js new file mode 100644 index 000000000..09139a1f5 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/es5-datasource.js @@ -0,0 +1,76 @@ +var data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.css b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.css new file mode 100644 index 000000000..0fba63172 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.js b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.js new file mode 100644 index 000000000..566d9105f --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.js @@ -0,0 +1,57 @@ +ej.grids.Grid.Inject(ej.grids.Toolbar, ej.grids.Edit); + +var dropDownData= [ + 'Reims', + 'Münster', + 'Rio de Janeiro', + 'Lyon', + 'Charleroi', + 'Bern', + 'Genève', + 'San Cristóbal', + 'Graz', + 'México D.F.', + 'Albuquerque', + 'Köln' +]; + +var grid = new ej.grids.Grid({ + dataSource: data, + toolbar: [ + 'Add', + 'Edit', + 'Delete', + { + template: '#toolbar-template', + align: 'Left', + tooltipText: 'Custom Component AutoComplete', + }, + ], + editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true }, + + columns: [ + { + field: 'OrderID', + headerText: 'Order ID', + textAlign: 'Right', + width: 90, + isPrimaryKey: true, + }, + { field: 'CustomerID', headerText: 'Customer ID', width: 100 }, + { field: 'ShipCity', headerText: 'ShipCity', width: 100 }, + { field: 'ShipName', headerText: 'ShipName', width: 120 }, + ], + height: 270, +}); +grid.appendTo('#Grid'); + +var listObj = new ej.dropdowns.AutoComplete({ + dataSource: dropDownData, + placeholder: 'Search ShipCity', + change: function (event) { + const selectedCity = event.value; + // perform search action for ShipCity column. + grid.search(selectedCity); +  } +}); +listObj.appendTo('#autoCompleteObj'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.ts b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.ts new file mode 100644 index 000000000..db87bdfaf --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/index.ts @@ -0,0 +1,52 @@ +import { Grid, Toolbar, Edit } from '@syncfusion/ej2-grids'; +import { AutoComplete, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; +import { data } from './datasource.ts'; + +Grid.Inject(Toolbar, Edit); + +var dropDownData= ['Reims', + 'Münster', + 'Rio de Janeiro', + 'Lyon', + 'Charleroi', + 'Bern', + 'Genève', + 'San Cristóbal', + 'Graz', + 'México D.F.', + 'Albuquerque', + 'Köln' +]; + +let grid: Grid = new Grid({ + dataSource: data, + toolbar: [ + 'Add', + 'Edit', + 'Delete', + { + template: '#toolbar-template', + align: 'Left', + tooltipText: 'Custom Component AutoComplete', + }, + ], + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 }, + { field: 'CustomerID', headerText: 'Customer ID', width: 100 }, + { field: 'ShipCity', headerText: 'ShipCity', width: 100 }, + { field: 'ShipName', headerText: 'ShipName', width: 120 }, + ], + height: 270, +}); +grid.appendTo('#Grid'); + +var listObj = new AutoComplete({ + dataSource: dropDownData, + placeholder: 'Search ShipCity', + change: function (event:ChangeEventArgs) { + const selectedCity = (event.value as string); + // perform search action for ShipCity column. + grid.search(selectedCity); +  } +}); +listObj.appendTo('#autoCompleteObj'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/js/index.html b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/js/index.html new file mode 100644 index 000000000..7468a9190 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/js/index.html @@ -0,0 +1,42 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/data/getting-started-cs2/systemjs.config.js b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/systemjs.config.js similarity index 82% rename from ej2-javascript/code-snippet/data/getting-started-cs2/systemjs.config.js rename to ej2-javascript/code-snippet/grid/toolbar-custom-cs2/systemjs.config.js index 69129aff2..f2667e175 100644 --- a/ej2-javascript/code-snippet/data/getting-started-cs2/systemjs.config.js +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/systemjs.config.js @@ -10,30 +10,34 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/23.2.4/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/30.1.37/" }, map: { main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", - "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", - "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", - "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", - "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", - "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", - "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } } }); - System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; document.getElementById('container').style.visibility = "visible"; }); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/ts/index.html b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/ts/index.html new file mode 100644 index 000000000..8220ca179 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/toolbar-custom-cs2/ts/index.html @@ -0,0 +1,32 @@ + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + +
Loading....
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/ej2-javascript/data/adaptors.md b/ej2-javascript/data/adaptors.md index 2efbb13f4..39218e8a5 100644 --- a/ej2-javascript/data/adaptors.md +++ b/ej2-javascript/data/adaptors.md @@ -714,6 +714,9 @@ This example demonstrates how to use the `UrlAdaptor` and return the data in res {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs34/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs34/program.cs %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -731,6 +734,9 @@ This example demonstrates how to use the `UrlAdaptor` and return the data in res {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs34/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs34/program.cs %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -849,6 +855,9 @@ This example demonstrates how to use the `ODataAdaptor` and return the data in r {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs2/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs2/program.cs %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -866,6 +875,9 @@ This example demonstrates how to use the `ODataAdaptor` and return the data in r {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs2/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs2/program.cs %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -1110,6 +1122,9 @@ This example demonstrates how to use the `WebApiAdaptor` and return the data in {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs35/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs35/program.cs %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -1127,6 +1142,9 @@ This example demonstrates how to use the `WebApiAdaptor` and return the data in {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs35/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs35/program.cs %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -1239,6 +1257,9 @@ This example demonstrates how to use the `WebMethodAdaptor` and return the data {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs36/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs36/program.cs %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -1256,6 +1277,9 @@ This example demonstrates how to use the `WebMethodAdaptor` and return the data {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs36/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs36/program.cs %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -1353,6 +1377,9 @@ This example demonstrates how to use the `RemoteSaveAdaptor` and return data fro {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs37/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs37/program.cs %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -1370,6 +1397,9 @@ This example demonstrates how to use the `RemoteSaveAdaptor` and return data fro {% highlight cs tabtitle="OrdersDetails.cs" %} {% include code-snippet/data/getting-started-cs37/OrdersDetails.cs %} {% endhighlight %} +{% highlight cs tabtitle="Program.cs" %} +{% include code-snippet/data/getting-started-cs37/program.cs %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -1836,12 +1866,12 @@ Example: ```json { - "result": [ - { /* record 1 */ }, - { /* record 2 */ } - // ... - ], - "count": 67 + "result": [ + { /* record 1 */ }, + { /* record 2 */ } + // ... + ], + "count": 67 } ``` @@ -1849,7 +1879,7 @@ This structure ensures that DataManager can correctly handle data binding, pagin {% if page.publishingplatform == "typescript" %} -**Implement the CustomDataAdaptor** +**Implement the CustomDataAdaptor:** Use the following steps in your `src/index.ts` to fetch and display data with a `CustomDataAdaptor`: @@ -2250,7 +2280,7 @@ namespace CustomDataAdaptor.Models The `CustomAdaptor` in Syncfusion ##Platform_Name## DataManager allows you to extend built-in adaptors (like UrlAdaptor) and override specific methods to customize the data communication between the client and server. This adaptor is useful when integrating with non-standard APIs or when the server's request and response formats do not match DataManager's default expectations. -To create and use custom adaptor, please refer to the below steps. +To create and use custom adaptor, please refer to the below steps: * Select an built-in adaptor which will act as base class for your custom adaptor. * Override the desired method to achieve your requirement. @@ -2784,7 +2814,7 @@ Use the following example to understand how to implement error handling in a `Cu ## CacheAdaptor -The CacheAdaptor is a powerful feature in Syncfusion’s ##Platform_Name## DataManager that enhances application performance by reducing redundant server calls. It caches previously fetched data on the client side, allowing your app to quickly retrieve cached data instead of making repeated HTTP requests when navigating through pages or revisiting previously loaded data. This significantly improves the responsiveness of data-bound components and reduces server load, especially in applications with large datasets or frequent data navigation. +The `CacheAdaptor` is a powerful feature in Syncfusion’s ##Platform_Name## DataManager that enhances application performance by reducing redundant server calls. It caches previously fetched data on the client side, allowing your app to quickly retrieve cached data instead of making repeated HTTP requests when navigating through pages or revisiting previously loaded data. This significantly improves the responsiveness of data-bound components and reduces server load, especially in applications with large datasets or frequent data navigation. You can enable this functionality by setting the `enableCache` property to true in the `DataManager` configuration. diff --git a/ej2-javascript/grid/tool-bar/tool-bar-items.md b/ej2-javascript/grid/tool-bar/tool-bar-items.md index 4120896fa..c18527bef 100644 --- a/ej2-javascript/grid/tool-bar/tool-bar-items.md +++ b/ej2-javascript/grid/tool-bar/tool-bar-items.md @@ -145,7 +145,7 @@ The following example demonstrate how to customize the toolbar by disabling and Adding custom toolbar items to the Syncfusion® ##Platform_Name## Grid involves incorporating personalized functionality into the toolbar. -Custom toolbar items can be added to the Grid control by defining the [toolbar](../../api/grid/#toolbar) property as a collection of [ItemModel](../../api/toolbar/itemModel) objects. These objects define the custom items and their corresponding actions. The actions for the customized toolbar items are defined in the [toolbarClick](../../api/grid/#toolbarclick) event. +Custom toolbar items can be added to the Grid control by defining the [toolbar](../../api/grid/#toolbar) property as a collection of [ItemModel](../../api/toolbar/itemModel/) objects. These objects define the custom items and their corresponding actions. The actions for the customized toolbar items are defined in the [toolbarClick](../../api/grid/#toolbarclick) event. By default, custom toolbar items are positioned on the **left** side of the toolbar. However, you can change the position by using the [align](../../api/toolbar/itemModel/#align) property of the `ItemModel`. The following example demonstrates how to apply the `align` property with the value **Right** for the **Collapse All** toolbar item. @@ -214,11 +214,46 @@ The following example demonstrates, how to use both built-in and custom toolbar {% previewsample "page.domainurl/code-snippet/grid/grid-cs172" %} {% endif %} +## Add custom components to the Grid toolbar using template + +The Syncfusion ##Platform_Name## Grid provides the flexibility to customize its toolbar by embedding custom components using the [template](../api/toolbar/itemModel/#template) property of the [ItemModel](../api/toolbar/itemModel/). This feature allows developers to add UI elements such as buttons, dropdowns, or input controls directly into the toolbar, alongside built-in actions like **Add**, **Edit**, and **Delete**. + +In the following example, an [AutoComplete](../../documentation/auto-complete/getting-started) is rendered based on an input element defined in the HTML page. The `AutoComplete` is populated with unique values from the `ShipCity` field of the Grid data. When you select a value from the `AutoComplete`, the Grid is filtered to display only the records that match the selected city. Once the Grid is rendered, the custom `AutoComplete` appears as part of the toolbar, allowing you to interact with both standard and custom toolbar elements. + +Additionally, the [change](../api/auto-complete/#change) event of the `AutoComplete` is used to trigger a search operation within the Grid. When you select or type a value, the event handler invokes the Grid’s [search](../api/grid/#search) method, dynamically filtering the displayed records in the **ShipCity** column based on the input. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/toolbar-custom-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/toolbar-custom-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/toolbar-custom-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/toolbar-custom-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/toolbar-custom-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/toolbar-custom-cs2" %} +{% endif %} + ## Custom toolbar control in a specific position Customizing the position of a custom toolbar within the Syncfusion® ##Platform_Name## Grid involves modifying the default placement of the custom toolbar items. This enables you to precisely control the positioning of each custom toolbar item according to your specific requirements and desired layout within the Grid. -By default, custom toolbar items in Grid control are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items by utilizing the [align](../../api/toolbar/itemModel#align) property of the [ItemModel](../../api/toolbar/itemModel). +By default, custom toolbar items in Grid control are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items by utilizing the [align](../../api/toolbar/itemModel/#align) property of the [ItemModel](../../api/toolbar/itemModel/). In the following sample, the **Collapse All** toolbar item is positioned on the **Right**, the **Expand All** toolbar item is positioned on the **Left**, and the **Search** toolbar item is positioned at the **Center**.