Is it possible to write grid event handlers in typescript?

[R Brian Lindahl]

I have an Asp.Net Core 2.2 app using the latest Syncfusion core controls. I'd like to be able to use typescript to write my event handlers, both for grids etc and for other events such as button/tab clicks that need to reference a grid. It makes it a lot easier to be able to write 

    var gc = (document.getElementById("#GridContainer") as DomElements);

    if (gc == null)

        return;

    var gobj = gc.ej2_instances[0] as Grid;

so that I can then do something like 

  if (gobj.isEdit) ...

and have the intellisense to help me figure out what I'm supposed to call. Otherwise, it takes many, many visits to the documentation and trial runs in the debugger to figure out what the appropriate properties & methods are. 

I've got it so it will compile, with ' "module": "commonjs" ' in my tsconfig - I've got a package.json in my /wwwroot folder that includes the needed @syncfusion/xyz modules. and have requirejs installed so that the "require" statements that VS adds when building the typescript will (hopefully) be loaded. However, when running in the browser, I get errors in requirejs that it can't find the modules, and that I need to call the async require([]) instead of what the compiler puts in. 

I've also tried to compile with '  "module": "amd" ', thinking that requirejs needs amd; but then intellisense can't find the modules at all when I have something like "import { Grid } from "@syncfusion/ej2-grids";"

So I'm not sure if it's a tooling issue, something I'm doing wrong, or just not possible. 

Is what I'm trying to do possible at all? I need to load scripts both from _layout.cshtml (site.ts, which checks isEdit and puts up an alert if there are edits in progress when a page exits), and from each cshtml file that has a grid with events in it. 

I'm amazed that nobody else has tried to do this and written about it. All the requirejs examples I can find don't have much if anything to do with a project with razor pages; they assume that if you're using typescript, you're doing things from scratch, or with angular or something. 

[R Brian Lindahl]

Fixed one thing - had to add 

    "moduleResolution": "node"

to my tsconfig so that it'd find the modules. Now I'm stuck a little further down the line - my compiled .js has 

define(["require", "exports", "@syncfusion/ej2-popups", "@syncfusion/ej2-data"], function (require, exports, ej2_popups_1, ej2_data_1) {

...

    function tabClick(tab) {

...

    }

...

})

around my functions, and the onClick handlers (and grid event handlers, etc) can't see the functions. I'll be reading and re-reading the typescript docs to see what I need to add... if anyone has a quick suggestion for what to try, I'd love to see it. :) 

[Thavasianand Sankaranarayanan]

Hi Brian, 

 

Greetings from Syncfusion. 

 

Query: I have an Asp.Net Core 2.2 app using the latest Syncfusion core controls. I'd like to be able to use typescript to write my event handlers, both for grids etc and for other events such as button/tab clicks that need to reference a grid. around my functions, and the onClick handlers (and grid event handlers, etc) can't see the functions. 

 

We have validated your query and created sample(in core 2.2) based on your requirement. Here, we have created sample(asp core with typescript) and bind click event to the grid. Please find the steps to render grid component in core with typescript. 

 

1. Add the Syncfusion component’s 'grid.ts' file in ‘Scripts’ folder in root directory.
2. Add typescript config json and webpack.config files in the root directory.

Please add the following contents in ts and webpack config file 

tsconfig.json: 

{ 

  "compilerOptions": { 

    "target": "es5", 

    "module": "es2015", 

    "moduleResolution": "node", 

    "skipLibCheck": true, 

    "lib": [ "es2015.promise", "es2015", "dom" ] 

  }, 

  "include": [ 

    "Scripts/**/*.ts" 

  ], 

  "exclude": [ 

    "node_modules", 

    "**/*.spec.ts" 

  ] 

} 

 

       Webpack.config.js: 

const path = require('path'); 

const webpack = require('webpack'); 

 

const ROOT = path.resolve(__dirname, 'Scripts'); 

const DESTINATION = path.resolve(__dirname, 'wwwroot/js'); 

 

module.exports = { 

    context: ROOT, 

 

    entry: { 

        'index': './grid.js' 

    }, 

 

    output: { 

        filename: '[name].bundle.js', 

        path: DESTINATION 

    }          

}; 

3. Add the proper path for entryPath and output path in the webpack.config file.
4. Add dependencies in the package.json file

{ 

  "name": "razor", 

  "version": "1.0.0", 

  "description": "", 

  "private": true, 

  "main": "grid.js", 

  "scripts": { 

    "build": "webpack --config webpack.config.js" 

  }, 

  "devDependencies": { 

    "@syncfusion/ej2-calendars": "16.3.21", 

    "@syncfusion/ej2-grids": "16.4.46", 

    "source-map-loader": "0.1.6", 

    "webpack": "2.2.1", 

    "webpack-cli": "^3.0.2", 

    "ts-loader": "^2.3.4", 

    "typescript": "^2.4.2" 

  } 

} 

 

 

5. Open the command prompt in the project root directory and run the 'npm run build' command.
6. After that run the project.           

Please find the below code example and sample for your reference. 

[code example] 

... 

    let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15)); 

    let grid: Grid = new Grid( 

        { 

            ... 

           created: created 

        }); 

    grid.appendTo('#Grid'); 

 

function created() { 

    document.getElementById('Grid').addEventListener("click", function () { 

        alert("you clicked grid..."); 

    }) 

} 

Please find the sample in below link. 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/coreWithTs-1340425698  

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S.