Description: To use EJ1 and EJ2 controls on the same page in JavaScript. Solution: EJ1 and EJ2 controls can be rendered in the same page by referring required scripts and css as follows <head> <meta name="author" content="Syncfusion"> <title>Untitled</title> <!-- EJ 1 theme reference --> <link rel="stylesheet" href="//cdn.syncfusion.com/16.3.0.29/js/web/flat-azure/ej.web.all.min.css" /> <!-- EJ 2 theme reference --> <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- EJ 1 script references --> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"> </script> <!--EJ 2 script references --> <script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> <!--Extending the scripts --> <script> $.extend(ej, Syncfusion) </script> </head> HTML: <h2 > EJ 1 - Menu control </h2> <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area"> <ul id="menujson"> </ul> </div> </div> </div> <h2 > EJ 2 - DropDown control </h2> <div id="local-data" class="col-lg-6" style="padding-top:15px"> <div class="content"> <input type="text" id="games"> </div> </div> JS: <script> var data = [ { id: 1, text: "Group A", parentId: null }, { id: 2, text: "Group B", parentId: null }, { id: 3, text: "Group C", parentId: null }, { id: 4, text: "Group D", parentId: null }, { id: 5, text: "Group E", parentId: null }, //first level child { id: 11, parentId: 1, text: "Algeria", sprite: "flag-dz" }, { id: 12, parentId: 1, text: "Armenia", sprite: "flag-am" }, { id: 13, parentId: 1, text: "Bangladesh", sprite: "flag-bd" }, { id: 14, parentId: 1, text: "Cuba", sprite: "flag-cu" }, { id: 15, parentId: 2, text: "Denmark", sprite: "flag-dk" }, { id: 16, parentId: 2, text: "Egypt", sprite: "flag-eg" }, { id: 17, parentId: 3, text: "Finland", sprite: "flag-fi" }, { id: 18, parentId: 3, text: "India", sprite: "flag-in" }, { id: 19, parentId: 3, text: "Malaysia", sprite: "flag-my" }, { id: 20, parentId: 4, text: "New Zealand", sprite: "flag-nz" }, { id: 21, parentId: 4, text: "Norway", sprite: "flag-no" }, { id: 22, parentId: 4, text: "Poland", sprite: "flag-pl" }, { id: 23, parentId: 5, text: "Romania", sprite: "flag-ro" }, { id: 24, parentId: 5, text: "Singapore", sprite: "flag-sg" }, { id: 25, parentId: 5, text: "Thailand", sprite: "flag-th" }, { id: 26, parentId: 5, text: "Ukraine", sprite: "flag-ua" }, //second level child {id: 111, parentId: 11, text: "First Place" }, { id: 112, parentId: 12, text: "Second Place" }, { id: 113, parentId: 13, text: "Third place" }, { id: 114, parentId: 14, text: "Fourth Place" }, { id: 115, parentId: 15, text: "First Place" }, { id: 116, parentId: 16, text: "Second Place" }, { id: 117, parentId: 17, text: "Third Place" }, { id: 118, parentId: 18, text: "First Place" }, { id: 119, parentId: 19, text: "Second Place" }, { id: 120, parentId: 20, text: "First Place" }, { id: 121, parentId: 21, text: "Second Place" }, { id: 122, parentId: 22, text: "Third place" }, { id: 123, parentId: 23, text: "Fourth Place" }, { id: 120, parentId: 24, text: "First Place" }, { id: 121, parentId: 25, text: "Second Place" }, { id: 122, parentId: 26, text: "Third place" } ]; $(function () { $("#menujson").ejMenu({ fields: { dataSource: data, id: "id", parentId: "parentId", text: "text", spriteCssClass: "sprite" } }); }); var list = [ { id: "1", empid: "cr1", text: "ListItem 1", value: "ListItem 1" }, { id: "2", empid: "cr2", text: "ListItem 2", value: "ListItem 2" }, { id: "3", empid: "cr3", text: "ListItem 3", value: "ListItem 3" }, { id: "4", empid: "cr4", text: "ListItem 4", value: "ListItem 4" }, { id: "5", empid: "cr5", text: "ListItem 5", value: "ListItem 5" }]; var games = new ej.dropdowns.DropDownList({ // set the local data to dataSource property dataSource: list, // map the appropriate columns to fields property fields: { text: 'text' }, // set the placeholder to DropDownList input element placeholder: 'Select an item', // set the height of the popup element popupHeight: '200px' }); games.appendTo('#games'); </script> Sample: https://jsplayground.syncfusion.com/2w2ja0yb Note:Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform. ConclusionI hope you enjoyed learning about how to use EJ1 and EJ2 components together.You can refer to our JavaScript JavaScript featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
COverview This article explains about how to integrate Syncfusion JavaScript ES6 components into an ASP.NET Core application as front end. Perquisite .NET Core SDK Node Creating ASP.NET Core application You can create the application as directed in the following Microsoft documentation. https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-5.0&tabs=visual-studio Initializing “package.json” Open the “Development Command Prompt” by navigating to the “Tools” tab in the toolbar. Run the following command to initialize the “package.json” file.npm init Installing NPM Packages Install the following list of NPM packages using the command following the list. Babel Loader CSS Loader Style Loader Sass Loader Sass Webpack Webpack CLI Required Syncfusion Packagesnpm install webpack webpack-cli css-loader style-loader bable-loader @babel/core @babel/preset-env sass sass-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring Webpack You can configure the webpack bundling properly as shown in the following code snippet. const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, '/Scripts/app.js'), output: { filename: 'bundle.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( { parallel: true, } )], usedExports: true, }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, }, { test: /\.(css|scss|sass)$/i, use: [ 'style-loader', 'css-loader', { loader: "sass-loader", options: { implementation: require("sass"), sassOptions: { includePaths: ["node_modules/@syncfusion/"], }, } } ], } ] }, resolve: { extensions: [".js"] }, }; Including JavaScript ES6 Code Create a JavaScript file under new directory in the application root namely “scripts/app.js”. import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids'; import { data } from './datasource.js'; Grid.Inject(Group, Filter, Page, Sort); import './app.scss'; let grid = new Grid({ dataSource: data, columns: [ { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } ], height: 175, allowGrouping: true, allowPaging: true, allowSorting: true, allowFiltering: true }); grid.appendTo('#Grid'); Automating NPM commands in build automation You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file. <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> </PropertyGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project> Including the compiled ES6 Whenever you build the application, the “scripts/app.js” file will be compiled, and the result will be copied in “wwwroot/js/bundle.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”. <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/bundle.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> Including HTML Tag for EJ2 To keep it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example. @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> <div id="Grid" ></div> Conclusion The EJ2 Grid will be rendered as shown in the following image. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionES6WithCore-1175308856ConclusionI hope you enjoyed learning about how tointegrate Syncfusion JavaScript ES6 components as frontend in an ASP.NET Core application.You can refer to our ASP.NET Core ASP.NET Core feature tourpage to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Overview This article explains about how to use TypeScript instead of JavaScript in an ASP.NET application for manipulating the Syncfusion EJ2 for ASP.NET Core component in runtime. Prerequisite .NET SDK TypeScript Visual Studio 2019 Creating Application You can create an ASP.NET Core application with Syncfusion components using the “Getting Started with Syncfusion EJ2 for ASP.NET Core”. Initializing “package.json” Open the “Development Command Prompt” by navigating to the “Tools” tab in the toolbar. Run the following command to initialize the “package.json” file.npm init Installing NPM Packages Install the following list of NPM packages using the command following the list. TypeScript Webpack Webpack CLI TS Loader Terser Webpack Plugin Required Syncfusion Component npm install typescript webpack webpack-cli ts-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring TypeScript Compilation You should provide proper compilations option as shown in the following code snippet. { "compilerOptions": { "target": "es5", "module": "ES2015", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "suppressImplicitAnyIndexErrors": true, "lib": ["es2015.collection","es2015.core","es5","es2015.promise","dom"], "types": [] }, "include": [ "Scripts/app.ts" ], "exclude": [ "node_modules" ], "compileOnSave": false } Configuring Webpack You can configure the webpack bundling properly as shown in the following code snippet. const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'production', entry: path.join(__dirname, '/Scripts/app.ts'), output: { filename: 'app.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( {parallel: true,} )], usedExports: true, }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { configFile: "tsconfig.json" } }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, }; Including TypeScript Code Create a TypeScript file under new directory in the application root namely “scripts/app.ts”. import { Grid } from "@syncfusion/ej2-grids"; import { DomElements, select } from "@syncfusion/ej2-base"; let grid: Grid = (<DomElements>(select('#Grid', document) as HTMLElement)).ej2_instances[0] as Grid; console.log(grid); Automating NPM commands in build automation You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file. <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> <RootNamespace>EJ2TypeScriptCoreApp</RootNamespace> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>4.2</TypeScriptToolsVersion> <IsPackable>false</IsPackable> </PropertyGroup> <ItemGroup> <None Remove="Scripts\app.ts" /> </ItemGroup> <ItemGroup> <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="18.4.0.48" /> </ItemGroup> <ItemGroup> <TypeScriptCompile Include="Scripts\app.ts" /> </ItemGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project> Note:Though this method of manipulating Core component using TypeScript compiled script in runtime is not recommended, some developers uses TypeScript in development for its strongly typed feature. Including the compiled TS Whenever you build the application, the “scripts/app.ts” file will be compiled, and the result will be copied in “wwwroot/js/app.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”. <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) <!-- Syncfusion Essential JS 2 ScriptManager --> <ejs-scripts></ejs-scripts> <script src="~/js/app.js" asp-append-version="true"></script> Conclusion The EJ2 Grid TypeScript instance access has been illustrated using “console.log” in the console window of the browser as shown in the following image. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionCoreTS-2056222264 ConclusionI hope you enjoyed learning on how to use TypeScript in an ASP.NET Core application instead JavaScript.You can refer to our ASP.NET Core feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Overview This article explains about how to integrate Syncfusion EJ2 TypeScript components as frontend for an ASP.NET application. Prerequisite .NET Core SDK TypeScript Visual Studio 2019 Node Creating ASP.NET Core MVC Application You can create the application as directed in the following Microsoft documentation. https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-5.0&tabs=visual-studio Initializing “package.json” Open the “Development Command Prompt” by navigating to “Tools” tab in toolbar. Run the following command to initialize the “package.json” file.npm init Installing NPM Packages Install the following list of NPM packages using the command following the list. TypeScript Webpack Webpack CLI TS Loader Terser Webpack Plugin Required Syncfusion Component npm install typescript webpack webpack-cli ts-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring TypeScript Compilation You should provide proper compilations option as shown in the following code snippet. { "compilerOptions": { "target": "es5", "module": "ES2015", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "suppressImplicitAnyIndexErrors": true, "lib": ["es2015.collection","es2015.core","es5","es2015.promise","dom"], "types": [] }, "include": [ "../scripts/app.ts" ], "exclude": [ "../node_modules" ], "compileOnSave": false } Configuring Webpack You can configure the webpack bundling properly as shown in the following code snippet. const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'production', entry: path.join(__dirname, '/scripts/app.ts'), output: { filename: 'app.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( {parallel: true,} )], usedExports: true, }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { configFile: "tsconfig.json" } }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, }; Including TypeScript Code Create a TypeScript file under new directory in the application root namely “scripts/app.ts”. import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids'; import { data } from './datasource'; Grid.Inject(Group, Filter, Page, Sort); let grid: Grid = new Grid({ dataSource: data, columns: [ { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } ], height: 175, allowGrouping: true, allowPaging: true, allowSorting: true, allowFiltering: true }); grid.appendTo('#Grid'); Automating NPM commands in build automation You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file. <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> <RootNamespace>EJ2TypeScriptCoreApp</RootNamespace> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion> <IsPackable>false</IsPackable> </PropertyGroup> <ItemGroup> <None Remove="webpack.config.js" /> </ItemGroup> <ItemGroup> <Content Include="webpack.config.js" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.2.3"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </PackageReference> <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="18.4.0.48" /> </ItemGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project> Including the compiled TS Whenever you build the application, the “scripts/app.ts” file is compiled, and the result is copied in “wwwroot/js/app.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”. <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/app.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> Including HTML Tag for EJ2 For keeping it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example. @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> <div id="Grid" ></div> Conclusion The EJ2 Grid will be rendered as shown in the following image. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2TypeScriptCoreApp275032617 ConclusionI hope you enjoyed learning about how to integrate Syncfusion TypeScript components as frontend in an ASP.NET Core application.You can refer to our ASP.NET Core feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
Problem discussion: Custom binding action of the Grid has been discussed in this Help Document. Usually, Spinner will not be displayed in the initial render of the custom data binding, so user need to handle this in created and dataStateChange event of the Grid. https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding Render a Spinner To show a spinner in the initial render of the Grid, you can create a spinner in the created event of the Grid and set the visibility as none in the dateStateChange event. You have to place the Grid Component just below the Spinner Element. import { render } from 'react-dom'; import * as React from 'react'; import { GridComponent, ColumnsDirective, ColumnDirective, Page, Group, Sort, Inject } from '@syncfusion/ej2-react-grids'; import { Ajax } from '@syncfusion/ej2-base'; import { setSpinner, createSpinner, showSpinner } from '@syncfusion/ej2-react-popups'; export class CustomBinding extends SampleBase { constructor() { super(...arguments); this.orderService = new OrderService(); } created() { let spinnerTarget = document.querySelector('#customSpinner'); createSpinner({ target: spinnerTarget, width: '20px' }); showSpinner(spinnerTarget); } dataStateChange(state) { this.orderService.execute(state).then((gridData) => { this.grid.dataSource = gridData; document.querySelector('.e-spinner-pane').style.display = "none"; }); } render() { return (<div className='control-pane'> <div id='customSpinner'></div> <div className='control-section'> <GridComponent dataSource={this.data} ref={g => this.grid = g} allowPaging={true} allowSorting={true} pageSettings={{ pageCount: 4, pageSize: 10 }} created={this.created.bind(this)} allowGrouping={true} dataStateChange={this.dataStateChange.bind(this)}> <ColumnsDirective> <ColumnDirective field='OrderID' headerText='Order ID' width='120'></ColumnDirective> <ColumnDirective field='CustomerID' headerText='Customer Name' width='150'></ColumnDirective> <ColumnDirective field='ShipName' headerText='Ship Name' width='120' /> <ColumnDirective field='ShipCity' headerText='Ship City' width='150'></ColumnDirective> </ColumnsDirective> <Inject services={[Page, Group, Sort]} /> </GridComponent> </div> </div>); } } Output: Figure SEQ Figure \* ARABIC 1: Show spinner for custom data binding. Demo: https://stackblitz.com/edit/react-phj6rh-u98htc?file=index.js
Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The Scheduler component is developed from the ground up to be lightweight, responsive, modular and touch-friendly. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Node.js Angular 13 Angular CLI Typescript 4+ Visual Studio Code for Editor You can use the Angular CLI to setup your Angular applications. To install Angular CLI, use the following command. npm install -g @angular/cli@13.0.1 Create an Angular application Start a new Angular application using the Angular CLI command as follows. ng new angular13-app cd angular13-app Adding Syncfusion Schedule package All the available Essential JS 2 packages are published in npmjs.com registry. To install Scheduler component, use the following command. npm install @syncfusion/ej2-angular-schedule --save Note:The --save will instruct NPM to include the Schedule package inside the dependencies section of the package.json. Registering Schedule module Import Scheduler module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-schedule. [src/app/app.module.ts] import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ScheduleModule, View } from '@syncfusion/ej2-angular-schedule'; import { WeekService, MonthService} from '@syncfusion/ej2-angular-schedule'; import { AppComponent } from './app.component'; /** * Module */ @NgModule({ imports: [ BrowserModule, ScheduleModule ], declarations: [AppComponent], bootstrap: [AppComponent], providers: [WeekService, MonthService] }) export class AppModule { } Adding CSS reference The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following code. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css'; Add Scheduler component Modify the template in [src/app/app.component.ts] file to render the Scheduler component. Add the Angular scheduler by using <ejs-schedule> selector in template section of the app.component.ts file. import { Component } from '@angular/core'; import { WeekService, MonthService, WorkWeekService, EventSettingsModel } from '@syncfusion/ej2-angular-schedule'; import { defaultData } from './data'; @Component({ selector: 'app-root', providers: [WeekService, MonthService, WorkWeekService], // specifies the template string for the Schedule component template: `<ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"><e-views> <e-view option="Week" startHour="07:00" endHour="15:00"></e-view> <e-view option="WorkWeek" startHour="10:00" endHour="18:00"></e-view> <e-view option="Month" [showWeekend]="showWeekend"></e-view></e-views></ejs-schedule>` }) export class AppComponent { public selectedDate: Date = new Date(2018, 1, 15); public showWeekend: boolean = false; public eventSettings: EventSettingsModel = { dataSource: defaultData }; } Adding the datasource [src/app/data.ts] export let defaultData: Object[] = [ { Id: 1, Subject: 'Conference', StartTime: new Date(2018, 1, 7, 10, 0), EndTime: new Date(2018, 1, 7, 11, 0), IsAllDay: false }, { Id: 2, Subject: 'Meeting - 1', StartTime: new Date(2018, 1, 15, 10, 0), EndTime: new Date(2018, 1, 16, 12, 30), IsAllDay: false }, { Id: 3, Subject: 'Paris', StartTime: new Date(2018, 1, 13, 12, 0), EndTime: new Date(2018, 1, 13, 12, 30), IsAllDay: false }, { Id: 4, Subject: 'Vacation', StartTime: new Date(2018, 1, 12, 10, 0), EndTime: new Date(2018, 1, 12, 10, 30), IsAllDay: false } ]; Then run ng serve for serving sample. UG link: https://ej2.syncfusion.com/angular/documentation/schedule/getting-started/ Example Sample: https://github.com/SyncfusionExamples/ej2-angular-13-scheduler
Overview This article explains about detailed information about tools that Syncfusion provided for customizing Syncfusion Essential Studio JavaScript 2 components. Use Case Scenarios Each has specific requirements based on several factors such as user base, development environment, and so on. The following are the two most common situations in this regard. Theme Customization a)Theme Studio b)SCSS Compilation Style Customization (margin, padding, etc.) a)Custom CSS Classes b)Graphic Design Tools (Sketch, Figma, Adobe XD) Theme Customization Theme Studio Syncfusion offers an online tool called "ThemeStudio" that allows you to create CSS theme files for various color combinations. The following documentation link provides you the detailed information on this. Theme Studio Documentation: https://ej2.syncfusion.com/documentation/appearance/theme-studio Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material SCSS Compilation Also, you can compile Syncfusion SCSS file with custom color using “node-sass” as mentioned in the following code example. $primary: #a94442 !default; $accent: #3c763d !default; import “ej2/material.scss”; npm node-sass -g install node-sass –include-path=node_modules/@syncfusion custom.scss custom.css Style Customization Custom CSS Classes Other than color, you can customize EJ2 components with a custom CSS class that starts with “e-“. Under each EJ2 component's documentation, there is a section called "Style and Appearance" that lists frequently asked customizations. You can find couple of these from the following link. https://ej2.syncfusion.com/javascript/documentation/schedule/scheduler-styling https://ej2.syncfusion.com/javascript/documentation/accordion/style Graphic Design Tools (Sketch, Figma, and Adobe XD) Syncfusion provides provided design files of our themes in three major designer tools such as Sketch, Adobe XD, and Figma. The purpose of these files is to bridge the gap between the designers and the developer. UX/UI designers can use these design files to create designs based on these files. Developers can consume the modified CSS values from these designer files and manually feed them in code. Sketch https://cdn.syncfusion.com/resources/EJ2+Sketch/Syncfusion-EJ2-Sketch-UI-Resource-V1.01.zip Figma https://cdn.syncfusion.com/resources/EJ2+Figma/Syncfusion-EJ2-Figma-UI-Resource-V1.01.zip Adobe XD https://cdn.syncfusion.com/resources/EJ2+XD/Syncfusion-EJ2-Adobe-XD-UI-Resource-V1.01.zip ConclusionI hope you enjoyed learning about how to customize Syncfusion EJ2 Components.You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
OverviewThis article explains about how to integrate Syncfusion EJ2 TypeScript components as frontend for JavaScript application.Prerequisite .NET Core SDK TypeScript Visual Studio 2019 Node Creating ASP.NET Core MVC ApplicationYou can create the application as directed in the following Microsoft documentation.https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-5.0&tabs=visual-studioInitializing “package.json” Open the “Development Command Prompt” by navigating to “Tools” tab in toolbar. Run the following command to initialize the “package.json” file.npm init Installing NPM PackagesInstall the following list of NPM packages using the command following the list. TypeScript Webpack Webpack CLI TS Loader Terser Webpack Plugin Required Syncfusion Component npm install typescript webpack webpack-cli ts-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring TypeScript CompilationYou should provide proper compilations option as shown in the following code snippet. { "compilerOptions": { "target": "es5", "module": "ES2015", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "suppressImplicitAnyIndexErrors": true, "lib": ["es2015.collection","es2015.core","es5","es2015.promise","dom"], "types": [] }, "include": [ "../scripts/app.ts" ], "exclude": [ "../node_modules" ], "compileOnSave": false } Configuring WebpackYou can configure the webpack bundling properly as shown in the following code snippet.const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'production', entry: path.join(__dirname, '/scripts/app.ts'), output: { filename: 'app.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( {parallel: true,} )], usedExports: true, }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { configFile: "tsconfig.json" } }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, }; Including TypeScript CodeCreate a TypeScript file under new directory in the application root namely “scripts/app.ts”.import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids'; import { data } from './datasource'; Grid.Inject(Group, Filter, Page, Sort); let grid: Grid = new Grid({ dataSource: data, columns: [ { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } ], height: 175, allowGrouping: true, allowPaging: true, allowSorting: true, allowFiltering: true }); grid.appendTo('#Grid'); Automating NPM commands in build automationYou can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file. <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> <RootNamespace>EJ2TypeScriptCoreApp</RootNamespace> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion> <IsPackable>false</IsPackable> </PropertyGroup> <ItemGroup> <None Remove="webpack.config.js" /> </ItemGroup> <ItemGroup> <Content Include="webpack.config.js" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.2.3"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </PackageReference> <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="18.4.0.48" /> </ItemGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project> Including the compiled TSWhenever you build the application, the “scripts/app.ts” file is compiled, and the result is copied in “wwwroot/js/app.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”.<script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/app.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> Including HTML Tag for EJ2 For keeping it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example.@{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> <div id="Grid" ></div> ConclusionThe EJ2 Grid will be rendered as shown in the following image.Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2TypeScriptCoreApp275032617 ConclusionI hope you enjoyed about how to integrate Syncfusion TypeScript components as frontend in JavaScript application.You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.You can also contact us through our support forums , Direct-Trac , or feedback portal . We are always happy to assist you!
Overview This article explains how tocompile Syncfusion EJ2 SCSS theme files using the “LibSassHost” in server side which enables us to change the theme dynamically. Prerequisite .Net Core SDK Visual Studio IDE Use Case Scenario Since SCSS files are not complied in client side, usually themes with different color schemes are precompiled in build time and loaded to the DOM according to runtime condition changes, i.e., compilation in build time and simple CSS content change in runtime. If you want to change the theme's colors during runtime, you can do this by compiling SCSS on the server side, either in the application's Action method or in a separate WebAPI service. Create ASP.NET Core Application You can create ASP.NET Core application with Syncfusion EJ2 components using the “Getting Started with ASP.NET Core MVC”. Installing LibSassHost Open the NuGet package manager and install the following two packages for LibSassHost: LibSassHost LibSassHost.Native LibSassHost.Native must be based on your Operating System as follows. https://www.nuget.org/packages/LibSassHost.Native.win-x64/ https://www.nuget.org/packages/LibSassHost.Native.linux-x64/ https://www.nuget.org/packages/LibSassHost.Native.osx-x64/ Compilation using LibSassHost The following code sample provides you required configuration for compiling Syncfusion SCSS using LibSassHost. string basePath = _hostingEnvironment.WebRootPath; string importFilePath = Path.Combine(basePath, "import.scss"); string inputFilePath = Path.Combine(basePath, "custom.scss"); string importContent = System.IO.File.ReadAllText(importFilePath); string inputContent = "$accent: #08f410;\n$accent-font: #e3165b;" + importContent; System.IO.File.WriteAllText(inputFilePath, inputContent); string outputFilePath = Path.Combine(basePath, "custom.css"); CompilationOptions options = new CompilationOptions { IncludePaths = new[] { "node_modules/@syncfusion/" } }; CompilationResult result = SassCompiler.CompileFile(inputFilePath, outputFilePath, null, options); System.IO.File.WriteAllText(outputFilePath, result.CompiledContent); Conclusion You can find the simple application for reference where themes are changed using the Action method when the buttons in header section are clicked. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicTheme154007864
Overview This article explains how to use the Syncfusion EJ 2 component with RequireJS module. Prerequisite Node TypeScript Creating RequireJS Project Create a directive for the project (for example “ej2-requrejs”) Open the command and run the following NPM command to initialize a node project. Install the following packages using the NPM command. npm install requirejs typescript @syncfusion/ej2-buttons http-server --save Create HTML file and name it as “index.html” and also refer required script and style files. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> <script src="./node_modules/requirejs/require.js" data-main="./src/app.js"></script> <script src="./require.config.js"></script> <title>Essential JS 2 with RequireJs</title> </head> <body> <button id="element"></button> </body> </html> Create “app.ts” file inside the “src” directory. import { Button } from '@syncfusion/ej2-buttons'; // Initialize Button component. let button: Button = new Button({ content: 'Button' }); // Render initialized Button. button.appendTo('#element'); Create “tsconfig.json” file for compiling the TypeScript file to “AMD” module. { "compilerOptions": { "target": "es5", "module": "amd", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "rootDir": "src", "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "suppressImplicitAnyIndexErrors": true, "lib": ["es2015.collection","es2015.core","es5", "dom"] }, "exclude": [ "node_modules", "dist", "public", "coverage", "test-report" ], "compileOnSave": false } Configuring RequireJS The Syncfusion NPM packages should be configured as shown in the following code example. require.config({ baseUrl: './src', packages: [ { name: '@syncfusion/ej2-base', location: '../node_modules/@syncfusion/ej2-base/dist', main: 'ej2-base.umd.min.js' }, { name: '@syncfusion/ej2-buttons', location: '../node_modules/@syncfusion/ej2-buttons/dist', main: 'ej2-buttons.umd.min.js' } ] }); Include NPM Commands Include the following NPM command under scripts section of “package.json” file. "scripts": { "start": "tsc && http-server -o" }, Conclusion You can run the sample using the “npm run start” command then the sample is automatically opened in the browser. Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-requirejs775266460
Overview This article explains about how to use TypeScript instead of JavaScript in an ASP.NET application for manipulating the Syncfusion EJ2 for ASP.NET Core component in runtime.PrerequisiteNET SDK 8.0 or above. TypeScriptVisual Studio 2022 Creating ApplicationCreate ASP.NET Core web application with Razor pages: Tutorial: Get started with Razor Pages in ASP.NET Core | Microsoft Learn Initializing “package.json”Open the Development Command Prompt by navigating to the “Tools” tab in the toolbar. Run the following command to initialize the “package.json” file. npm init Installing NPM PackagesInstall the following list of NPM packages using the command following the list.TypeScriptWebpackWebpack CLITS LoaderTerser Webpack PluginRequired Syncfusion Componennpm install typescript webpack webpack-cli ts-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring TypeScript Compilation Copy the following JSON configuration into the "tsconfig.json" file: { "compilerOptions": { "target": "es5", "module": "ES2015", "declaration": true, "removeComments": true, "noLib": false, "experimentalDecorators": true, "sourceMap": true, "pretty": true, "allowUnreachableCode": false, "allowUnusedLabels": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "allowJs": false, "forceConsistentCasingInFileNames": true, "moduleResolution": "node", "suppressImplicitAnyIndexErrors": true, "lib": ["es2015.collection","es2015.core","es5","es2015.promise","dom"], "types": [] }, "include": [ "Scripts/app.ts" ], "exclude": [ "node_modules" ], "compileOnSave": false } Configuring Webpack Copy the following JSON configuration into the "tsconfig.json" file: const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'production', entry: path.join(__dirname, '/Scripts/app.ts'), output: { filename: 'app.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( {parallel: true,} )], usedExports: true, }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { configFile: "tsconfig.json" } }, ] }, resolve: { extensions: [".tsx", ".ts", ".js"] }, };Including TypeScript Code Create a TypeScript file under new directory in the application root namely “scripts/app.ts”. import { Grid, Column } from '@syncfusion/ej2-grids'; const data = [ { Id: 1, Name: 'John Doe' }, { Id: 2, Name: 'Jane Smith' } ]; // Initialize the Grid document.addEventListener('DOMContentLoaded', () => { const grid = new Grid({ dataSource: data, columns: [ { field: 'Id', headerText: 'ID', width: 100 }, { field: 'Name', headerText: 'Name', width: 150 } ], height: 300 }); grid.appendTo('#Grid'); console.log(grid); });Automating NPM commands in build automation You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file.<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="npx webpack" /> </Target> Including the compiled TS Whenever you build the application, the `scripts/app.ts` file will be compiled, and the result will be copied in `wwwroot/js/app.js`. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”. <head> ... <!-- Syncfusion ASP.NET Core controls styles --> <link href="https://cdn.syncfusion.com/ej2/29.1.33/bootstrap5.css" rel="stylesheet" /> </head> <body> .... <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) <!-- Syncfusion Essential JS 2 ScriptManager --> <ejs-scripts></ejs-scripts> <div id="Grid"></div> <script src="~/js/app.js" asp-append-version="true"></script> </body> ConclusionUsing this article, you can now run a Syncfusion TypeScript Grid sample in an ASP.NET Core application. An image showing the output grid sample is attached for your reference., and we have also attached the sample project for reference. Sample: AspnetcoreTsApp.zip
Ton.Overview This article explains about how to integrate Syncfusion JavaScript ES6 components into an ASP.NET Core application as front end. Perquisite .NET Core SDK Node Creating ASP.NET Core application You can create the application as directed in the following Microsoft documentation. https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-5.0&tabs=visual-studio Initializing “package.json” Open the “Development Command Prompt” by navigating to the “Tools” tab in the toolbar. Run the following command to initialize the “package.json” file.npm init Installing NPM Packages Install the following list of NPM packages using the command following the list. Babel Loader CSS Loader Style Loader Sass Loader Sass Webpack Webpack CLI Required Syncfusion Packagesnpm install webpack webpack-cli css-loader style-loader bable-loader @babel/core @babel/preset-env sass sass-loader terser-webpack-plugin @syncfusion/ej2-grids --save Configuring Webpack You can configure the webpack bundling properly as shown in the following code snippet. const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, '/Scripts/app.js'), output: { filename: 'bundle.js', path: __dirname + '/wwwroot/js' }, devtool: false, optimization: { minimize: false, minimizer: [new TerserPlugin( { parallel: true, } )], usedExports: true, }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }, }, { test: /\.(css|scss|sass)$/i, use: [ 'style-loader', 'css-loader', { loader: "sass-loader", options: { implementation: require("sass"), sassOptions: { includePaths: ["node_modules/@syncfusion/"], }, } } ], } ] }, resolve: { extensions: [".js"] }, }; Including JavaScript ES6 Code Create a JavaScript file under new directory in the application root namely “scripts/app.js”. import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids'; import { data } from './datasource.js'; Grid.Inject(Group, Filter, Page, Sort); import './app.scss'; let grid = new Grid({ dataSource: data, columns: [ { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } ], height: 175, allowGrouping: true, allowPaging: true, allowSorting: true, allowFiltering: true }); grid.appendTo('#Grid'); Automating NPM commands in build automation You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file. <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> </PropertyGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project> Including the compiled ES6 Whenever you build the application, the “scripts/app.js” file will be compiled, and the result will be copied in “wwwroot/js/bundle.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”. <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/bundle.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> Including HTML Tag for EJ2 To keep it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example. @{ ViewData["Title"] = "Home Page"; } <div class="text-center"> <h1 class="display-4">Welcome</h1> <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> </div> <div id="Grid" ></div> Conclusion The EJ2 Grid will be rendered as shown in the following image. ConclusionI hope you enjoyed learning about how to integrate JavaScript ES6 components as frontend in ASP.NET Core application.You can refer to our JavaScript UI Controls Library page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Demos JavaScript UI Controls example to understand how to create and manipulate data in the ASP.NET Core. For current customers, you can check out our Document processing libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our JavaScript Controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, orfeedback portal. We are always happy to assist you! Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionES6WithCore-1175308856
You can render the ColorPicker component for a particular column while editing a record using the “Cell Edit Template” feature of JavaScript Grid component. This is explained in the following sample code in which the ColorPicker component has been rendered using the “column.edit” property. The “rowDataBound” event triggers every time the row is bounded with data. Inside this event, the color value can able to be applied to the cell background. JS var grid = new ej.grids.Grid({ dataSource: data, toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 90 }, { field: "CustomerID", headerText: "CustomerID", width: 90 }, { field: "EmployeeID", headerText: "Employee ID", width: 90 }, { field: "Color", headerText: "Color", edit: { create: function () { elem = document.createElement('input'); return elem; }, destroy: function () { colorPickerObj.destroy(); }, read: function () { return colorPickerObj.value; }, write: function (args) { colorPickerObj = new ej.inputs.ColorPicker({ value: args.rowData[args.column.field] }); colorPickerObj.appendTo(elem); } }, width: 90 } ], rowDataBound: rowdatabound, }); grid.appendTo('#Grid'); function rowdatabound(args) { var colIndex = grid.getColumnIndexByField("Color"); // Get the column index for Color var colorTd = args.row.querySelectorAll("td.e-rowcell")[colIndex]; // Get the cell from Grid rows var color = colorTd.innerText;//get the colour value of the cell colorTd.innerHTML = "<div style='padding:3px'>" + color + "</div>";//Append a div element inside the colour Td element colorTd.querySelector("div").style.backgroundColor = args.data.Color; // Apply the background colour to the div element inside the td } OutPut Fig 1: Applying Color in Grid cells using RowDataBound event Fig 2: Rendering ColorPicker Component while editing. Fig 3: Updating the selected color to the corresponding Cell. JavaScript Demo Angular DemoConclusionI hope you enjoyed learning on how to render ColorPicker when editing record in JavaScript Grid.You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
We can able to use the ReportViewer control in EJ2 controls. We must add or import the compatibility styles references of ReportViewer control and Essential JS 2 components with the order used in this article. Angular: You can the below help documentation for how to create a ReportViewer control in Angular platform. ReportViewer control getting started You can find the below help documentation for how to create Angular application with EJ2 controls. EJ2 control getting started Find the reference below of using the order and compatibility, "styles": [ "src/styles.css", "./node_modules/@syncfusion/ej2-base/styles/material.css", "./node_modules/@syncfusion/ej2-buttons/styles/material.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/ej.widgets.core.compatibility.min.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.theme.compatibility.min.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.reports.all.min.css" ] JavaScript, ASP.NET Webforms, ASP.NET MVC, ASP.NET Core: You can find the below help documentation for how to create a ReportViewer control in various platform. JavaScript Reportviewer getting started ASP.NET Webforms ReportViewer getting started ASP.NET MVC ReportViewer getting started ASP.NET Core ReportViewer getting started You can find the below help documentation for how to create various platform with EJ2 controls. JavaScript EJ2 getting started ASP.NET Webforms EJ2 getting started ASP.NET MVC EJ2 getting started ASP.NET Core EJ2 getting started Find the reference below of using the order and compatibility. <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.widgets.core.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/default-theme/ej.theme.compatibility.min.css" rel="stylesheet" /> Note:We need to refer the EJ2 script, theme before referring the ReportViewer script and themes. Also, we have to add the below highlighted compatibility style scripts to avoid the style overlapping problem with ReportViewer control and EJ2 controls <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Syncfusion ReportViewer and EJ2 controls</title> @* Syncfusion Essential JS 2 Styles *@ <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> @* Syncfusion report platform Styles *@ <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.widgets.core.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/default-theme/ej.theme.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" /> @*Default scripts*@ <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> @* Syncfusion Essential JS 2 Scripts *@ <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> @* Syncfusion Report platform Scripts *@ <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.common.min.js"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.widgets.min.js"></script> <!--Chart component script added before the Report Designer and viewer script to render report with chart report item--> <!--Render the chart item. Add this script only if your report contains the chart report item.--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.chart.min.js"></script> <!--Render the gauge item. Add this script only if your report contains the gauge report item. --> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.lineargauge.min.js"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.circulargauge.min.js"></script> <!--Render the map item. Add this script only if your report contains the map report item.--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.map.min.js"></script> <!-- Report Viewer component script--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-viewer.min.js" type="text/javascript"></script> </head>
Essential JS 2 PDF Viewer The Syncfusion® ASP.NET Core PDF Viewer is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is also available in other frameworks such as JavaScript, Angular, ASP.NET MVC, and React. Refer to the following UG link for getting started with the PdfViewerControl. https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started Using PDF Viewer in Razor pages. You can use the PDF Viewer control with Razor pages in ASP.NET Core. The Razor page starts with the @page directive. @page makes the file into an MVC action, which means that it handles requests directly without going through a controller. It must be the first Razor directive on a page. Handler methods in Razor Pages are the methods that are automatically executed as a result of a request. The PageModel classes are created when you choose the Razor Page (with page model) option when adding a new item. The PageModel class allows separation of the logic of a page from its presentation. It defines page handlers for requests sent to the page and the data used to render the page. Create Razor Page Application Step-by-step introduction to configure Essential JS 2 setup and build a simple .NET Core web application with Razor pages using Visual Studio 2017 is explained as follows. Prerequisites The official prerequisites to create and run an ASP.NET Core 2.x application on a Windows environment are described on the .NET Core documentation website. Steps to create an ASP.NET Core web application with Razor pages: Choose File > New > Project in the Visual Studio menu bar. Select Installed > Visual C# > .NET Core and choose the required .NET Framework in the drop-down. Select ASP.NET Core Web Application, change the application name, and click OK.Note:The Essential JS 2 supports 4.5+ .NET Framework in the ASP.NET Core application that is, the minimum target framework is 4.5 for Syncfusion ASP.NET Core (Essential JS 2). Choose .NET Core with ASP.NET Core 2.0 and select Web Application, and then click OK. Now, the web application project is created with default ASP.NET Core template. Adding Syncfusion PDF Viewer Packages After creating the project, add the following dependencies to your application by using the NuGet Package Manager. Syncfusion.EJ2.AspNet.Core Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows Add the Syncfusion.EJ2.AspNet.Core NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages. Search for Syncfusion.EJ2.AspNet.Core in the Browse tab and install the Syncfusion.EJ2.AspNet.Core NuGet package in the application. Integrating PDF Viewer Control Add the following code to initialize the PDF Viewer with Razor pages in Index.cshtml, which is presented under the Pages folder.@page "{handler?}" @model IndexModel @{ ViewData["Title"] = "Home page"; } @using Syncfusion.EJ2 <div class="control-section"> <ejs-pdfviewer id="pdfviewer" serviceUrl="/Index" documentPath="PDF Succinctly.pdf"></ejs-pdfviewer> </div> serviceUrl defines the service URL of the PdfViewer control. documentPath is used to load the PDF document during the PDF Viewer initialization. The name, path, and base64 string of the PDF document can be used to load the PDF document. If the name of the PDF document is only set in the documentPath property, the document must be available in the folder that is specified in the GetDocumentPath() method in the PageModel. Add the following code in the Index.cshtml.cs to render the PDF document in the PDF Viewer.private readonly IHostingEnvironment _hostingEnvironment; private IMemoryCache _cache; public IndexModel(IHostingEnvironment hostingEnvironment,IMemoryCache cache) { _hostingEnvironment = hostingEnvironment; _cache = cache; } // Post action for loading the PDF documents public IActionResult OnPostLoad([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); MemoryStream stream = new MemoryStream(); object jsonResult = new object(); if (jsonObject != null && jsonObject.ContainsKey("document")) { if (bool.Parse(jsonObject["isFileName"])) { string documentPath = GetDocumentPath(jsonObject["document"]); if (!string.IsNullOrEmpty(documentPath)) { byte[] bytes = System.IO.File.ReadAllBytes(documentPath); stream = new MemoryStream(bytes); } else { return this.Content(jsonObject["document"] + " is not found"); } } else { byte[] bytes = Convert.FromBase64String(jsonObject["document"]); stream = new MemoryStream(bytes); } } jsonResult = pdfviewer.Load(stream, jsonObject); return Content(JsonConvert.SerializeObject(jsonResult)); } // Post action for processing the PDF documents. public IActionResult OnPostRenderPdfPages([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); object jsonResult = pdfviewer.GetPage(jsonObject); return Content(JsonConvert.SerializeObject(jsonResult)); } // Post action for unloading and disposing the PDF document resources public IActionResult OnPostUnload([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); pdfviewer.ClearCache(jsonObject); return this.Content("Document cache is cleared"); } // Post action for rendering the ThumbnailImages public IActionResult OnPostRenderThumbnailImages([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); object result = pdfviewer.GetThumbnailImages(jsonObject); return Content(JsonConvert.SerializeObject(result)); } // Post action for processing the bookmarks from the PDF documents public IActionResult OnPostBookmarks([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); object jsonResult = pdfviewer.GetBookmarks(jsonObject); return Content(JsonConvert.SerializeObject(jsonResult)); } // Post action for rendering the annotation comments public IActionResult OnPostRenderAnnotationComments([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); object jsonResult = pdfviewer.GetAnnotationComments(jsonObject); return Content(JsonConvert.SerializeObject(jsonResult)); } // Post action for exporting the annotations public IActionResult OnPostExportAnnotations([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); string jsonResult = pdfviewer.GetAnnotations(jsonObject); return Content(jsonResult); } // Post action for importing the annotations public IActionResult OnPostImportAnnotations([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); string jsonResult = string.Empty; if (jsonObject != null && jsonObject.ContainsKey("fileName")) { string documentPath = GetDocumentPath(jsonObject["fileName"]); if (!string.IsNullOrEmpty(documentPath)) { jsonResult = System.IO.File.ReadAllText(documentPath); } else { return this.Content(jsonObject["document"] + " is not found"); } } return Content(jsonResult); } // Post action for downloading the PDF documents public IActionResult OnPostDownload([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); return Content(documentBase); } // Post action for printing the PDF documents public IActionResult OnPostPrintImages([FromBody] Dictionary<string, string> jsonObject) { PdfRenderer pdfviewer = new PdfRenderer(_cache); object pageImage = pdfviewer.GetPrintImage(jsonObject); return Content(JsonConvert.SerializeObject(pageImage)); } // Gets the path of the PDF document private string GetDocumentPath(string document) { string documentPath = string.Empty; if (!System.IO.File.Exists(document)) { string basePath = _hostingEnvironment.WebRootPath; string dataPath = string.Empty; dataPath = basePath + @"/PdfViewer/"; if (System.IO.File.Exists(dataPath + document)) documentPath = dataPath + document; } else { documentPath = document; } return documentPath; } Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_RazorPages1695721996 Note:Razor pages will be supported from ASP.NET Core 2.0.From the 2019 Volume 2 release, new annotation features were included in the PDF Viewer. So, update the Scripts, CSS, and NuGet packages to the latest Essential Studio Version to work with PDF Viewer.We can refer to the CDN links with the required version. Find the following CDN links with the specific version: https://cdn.syncfusion.com/ej2/17.2.28/dist/ej2.min.js https://cdn.syncfusion.com/ej2/17.2.28/material.css From the version 17.2.0.39, we have improved the memory cache method in ASP.NET Core. So, update the controller code with the above updated code snippet to work with PDF Viewer. From the version 17.2.0.46 we have provided support for Import/Export annotations in PDF Viewer and we have updated the controller code for this implementation.ConclusionI hope you enjoyed learning about how to use EJ2 ASP.NET Core PDF Viewer in Razor pages.You can refer to our ASP.NET Core PDF Viewer feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our ASP.NET Core PDF Viewer example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!
Description: To use EJ1 and EJ2 controls on the same page. Solution: EJ1 and EJ2 controls can be rendered in the same page by referring required scripts and css as follows <head> <meta name="author" content="Syncfusion"> <title>Untitled</title> <!-- EJ 1 theme reference --> <link rel="stylesheet" href="//cdn.syncfusion.com/16.3.0.29/js/web/flat-azure/ej.web.all.min.css" /> <!-- EJ 2 theme reference --> <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- EJ 1 script references --> <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="//cdn.syncfusion.com/16.3.0.29/js/web/ej.web.all.min.js"> </script> <!--EJ 2 script references --> <script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> <!--Extending the scripts --> <script> $.extend(ej, Syncfusion) </script> </head> HTML: <h2 > EJ 1 - Menu control </h2> <div class="content-container-fluid"> <div class="row"> <div class="cols-sample-area"> <ul id="menujson"> </ul> </div> </div> </div> <h2 > EJ 2 - DropDown control </h2> <div id="local-data" class="col-lg-6" style="padding-top:15px"> <div class="content"> <input type="text" id="games"> </div> </div> JS: <script> var data = [ { id: 1, text: "Group A", parentId: null }, { id: 2, text: "Group B", parentId: null }, { id: 3, text: "Group C", parentId: null }, { id: 4, text: "Group D", parentId: null }, { id: 5, text: "Group E", parentId: null }, //first level child { id: 11, parentId: 1, text: "Algeria", sprite: "flag-dz" }, { id: 12, parentId: 1, text: "Armenia", sprite: "flag-am" }, { id: 13, parentId: 1, text: "Bangladesh", sprite: "flag-bd" }, { id: 14, parentId: 1, text: "Cuba", sprite: "flag-cu" }, { id: 15, parentId: 2, text: "Denmark", sprite: "flag-dk" }, { id: 16, parentId: 2, text: "Egypt", sprite: "flag-eg" }, { id: 17, parentId: 3, text: "Finland", sprite: "flag-fi" }, { id: 18, parentId: 3, text: "India", sprite: "flag-in" }, { id: 19, parentId: 3, text: "Malaysia", sprite: "flag-my" }, { id: 20, parentId: 4, text: "New Zealand", sprite: "flag-nz" }, { id: 21, parentId: 4, text: "Norway", sprite: "flag-no" }, { id: 22, parentId: 4, text: "Poland", sprite: "flag-pl" }, { id: 23, parentId: 5, text: "Romania", sprite: "flag-ro" }, { id: 24, parentId: 5, text: "Singapore", sprite: "flag-sg" }, { id: 25, parentId: 5, text: "Thailand", sprite: "flag-th" }, { id: 26, parentId: 5, text: "Ukraine", sprite: "flag-ua" }, //second level child {id: 111, parentId: 11, text: "First Place" }, { id: 112, parentId: 12, text: "Second Place" }, { id: 113, parentId: 13, text: "Third place" }, { id: 114, parentId: 14, text: "Fourth Place" }, { id: 115, parentId: 15, text: "First Place" }, { id: 116, parentId: 16, text: "Second Place" }, { id: 117, parentId: 17, text: "Third Place" }, { id: 118, parentId: 18, text: "First Place" }, { id: 119, parentId: 19, text: "Second Place" }, { id: 120, parentId: 20, text: "First Place" }, { id: 121, parentId: 21, text: "Second Place" }, { id: 122, parentId: 22, text: "Third place" }, { id: 123, parentId: 23, text: "Fourth Place" }, { id: 120, parentId: 24, text: "First Place" }, { id: 121, parentId: 25, text: "Second Place" }, { id: 122, parentId: 26, text: "Third place" } ]; $(function () { $("#menujson").ejMenu({ fields: { dataSource: data, id: "id", parentId: "parentId", text: "text", spriteCssClass: "sprite" } }); }); var list = [ { id: "1", empid: "cr1", text: "ListItem 1", value: "ListItem 1" }, { id: "2", empid: "cr2", text: "ListItem 2", value: "ListItem 2" }, { id: "3", empid: "cr3", text: "ListItem 3", value: "ListItem 3" }, { id: "4", empid: "cr4", text: "ListItem 4", value: "ListItem 4" }, { id: "5", empid: "cr5", text: "ListItem 5", value: "ListItem 5" }]; var games = new ej.dropdowns.DropDownList({ // set the local data to dataSource property dataSource: list, // map the appropriate columns to fields property fields: { text: 'text' }, // set the placeholder to DropDownList input element placeholder: 'Select an item', // set the height of the popup element popupHeight: '200px' }); games.appendTo('#games'); </script> Sample: https://jsplayground.syncfusion.com/2w2ja0yb Note:Similar component from EJ1 and EJ2 platform cannot be used together. You need to choose the component in either EJ1 or EJ2 platform. ConclusionI hope you enjoyed learning how to use EJ1 and EJ2 controls together in JavaScript.You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
You can bind a selected value from the drop-down list using the ngModel and edit it inside the text box or numeric input box. The selected item text and value can be got using the change event of the drop-down list through the args.itemData. To bind this itemData text to the text box and edit the selected text, refer to the following code. App.component.html: <div style="margin: 0px auto; width:250px; padding-top: 40px;"> <label>EJ2 DropDownList</label><br /><br /> <ejs-dropdownlist id='games' #sample [dataSource]='sportsData' (change)='onChange($event)' [(value)]='value' [(text)]='text' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist> <div style="margin-top:15px"> <label>Game Id:</label><br /><br /> <input id="Gvalue" type="number" [(ngModel)]="value" /> </div> <div style="margin-top:15px"> <label>Game Name:</label><br /><br /> <input id="Gtext" type="text" [(ngModel)]="text" /> </div> </div> App.component.ts: import { Component,ViewChild } from '@angular/core'; import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { @ViewChild('sample') public ddlObj: DropDownListComponent; // define the JSON of data public sportsData: Object[] = [ { Id: 1, Game: 'American Football' }, { Id: 2, Game: 'Badminton' }, { Id: 3, Game: 'Basketball' }, { Id: 4, Game: 'Cricket' }, { Id: 5, Game: 'Football' }, { Id: 6, Game: 'Golf' }, { Id: 7, Game: 'Hockey' }, { Id: 8, Game: 'Rugby' }, { Id: 9, Game: 'Snooker' }, { Id: 10, Game: 'Tennis' } ]; // maps the appropriate column to fields property public fields: Object = { text: 'Game', value: 'Id' }; // set the height of the popup element public height: string = '220px'; // set the placeholder to DropDownList input element public waterMark: string = 'Select a game'; // set the value to select an item based on mapped value at initial rendering public value: number = 3; //set text for model textbox public text:string='Basketball'; //change event of DropDownList public onChange(args: any): void { this.text=args.itemData.Game; //assign the changed text in DropDownList to textbox } } App.module.ts: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { DropDownListModule} from '@syncfusion/ej2-ng-dropdowns'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, FormsModule ,DropDownListModule], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } StackBlitz sample link: https://stackblitz.com/edit/angular-svhivj Output:
