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