개요 : 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/