DataTable Disabled

[antonborrazParticipant]

Hello Support:

I’ve created a datatable that is working correctly in jsfiddle but when I put it on my ASP.Net page (inside a Holder), the control is disabled

Any idea?

I’ve check this issue with a jqxTab control and the result is the same.

Thanks in advance.

Kind Regards.

[ivailoParticipant]

Hi antonborraz,

Try to create your DataTable step-by-step like this demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

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

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]

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

[ivailoParticipant]

Hi antonborraz,

You also can see this demo.

Check what kind of errors are received. This will be helpful about solving the problem.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts