[kendo ui] iframe안에서 kendo호출 시 내부 가로 스크롤 없애는 방법

문제 상황

: 조회된 내용이 없는 경우에만 내부 스크롤이 생겼음

​

문제 원인

: 2번째 캔도 그리드에서 일정 태그 때문에 그랬음

 

 

 

 

.k-grid-content>.k-grid-norecords>.k-grid-norecords-template {
    position:relative;
}



scrollable: true,




        dataBound : function() {
        	var rows = this.items();
        	if(rows.length > 0){
                $(rows).each(function () {
                    var index = $("#grid2").data("kendoGrid").dataSource.total() - $(this).index();
                    var rowLabel = $(this).find(".row-number");
                    $(rowLabel).html(index);
                });
        	}else{
        		$(".k-grid-content .k-grid-content-expander").attr("style", "width:0px;");
        	}
            cmCallback();
        }

문제 해결

: 조회된 내용이 없는 경우

즉, rows.lengh가 <= 0인 경우

해당 태그에 대한 스타일 너비 속성을 0으로 두었음

​

​

​

​

※kendo grid가 포함 된 화면을 iframe으로 호출 후

iframe영역에 가로 스크롤이 생겼을 경우 해결방법

 

=> 해당 grid의 dataBound 속성에 스크립트 추가

$(".k-grid-content .k-grid-content-expander").attr("style", "width:0px;");

​

​

​

​

​

​

​

​

​

​

단순하게

dataBound : function() {
        		$(".k-grid-content .k-grid-content-expander").attr("style", "width:0px;");
        }

 

데이터바운드에

$(".k-grid-content .k-grid-content-expander").attr("style", "width:0px;");

이코드만 추가해주면 됨