[antonborrazParticipant]

Hi Guys!!!

I’ve solved the problem!!!

Data was bad introduced into arrCurrentData.

Kind Regards.

[antonborrazParticipant]

I’ve noticed that toolbar buttons are running!!!

[antonborrazParticipant]

I create the content like this:

var downlinkData = $.parseJSON($('#ctl00_ContentPlaceHolder1_HiddenInformacionQosDownlink')[0].value);
        var initDownlinkDataTable = function () {
            var source = {
                dataType: 'json',
                datafields: [
                    {
                        name: 'sectionid',
                        map: 'sectionid'
                    }, {
                        name: 'id',
                        map: 'id'
                    }, {
                        name: 'size',
                        map: 'size'
                    }, {
                        name: 'cadency',
                        map: 'cadency'
                    }, {
                        name: 'limit',
                        map: 'limit'
                    }, {
                        name: 'description',
                        map: 'description'
                    }],
                //contentType: "application/json; charset=utf-8",
                root: 'DownlinkParameters>DownlinkSection',
                localData: downlinkData,              
                //url: 'ConfiguradorEscenarios.aspx/ObtenerParametrosDownlinkQoS',

                addrow: function (rowid, rowdata, position, commit) {
                    // synchronize with the server - send insert command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
                    commit(true);
                },
                deleterow: function (rowid, commit) {
                    // synchronize with the server - send delete command
                    // call commit with parameter true if the synchronization with the server is successful 
                    //and with parameter false if the synchronization failed.
                    commit(true);
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }

            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            // create jqxDataTable.

            var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            };

            var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            };

            $("#jqxGridDownlink").jqxGrid({
                theme: 'metro',
                source: dataAdapter,
                groupable: true,
                editable: true,
                groups: ['description'],
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    toolbar.theme = 'metro';
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input style="margin-left: 5px;" id="adddlrowbutton" type="button" value="Nuevo Delay" />');
                    container.append('<input style="margin-left: 5px;" id="adddlrowpacketlossbutton" type="button" value="Nuevo Packet Loss" />');
                    container.append('<input style="margin-left: 5px;" id="adddlrowthroughputbutton" type="button" value="Nuevo Throughput" />');
                    container.append('<input style="margin-left: 5px;" id="deletedlrowbutton" type="button" value="Eliminar seleccionado" />');
                    container.append('<input style="margin-left: 5px;" id="updatedlrowbutton" type="button" value="Actualizar" />');
                    $("#adddlrowbutton").jqxButton({ theme: 'metro' });
                    $("#adddlrowpacketlossbutton").jqxButton({ theme: 'metro' });
                    $("#adddlrowthroughputbutton").jqxButton({ theme: 'metro' });
                    $("#deletedlrowbutton").jqxButton({ theme: 'metro' });
                    $("#updatedlrowbutton").jqxButton({ theme: 'metro' });
                    $("#adddlrowbutton").addClass('jqx-widget-content-metro');
                    $("#adddlrowbutton").addClass('jqx-rc-all-metro');
                    // update row.
                    //  $("#updaterowbutton").hide();
                    $("#updatedlrowbutton").on('click', function () {
                        var rowscount = $("#jqxGridDownlink").jqxGrid('getdatainformation').rowscount;
                      
                        var iDelay = 0;
                        var iPacketLoss = 0;
                        var iThrougput = 0;
                        var bRet = true;
                        for (var i = 0; i < rowscount; i++) {
                            var datarow = $("#jqxGridDownlink").jqxGrid('getrowdata', i);
                            if (datarow.description == "Delay") {
                                datarow.id = iDelay;
                                iDelay++;
                                if ((datarow.size <= 0 || datarow.size > 200) || (datarow.cadency.trim() === "" || datarow.limit.trim() === "")) {
                                    $("#jqxGridDownlink").jqxGrid('showvalidationpopup', 0, "description", "Valores de caracterización no válidos");
                                    bRet = false;
                                }
                            }
                            else if (datarow.description == "PacketLoss") {
                                datarow.id = iPacketLoss;
                                iPacketLoss++;
                            }
                            else if (datarow.description == "Througput") {
                                datarow.id = iThrougput;
                                iThrougput++;
                            }
                            if (bRet) {
                                var commit = $("#jqxGridDownlink").jqxGrid('updaterow', i, datarow);

                            }
                            $("#jqxGridDownlink").jqxGrid('ensurerowvisible', i);
                        }

                        var selectedrowindex = $("#jqxGridDownlink").jqxGrid('getselectedrowindex');
                    });

                    // create new row.
                    $("#adddlrowbutton").on('click', function () {
                        var row = {};
                        row.description = "Delay";
                        row.sectionid = 0;
                        row.id = "";
                        row.size = 0;
                        row.cadency = "";
                        row.limit = "";

                        var commit = $("#jqxGridDownlink").jqxGrid('addrow', null, row);
                    });
                    $("#adddlrowpacketlossbutton").on('click', function () {
                        var row = {};
                        row.description = "PacketLoss";
                        row.sectionid = 1;
                        row.id = "";
                        row.size = 0;
                        row.cadency = "";
                        row.limit = "";
                        var commit = $("#jqxGridDownlink").jqxGrid('addrow', null, row);
                    });
                    $("#adddlrowthroughputbutton").on('click', function () {
                        var row = {};
                        row.description = "Througput";
                        row.sectionid = 2;
                        row.id = "";
                        row.size = 0;
                        row.cadency = "";
                        row.limit = "";
                        var commit = $("#jqxGridDownlink").jqxGrid('addrow', null, row);
                    });
                    // delete            });

                    // delete row.
                    $("#deletedlrowbutton").on('click', function () {
                        var selectedrowindex = $("#jqxGridDownlink").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxGridDownlink").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#jqxGridDownlink").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#jqxGridDownlink").jqxGrid('deleterow', id);
                        }
                    });
                },

                columns: [
                {
                    text: 'Caracterización',
                    datafield: 'description',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer
                }, {
                    text: 'sectionid',
                    datafield: 'sectionid',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer,
                    hidden: true
                }, {
                    text: 'id',
                    datafield: 'id',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer,
                    hidden: true
                }, {
                    text: 'Tamaño',
                    datafield: 'size',
                    columntype: 'numberinput',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer,
                    validation: function (cell, value) {
                        if (value <= 0 || value > 200) {
                            return { result: false, message: "Tamaño de Paquete No Válido" };
                        }
                        return true;
                    },
                    initeditor: function (row, cellvalue, editor) {
                        editor.jqxNumberInput({ decimalDigits: 0 });
                    }
                }, {
                    text: 'Cadencia',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer,
                    datafield: 'cadency'
                }, {
                    text: 'Límite',
                    renderer: columnrenderer, cellsrenderer: cellsrenderer,
                    datafield: 'limit'
                }]
            });
            $('#jqxGridDownlink').jqxGrid('expandallgroups');
        };

        var initWidgets = function (tab) {
            switch (tab) {
                case 0:
                    initUplinkDataTable();
                    $('#jqxGridUplink').jqxGrid('expandallgroups');
                    break;
                case 1:
                    initDownlinkDataTable();
                    
                    break;
            }
        };

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
        $('#jqxTabs').jqxTabs({ width: 870, height: 640, initTabContent: initWidgets, theme: 'metro'});  

