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é