[jqxGrid] 두개 컬럼의 헤더 합치는 방법

개요 : jqWidgets의 jqxGrid 사용 중 두개의 컬럼의 헤더를 한개로 합치는 방법

 

해결책 : columns 옵션 중 rendered 옵션을 사용

 

JavaScript :

$("#grid_id").jqxGrid({

   width: 450,

   source: dataAdapter,

   columns: [

      {

         text: "Product",

         datafield: "productname",

         renered: function (columnHeaerElement) {

            columnHeaderElement.html("div id='devsim' style='margin-right: 2px;'>Product</div>")

         }

   },

   {

         text: "Quantity",

         datafield: "quantity",

         renered: function (columnHeaerElement) {

            columnHeaderElement.html("div style='margin-right: 2px;'>Detail</div>")

         }

      }

   ]

});

 

CSS : 

.jqx-grid-column-header {

   border: none;

}

 

결과 :

 

개인 해결책 : 위의 예시는 공식사이트의 답변 사항이고 개인적으로는 그리드 바인딩이 완료되면 

첫번째 div에 id를 지정 후 border를 지정해주는 방법으로 해결하였다.

$("#grid_id").on("bindingcomplete", function () {

   $("#devsim").parent().parent().parent().css("border", "none");

});

각자 자신의 환경에 맞게 수정해서 문제를 해결하면 된다.

 

 

[출처] : jqWidgets 공식 사이트 Hristo님

www.jqwidgets.com/community/topic/same-header-for-2-columns/