[antonborrazParticipant]

Hi ivailo:

Sorry but I’ doesn’t Work. I’m using classic ASP.Net instead of MVC.

In jqxTabs unless i ues the enable property it doesn’t work.

Any other idea???

Thanks in advance.

[antonborrazParticipant]

Problem solved!!

I’ve created a cartesian product and I’m able to show all records.

Kind regards.

[antonborrazParticipant]

Problem solved!!!

I’ve created a cartesian product and I can show all records.

Kind regards.

[antonborrazParticipant]

Hello????

[antonborrazParticipant]

Hello????

[antonborrazParticipant]

Hello Dimitar:

Thanks in advance for your answer, but what about the rest of data?? I’d like to see all data serialized on a DataTable. What would be the mapping for this case?

Kind regards.

[antonborrazParticipant]

Thanks for the advice but the examples provided doesn’t have attribute access, only access to the parameter. So my question is, how to get the attributes information from an XML and put them into a datatable??

Thanks in advance.

[antonborrazParticipant]

Hello Dimitar,

I’ve tested your code and it runs, but when I try to put it on my app the result is the same, it doesn’t work.

Here is my code, all starts when the button is pressed and invokes to EnableEscenarioInUseCache(). All fields are formed correctly and the dialog is shown without problem although the pie chart.

