Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
160
Modules wont render again
posted

Hello Infragistics-Team,

 

I am from germany. I hope i can explain my Problem correctly :)

In the initialization of my page I load an igGrid-Module and a Button to go to the next working-step. In The next Working-step I want to replace the igGrid-Module with an igDataChart-Module via click on the Button. This works all fine. But if I want to go back to the first step via click on the button again the igGrid-Module wont be rendered again. My Content-Div is completly empty.

 

Why do i have this effect and how can i solve it?

Heres the nessesary Code:

Chart-Functions:

function displayChart() {
    $(document).on("click", "#navigateButton", function () {
        if ($(this).attr("value") == "Show Chart") {
            var properties = new Array()
            $.each(getSelectedData(), function (key, val) {
                properties.push(key);
            })

            $("#igContent_table_container").remove();
            getChart();
            $(this).attr("value", "Back");
        } else {
            $("#igContent_chart_container").remove();
            defaultPanel();
            displayGrid();
            $(this).attr("value", "Show Chart");
        }
    })
}

function getChart() {
    $.ajax({
        url: "/Home/getChartData",
        traditional: true, /* I M P O R T A N T */
        datatype: 'json',
        type: "post",

        success: function (result) {
            bindChart(result.DataPoints)
        },

        error: function (xhr, ajaxOptions, thrownError) {
            alert("Chart konnte nicht geladen werden");
        }
    });
}

function bindChart(data) {
    if ($("#igContent_chart_container").length > 0) {
        $("#igContent_chart_container").remove();
    }
    $("#igContent").igDataChart({
        width: "500px",
        height: "500px",
        dataSource: data,
        axes:
        [
            {
                type: "categoryX",
                name: "xAxis",
                label: "Label"
            },
            {
                type: "numericY",
                name: "yAxis"
            }
        ],
        series:
        [
            {
                type: "line",
                name: "simple Series",
                xAxis: "xAxis",
                yAxis: "yAxis",
                valueMemberPath: "Value"
            }
        ]
    });
}

Grid-Functions:

function displayGrid(val, data) {
    switch (val) {
        case "extern":
            getGrid("/Home/getExternGrid");
            break;
        case "lc":
            getGrid("/Home/getLCGrid");
            break;
        case "partl":
            getGrid("/Home/getPartlGrid");
            break;
        case "resource":
            getGrid("/Home/getRessourceGrid");
            break;
        case "numberFilter":
            getGrid("/Home/selectedCustomers", data);
            break;
        default:
            getGrid("/Home/getAllDataGrid");
    }
    if ($("#navigateButton").length == 0) {
        $("#igContent").after("<input type=\"button\" id='navigateButton' value=\"Show Chart\"/>");
    }
}

function getGrid(URL, data){
    $.ajax({
        url: URL,
        traditional: true, /* I M P O R T A N T */
        datatype: 'json',
        data: { ID: data },
        type: "post",

        success: function (result) {
            if (result.customers) {
                bindGrid(result.customers)
            }
        },

        error: function (xhr, ajaxOptions, thrownError) {
            alert("Grid konnte nicht geladen werden");
        }
    });
}

function bindGrid(data) {
    $("#igContent").igGrid({
        dataSource: data,
        dataSourceType: 'json',
        width: '400px',
        columns:
        [
            { key: 'id', headerText: 'CutomerID' },
            { key: 'name', headerText: 'Name' },
            { key: 'activity', headerText: 'Activity' }
        ],
        features:
        [
            { name: "Selection", mode: "row", multipleSelection: true, mouseDragSelect: true }
        ]
    });
}

Init-Function:

function InitRibbon() {
    $(document).ready(function () {

        displayGrid();
    });
};

MVC-View:

@using Infragistics.Web.Mvc

@{
    ViewBag.Title = "Ribbon";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head
{
    <script src="@Url.Content("~/Scripts/Applications/RibbonFunctions.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Infragistics/js/infragistics.loader.js")" type="text/javascript"></script>
}

@(Html.Infragistics().Loader()
    .ScriptPath(Url.Content("~/Infragistics/js/"))
    .CssPath(Url.Content("~/Infragistics/css/"))
    .Resources("igGrid.*,igDataChart.*")
    .Render())

<h2>Ribbon</h2>

<div class="ribbon"></div>

<div id="igContent"></div>

@section scripts
{
    <script type="text/jscript">
        $.ig.loader(function () {
            InitRibbon();
        });
    </script>
}

 

Thank you for help

 

sincerly

andré

Parents
  • 775
    Verified Answer
    posted

    Hello André,

        You explained your problem perfectly :). What you need to do, to resolve this issue, is call the "destroy" method on the widget (module), each time you are removing in from the page (DOM tree). So in your case you need to add those methods in the button's click event handler. Note that they must be invoked before you remove the DOM element. To call them, you just type:

    $("#igContent").igGrid("destroy");

    and for the chart, respectivelly:

    $("#igContent").igDataChart("destroy");

    At the end you event handles should look something like this:

        $(document).on("click", "#navigateButton", function () {
            if ($(this).attr("value") == "Show Chart") {
                var properties = new Array()
                $.each(getSelectedData(), function (key, val) {
                    properties.push(key);
                })
                
    $("#igContent").igGrid("destroy"); $("#igContent_table_container").remove(); getChart(); $(this).attr("value", "Back"); } else {
    $("#igContent").igDataChart("destroy");
     $("#igContent_chart_container").remove(); defaultPanel(); displayGrid(); $(this).attr("value", "Show Chart"); } })

    Having that specified you should not have any problem switching between two widgets, no matter how many times you create/destroy them.

    If you have any additional questions, please feel free to ask.

    Thanks,

    Martin Stoev

Reply Children
No Data