considering to update typescript basic example ? #1047

ahsanu123 · 2024-08-06T04:42:34Z

ahsanu123
Aug 6, 2024

hey, recently i trying to learn slickgrid use typescript and vite, then i found basic example on wiki, when i try to copy paste example into my project, slickgrid only show header without any data coming up, then after skimming documentation for an hour i found that slickgrid container need an explicit height and width style, so why not make a fully worked example in typescript wiki?

i found using autoHeight: true make example work.
how about change basic example into something like this?

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon"
        type="image/svg+xml" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
  <title> Slickgrid Vanilla</title>
</head>

<body>
  <div id="myGrid"></div>
  <script type="module"
          src="/src/main.ts"></script>
</body>

</html>

 import 'slickgrid/dist/styles/css/slick-alpine-theme.css'
 import { Column, GridOption, SlickGrid } from 'slickgrid'
                                                                                                                 
  interface  ProjectModel {
  id: string;
  title: string;
  duration: string;
  percentComplete: number;
  start: string;
  finish: string;
  effortDriven: boolean;
}              
                                                                                                                                                                                                                  
 const option: GridOption = {                                                                                         
  enableCellNavigation: true,                                                                                        
  enableColumnReorder: false,                                                                                        
  rowHeight: 20,
  autoHeight: true,
}

 const column: Column<ProjectModel>[] = [
  { id: "id", name: "ID", field: "id" },
  { id: "title", name: "Title", field: "title" },
  { id: "duration", name: "Duration", field: "duration" },
  { id: "%", name: "% Complete", field: "percentComplete", minWidth: 120 },
  { id: "start", name: "Start", field: "start", minWidth: 120 },
  { id: "finish", name: "Finish", field: "finish", minWidth: 120 },
  { id: "effort-driven", name: "Effort Driven", field: "effortDriven", minWidth: 150 }
]

const data: ProjectModel[] = []

for (let i = 0; i < 500; i++) {                                                                                      data.push({
    id: `${i}`,                                                                                                        
    title: "Task " + i,
    duration: "5 days",
    percentComplete: Math.round(Math.random() * 100),
    start: "01/01/2009",
    finish: "01/05/2009",
    effortDriven: (i % 5 == 0)                                                                                      
 })
 }

const myGrid = document.querySelector("#myGrid") as HTMLElement                                                                                                                                                                       var grid = new SlickGrid<ProjectModel>(myGrid, data, column, option)
const item = grid.getDataItem(0)
console.log(item)

ghiscoding · 2024-08-06T05:23:22Z

ghiscoding
Aug 6, 2024
Collaborator

I created that basic TypeScript Wiki just to get started, it is quite possible that I missed some grid options, feel free to update the Wiki. I do my best to maintain this project with Ben (@6pac), but yes it's quite possible that there's some errors here and there in the Wikis.

i found using autoHeight: true make example work.
how about change basic example into something like this?

that probably won't work, the thing is that all of these Examples were written with pure HTML/JS and aren't using any bundler like Vite. So considering that there's no bundler, the CSS import probably won't work.

I would instead suggest to add a section on how to use it in a TypeScript project with a bundler like Vite, just in a different section because not everyone uses Vite, there's still a ton of people using plain HTML/JS (yes that might be quite surprising, but it's still a fact and a rather large portion of users)

1 reply

ghiscoding Aug 8, 2024
Collaborator

I updated the TypeScript Wiki since it doesn't look like you made any changes yourself. It should be clear enough now. Cheers

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

considering to update typescript basic example ? #1047

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

considering to update typescript basic example ? #1047

ahsanu123 Aug 6, 2024

Replies: 1 comment · 1 reply

ghiscoding Aug 6, 2024 Collaborator

ghiscoding Aug 8, 2024 Collaborator

ahsanu123
Aug 6, 2024

Replies: 1 comment 1 reply

ghiscoding
Aug 6, 2024
Collaborator

ghiscoding Aug 8, 2024
Collaborator