function UpdateGraphInfo(testPlanInUseId, escenarioId, description) {
    var hiddenField = document.getElementById(escenarioId);
    var content = hiddenField.outerHTML.replace('style="display: none; visibility: hidden;"', '');

    // select container and apply settings
    $("#chartContainer1").jqxChart(getChartSettings($("#" + testPlanInUseId).serializeArray(), description));
    return false;
}

function getChartSettings(myInfo, description) {
    var source = {
        datatype: "json",
        datafields: [{
            name: 'name'
        }, {
            name: 'value'
        }],
        localdata: myInfo
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    var chartSettings = {
        source: dataAdapter,
        title: '',
        description: 'Resumen ejecución Escenario',
        enableAnimations: false,
        showLegend: true,
        showBorderLine: true,
        padding: {
            left: 5,
            top: 5,
            right: 5,
            bottom: 5
        },
        titlePadding: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 10
        },
        colorScheme: 'scheme02',
        seriesGroups: [{
            type: 'pie',
            showLegend: true,
            enableSeriesToggle: true,
            series: [{
                dataField: 'value',
                displayText: 'name',
                showLabels: true,
                labelRadius: 160,
                labelLinesEnabled: true,
                labelLinesAngles: true,
                labelsAutoRotate: false,
                initialAngle: 0,
                radius: 125,
                minAngle: 0,
                maxAngle: 180,
                centerOffset: 0,
                offsetY: 170,
                formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
                    if (isNaN(value)) return value;
                    return value + '%';
                }
            }]
        }]
    };
    return chartSettings;
}

function ShowEscenarioDialog(testPlanInUseId) {
    var hiddenField = document.getElementById(testPlanInUseId);
    var content = hiddenField.outerHTML.replace('style="display: none; visibility: hidden;"', '');

    $.Dialog({
        overlay: true,
        shadow: false,
        flat: true,
        icon: '<span class="icon-info"></span>',
        onShow: function (_dialog) {
            $.Dialog.title("Estado Ejecución Escenario");
            $.Dialog.content(content);
        }
    });
    // select container and apply settings
    var chartsettings = getChartSettings($("#data_" + testPlanInUseId).serializeArray(), 'Resumen Ejecución');
    $("#chartContainer1").jqxChart(chartsettings);
    return false;
}

function EnableEscenarioInUseCache(escenarioInUseId, enableChache) {
    ShowEscenarioDialog(escenarioInUseId);    
}

Dorry for the inconvenience but I’m a bit desesperated.

Kind regards

[antonborrazParticipant]

Sorry Dimitar, but It fails:

http://jsfiddle.net/8zgdkpjz/47/

For me is strange because I used to develop desktop apps instead of web ones.

Sorry for the inconvenience.

Kind regards

[antonborrazParticipant]

Hi Dimitar,

Thank you for your answer. Sorry but the example doesn’t updated .

Now I’ve it updated with those mistakes corrected: http://jsfiddle.net/8zgdkpjz/43/ and it is still hidden.

Why is not shown, what i’m doing wrong???

Thanks in advance, again ;).

Kind regards.

[antonborrazParticipant]

It’s running!!!!!

Thanks for your kindly support.

Another question?? Where I can find an ASP.Net example which loads data dynamically.

Thank you very much again.

Kind Regards.

[antonborrazParticipant]

Hi dimitar, I’ve tested your suggestions with fiddle and it works, but In my project it’s still appearing the same issue.

I’ve noticed that I’ve several jquery dependencies, and I don’t know the loading order of your js
Which jquery version do you recommend?

Thanks in advance.

Kind Regards.

[Author]

Posts