! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

vuejs flexGrid comboBox > Q&A | 토론

본문 바로가기

VueJS vuejs flexGrid comboBox

페이지 정보

작성자 볶음이 작성일 2021-07-23 14:19 조회 4,060회 댓글 0건
제품 버전 : 5.20211.781

본문

외부함수라고 해서 죄송합니다 ^^;;

methods 안에 정의한 함수를 의미했습니다.


보여주신 예시로 예를 들어보면

this.getSelectedIndexChanged(); 

를 methods 안에 정의하고 불러오려면 어찌해야 할까요?

또는 selectedIndexChanged 이벤트 함수 안에서 data에 선언된 변수를 접근하려면 어찌해야 할까요?

(아래 예시에서는 testdata를 의미합니다.)



<template>
<div class="container-fluid">
<wj-flex-grid
:alternatingRowStep="0"
selectionMode="MultiRange"
:itemsSource="data"
>
<wj-flex-grid-column
binding="id"
header="ID"
:width="80"
:isReadOnly="true"
/>
<wj-flex-grid-column
binding="country"
header="Country"
:editor="editors.countryCombo"
/>
</wj-flex-grid>
</div>
</template>


<script>
import "@grapecity/wijmo.styles/wijmo.css";
// import "bootstrap.css";
import Vue from "vue";
import * as wjCore from "@grapecity/wijmo";
import { ComboBox } from "@grapecity/wijmo.input";
import "@grapecity/wijmo.vue2.input";
import "@grapecity/wijmo.vue2.grid";
wjCore.setLicenseKey(window.evalkey);
export default {
name: "app",
data: function () {
return {
testdata: "aa",
data: _getData(),
grid: null,
countries: getCountries(),
editors: {
countryCombo: new ComboBox(document.createElement("div"), {
itemsSource: getCountries(),
selectedIndexChanged: function (s, e) {
console.log(1);
this.getSelectedIndexChanged();
},
textChanged: function (s, e) {
console.log(2);
gettextChanged();
},
}),
},
};
},
computed: {},
methods: {
getSelectedIndexChanged() {
console.log("getSelectedIndexChanged");
},
},
};
function getCountries() {
return "US,Germany,UK,Japan,Italy,Greece".split(",");
}

function _getData() {
// create an array with 100 data items
let countries = getCountries();
let products = "Piano,Violin,Flute,Guitar,Cello".split(",");
let data = [];
for (let i = 0; i < 20; i++) {
data.push({
id: i,
sel: false,
country: countries[i % countries.length],
product: products[i % products.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
});
}

// create a paged CollectionView with 6 data items per page
return new wjCore.CollectionView(data);
}
function gettextChanged() {
console.log("gettextChanged");
}
</script>

<style>
.wj-flexgrid {
height: 300px;
margin: 10px;
}

body {
margin: 10px;
}
</style>
 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

VueJS Re: vuejs flexGrid comboBox

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2021-07-27 09:43 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 selectionChangedEvent 이벤트 내에서 데이터 함수에 선언된 변수에 접근하기 위해서는 메서드 속성에 getSelectedIndexChanged라는 임의의 함수를 생성하고 데이터 함수를 파라미터로 넘겨주시면 됩니다. 그리드 초기화 시, 데이터 함수의 combobox에 접근 및 addHandler를 부착하여 이벤트 내에서  getSelectedChanged 함수를 추가해줄 수 있습니다. 자세한 코드는 아래 샘플에서 확인 부탁 드립니다.



다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.