라이선스 적용 및 그리드 생성
라이선스 적용
라이선스는 support.realgrid.com (opens in a new tab) 사이트에서 발급받을 수 있습니다.
라이선스는 기본적으로 전역에 설정되어야 하며, 라이선스를 적용하는 방법은 두가지가 있습니다.
다음과 같이 index.html 파일에 script 태그를 사용하여 라이선스를 적용하시거나 RealGrid.setLicenseKey() 함수를 통해 적용 하실 수 있습니다.
// App.Vue
import RealGrid from "realgrid";
RealGrid.setLicenseKey("라이선스 키");또는
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="imfield2/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<script>
var realGrid2Lic = "라이선스 키";
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>그리드 생성
우선 RealGrid제품과 RealGridVue를 import 합니다.
<script setup lang="ts">
import RealGrid from "realgrid";
import { RealGridVue } from "realgrid-vue";
import { ref } from "vue";
const gridRef = ref<RealGridVue>();
</script>gridRef라는 변수를 ref()를 사용해서 선언하고 RealGridVue 컴포넌트를 접근할 수 있도록 ref를 통해 연결 해줍니다.
기본적으로 그리드의 너비(width)와 높이(height) 값은 100%로 설정되어 있으며, 그리드의 컨테이너를 생성한 후 해당 컨테이너 내에 그리드를 배치하거나 직접 width와 height를 적용하여 너비 및 높이를 지정합니다.
<template>
<div style="width: 1000px; height: 400px">
<RealGridVue ref="gridRef"></RealGridVue>
</div>
</template>마지막으로 그리드의 css 스타일이 적용될 수 있도록 App.vue에서 realgrid-style.css를 import 해줍니다.
// App.vue
<script setup lang="ts">
import RealGrid from "./components/RealGrid.vue";
</script>
<template>
<RealGrid></RealGrid>
</template>
<style>
@import "realgrid/realgrid-style.css";
</style>