Category / Section
How to change the width of OLAP Client at runtime?
1 min read
You can modify the width of the OLAP Client by using the following code examples.
JS
<div id="OlapClient" style="min-height: 275px; min-width: 525px;" > </div> <div class="controlDropDown"> <select id="dispMode"> <option value="Width1">Width1</option> <option value="width2">Width2</option> </select> </div> <script> $(function () { $("#OlapClient").ejOlapClient({ url: "../wcf/OlapClientService.svc", title: "OLAP Browser" }); $("#dispMode").ejDropDownList({ fields: { text: "option" } }); ddlTarget = $('#dispMode').data("ejDropDownList"); ddlTarget.selectItemByIndex(0); $("#dispMode").ejDropDownList("option", "change", "Display"); }); function Display(args) { var ochartObj; ochartObj = $("#OlapChart").data("ejOlapChart"); var value = args.selectedText; if (value == "Width1") { $("#OlapClient1").css("width", "1100px"); $(".outerPanel").css("width", "1100px"); $(".controlPanel").css("width", "650px"); $("#OlapChart").css("width", "635px"); setChartProperty1(args); } else if (value == "Width2") { $("#OlapClient1").css("width", "1300px"); $(".outerPanel").css("width", "1300px"); $(".controlPanel").css("width", "850px"); $("#OlapChart").css("width", "830px"); setChartProperty2(args); } } function setChartProperty1(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 635; ochartObj.model.size.height = 400; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } function setChartProperty2(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 830; ochartObj.model.size.height = 590; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } </script>
MVC
@Html.EJ().Olap().OlapClient("OlapClient1").Url("/wcf/OlapClientService.svc").Title("OLAP Browser") <div class="controlDropDown"> <select id="dispMode"> <option value="Width1">Width1</option> <option value="width2">Width2</option> </select> </div> <script> $(function () { $("#dispMode").ejDropDownList({ fields: { text: "option" } }); ddlTarget = $('#dispMode').data("ejDropDownList"); ddlTarget.selectItemByIndex(0); $("#dispMode").ejDropDownList("option", "change", "Display"); }); function Display(args) { var ochartObj; ochartObj = $("#OlapChart").data("ejOlapChart"); var value = args.selectedText; if (value == "Width1") { $("#OlapClient1").css("width", "1100px"); $(".outerPanel").css("width", "1100px"); $(".controlPanel").css("width", "650px"); $("#OlapChart").css("width", "635px"); setChartProperty1(args); } else if (value == "Width2") { $("#OlapClient1").css("width", "1300px"); $(".outerPanel").css("width", "1300px"); $(".controlPanel").css("width", "850px"); $("#OlapChart").css("width", "830px"); setChartProperty2(args); } } function setChartProperty1(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 635; ochartObj.model.size.height = 400; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } function setChartProperty2(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 830; ochartObj.model.size.height = 590; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } </script>
ASP
<ej:OlapClient ID="OlapClient1" runat="server" Url="../wcf/OlapClientService.svc"> <ClientSideEvents ChartLoad="setChartProperties" /> </ej:OlapClient> <div class="controlDropDown"> <select id="dispMode"> <option value="Width1">Width1</option> <option value="width2">Width2</option> </select> </div> <script> $(function () { $("#dispMode").ejDropDownList({ fields: { text: "option" } }); ddlTarget = $('#dispMode').data("ejDropDownList"); ddlTarget.selectItemByIndex(0); $("#dispMode").ejDropDownList("option", "change", "Display"); }); function Display(args) { var ochartObj; ochartObj = $("#OlapChart").data("ejOlapChart"); var value = args.selectedText; if (value == "Width1") { $("#OlapClient1").css("width", "1100px"); $(".outerPanel").css("width", "1100px"); $(".controlPanel").css("width", "650px"); $("#OlapChart").css("width", "635px"); setChartProperty1(args); } else if (value == "Width2") { $("#OlapClient1").css("width", "1300px"); $(".outerPanel").css("width", "1300px"); $(".controlPanel").css("width", "850px"); $("#OlapChart").css("width", "830px"); setChartProperty2(args); } } function setChartProperty1(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 635; ochartObj.model.size.height = 400; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } function setChartProperty2(args) { if (ochartObj.model.size.width != null) { ochartObj.model.size.width = 830; ochartObj.model.size.height = 590; } ochartObj.renderControlSuccess({ "JsonRecords": JSON.stringify(ochartObj.getJsonRecords()), "OlapReport": ochartObj.getOlapReport() }); } </script>