Category / Section
How to change the width of OLAP Client at runtime in ASP.NET MVC PivotClient?
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>
