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.

<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>

Did you find this information helpful?

Yes

Comments (0)

Please sign in to leave a comment