[Kendo UI] Kendo ButtonBar(kendoTabStrip)

Site Overview에서 사업장의 world map를 나타내는 기능이 필요함에따라 kendo buttonBar를 사용하여 구현하였다.

 

1. Button Bar가 생성될 div 생성 및 명시
2. Query실행 후 사업장 정보 Get
3. KendoTabStrip 속성 설정
4. Default Tab 설정

function worldMapInit() {
    var mainScreen = $('div[ux-loaded="BMP_IDEA_MAIN"]');
    if (mainScreen.length == 0) return;
    var siteData;
    var date = new Date();
    //ButtonBar에따라 바뀔 WorldMap Image
    var worldImg = $('div[ux-name="worldMap"]');
    $ux.data.query({
        id: 'BMP_IDEA_MAIN.GET.PLANT.WITH.COLOR',
        version: '00001',
        reply: function(e) {
            siteData = e.result;
            var buttonBarDiv = $('<div class="ideaMainBtnBar cj-bmp-idea-buttonBarChart-buttonBar" style=""></div>');
			//mapBtnBar : ButtonBar가 들어갈 div
            $(mapBtnBar.item()).append(buttonBarDiv);
            //CSS 설정
            var btnBar = $('div.ideaMainBtnBar');
            //KendoTabStrip parameter 설정
            $(btnBar[0]).kendoTabStrip({
                dataTextField: "name",
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                },

                dataSource: siteData, //Query 에서 가져온 Site Info
                change: function(e) {
                    var selectSite = this.value(),
                    index = this.select().index();


                    // 배경 색 설정
                    var list = $(e.sender.element[0]).find('li');
                    var len = list.length;

                    for (var i = 0; i < len; i++) {
                        list[i].style.background = '';
                    }

                    var element = e.sender.dataSource.data().find(function(element, index, array) {
                        if (element.name == selectSite) return element.color;
                    });
                    e.sender._focused[0].style.background = e.sender._focused[0].classList.contains('k-first') ? '' : element.color;
                    //이미지 변경
                    var site = e.sender._focused[0].innerText;
                    if (site == 'BEST') {
                        $ux.data.query({
                            id: 'BMP_IDEA_MAIN.GET.BEST.IDEA.CURRENT.MONTH',
                            version: '00001',
                            parameter: {
                                DATE: String(date.getFullYear()) + String((pad(date.getMonth(), 2)))
                            },
                            reply: function(er) {
                                if (er.result.length != 1) {
                                    //$(worldImg[0]).css('background-image', 'url(/resource/bmp/worldMap_ALL.png)');
                                    //$(worldImg[0]).css('background-repeat', 'no-repeat');

                                    changeSiteLabel();
                                } else {
                                    var bestSite = er.result[0].SITE;
                                    $(worldImg[0]).css('background-image', 'url(/resource/bmp/worldMap_' + bestSite + '.png)');
                                    $(worldImg[0]).css('background-repeat', 'no-repeat');
                                }

                            }
                        });
                      
                        $ux.data.query({
                            id: 'BMP_IDEA_MAIN.GET.BEST.IDEA',
                            version: '00001',
                            parameter: {
                                DATE: date.getFullYear()
                            },
                            reply: function(e) {
                                //bestIdeaGridInit();
                                monthBestIdeaGrid.data.source(e.result);
                                var rows = $this.findName('monthBestIdeaGrid').tool().getRowObjects();
                                rows.each(function() {
                                    var row = this;
                                    gridCellStatusMonthly(row);
                                });

                            }
                        });

                    } else {  
                        $ux.data.query({
                            id: 'BMP_IDEA_MAIN.GET.SITE.RECENT.IDEA',
                            version: '00001',
                            parameter: {
                                SITEID: site
                            },
                            reply: function(e) {
                                monthBestIdeaGrid.data.source(e.result);
                                var rows = $this.findName('monthBestIdeaGrid').tool().getRowObjects();
                                rows.each(function() {
                                    var row = this;
                                    gridCellStatusMonthly(row);
                                });
                            }
                        });
                        $(worldImg[0]).css('background-image', 'url(/resource/bmp/worldMap_' + site + '.png)');
                        $(worldImg[0]).css('background-repeat', 'no-repeat');
                    }
                }
            }).data("kendoTabStrip").select(0);
        }
    });
}

 

결과

 

Kendo Tabstrip

docs.telerik.com/kendo-ui/controls/navigation/tabstrip/overview?_ga=2.254591808.994599074.1603696862-677220954.1579754760

jQuery TabStrip Documentation | TabStrip Overview | Kendo UI | Kendo UI for jQuery