sortable

[cpuinParticipant]

I don’t know how, but sortable function stopped working.I didn’t change anything related to this functionality.Now it filters only by first column instead of all, it’s in ‘simple’ mode.

<script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
           var source =
           		{
           			datatype: "json",
           			datafields: [
           				{ name: 'ID'},
           				{ name: 'Code'},
           				{ name: 'Name'},
           				{ name: 'PriceIn'},
           				{ name: 'PriceOut1'},
           				{ name: 'PriceOut2'},
           				{ name: 'PriceOut3'},
           				{ name: 'PriceOut4'},
           				{ name: 'PriceOut5'}
           			],
           			url: 'products_json.php',
           			cache: false,
           			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);
           			                },
           			updateRow: function (rowID, rowData, commit) {
           			           var data = "update=true&" + $.param(rowData);
           			           $.ajax({
           			               dataType: 'json',
           			               url: 'products_json.php',
           			               cache: false,
           			               data: data,
           			               success: function (data, status, xhr) {
           			                   // update command is executed.
           			                   commit(true);
           			               },
           			               error: function (jqXHR, textStatus, errorThrown) {
           			                   commit(false);
           			                   alert('Does not work :(');
           			                   }
           			                  });
           			                },
           			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);
           			                }
           		};
           		
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#dataTable").jqxDataTable(
            {
                width: 850,
                pageable: true,
                pagerButtonsCount: 10,
                source: dataAdapter,
                filterable: true,
                filtermode: 'simple',
                columnsResize: false,
                columns: [
                	{ text: 'Код', dataField: 'ID', width: 100 },
                    { text: 'SKU', dataField: 'Code', width: 200 },
                    { text: 'Описание', dataField: 'Name', width: 350 },
                    { text: 'Доставна цена', dataField: 'PriceIn', cellsFormat: 'f', width: 100 },
                    { text: 'Цена дребно', dataField: 'PriceOut2' , width: 100}
                ]
            });
            
            $("#excelExport").jqxButton();
                        $("#xmlExport").jqxButton();
                        $("#csvExport").jqxButton();
                        $("#tsvExport").jqxButton();
                        $("#htmlExport").jqxButton();
                        $("#jsonExport").jqxButton();
                        $("#excelExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'xls');
                        });
                        $("#xmlExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'xml');
                        });
                        $("#csvExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'csv');
                        });
                        $("#tsvExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'tsv');
                        });
                        $("#htmlExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'html');
                        });
                        $("#jsonExport").click(function () {
                            $("#dataTable").jqxDataTable('exportData', 'json');
                        });
                        
             $("#printButton").jqxButton({ width: 80 });
                      
                        $("#printButton").click(function () {
                             var gridContent = $("#dataTable").jqxDataTable('exportData', 'html');
                             var newWindow = window.open('', '', 'width=800, height=500'),
                             document = newWindow.document.open(),
                             pageContent =
                                 '<!DOCTYPE html>' +
                                 '<html>' +
                                 '<head>' +
                                 '<meta charset="utf-8" />' +
                                 '<title>jQWidgets DataTable</title>' +
                                 '</head>' +
                                 '<body>' + gridContent + '</body></html>';
                             document.write(pageContent);
                             document.close();
                             newWindow.print();
                         });
                         
                         
            $("#dialog").jqxWindow({
                                    resizable: false,
                                    isModal: true,
                                    position: { left: $("#dataTable").offset().left + 300, top: $("#dataTable").offset().top + 35 },
                                    width: 400, height: 300,
                                    autoOpen: false
                                });
            $("#dialog").css('visibility', 'visible');
            
            $("#cancelButton").jqxButton();
            $("#cancelButton").mousedown(function () {
                                    // close jqxWindow.
                                    $("#dialog").jqxWindow('close');
                                });
            $("#saveButton").jqxButton();
            $("#saveButton").mousedown(function () {
                            // close jqxWindow.
                            $("#dialog").jqxWindow('close');
                            // update edited row.
                            var editRow = parseInt($("#dialog").attr('data-row'));
                            var rowData = {
                            ID: editRow+1,
                            Code: $("#itemCode").val(), 
                            Name: $("#itemName").val(),
                            PriceIn: $("#itemPriceIn").val(), 
                            PriceOut1: $("#itemPriceOut1").val(),
                            PriceOut2: $("#itemPriceOut2").val(),
                            PriceOut3: $("#itemPriceOut3").val(),
                            PriceOut4: $("#itemPriceOut4").val(),
                            PriceOut5: $("#itemPriceOut5").val()
                                           };
                            $("#dataTable").jqxDataTable('updateRow', editRow, rowData);
                                });
            $("#dialog").on('close', function () {
                                    // enable jqxDataTable.
                                    $("#dataTable").jqxDataTable({ disabled: false });
                                });
            
            $("#dataTable").on('rowDoubleClick', function (event) {
                            var args = event.args;
                            var index = args.index;
                            var row = args.row;
                            // update the widgets inside jqxWindow.
                            $("#dialog").jqxWindow('setTitle', "Edit Row: " + row.ID);
                            $("#dialog").jqxWindow('open');
                            $("#dialog").attr('data-row', index);
                            $("#dataTable").jqxDataTable({ disabled: true });
                            $("#itemCode").jqxInput({width: 300, height: 20});
                            $("#itemCode").val(row.Code);
                            $("#itemName").jqxInput({width: 300, height: 20});
                            $("#itemName").val(row.Name);
                            $("#itemPriceIn").jqxInput({width: 100, height: 20});
                            $("#itemPriceIn").val(row.PriceIn);
                            $("#itemPriceOut1").jqxInput({width: 100, height: 20});
                            $("#itemPriceOut1").val(row.PriceOut1);
                            $("#itemPriceOut2").jqxInput({width: 100, height: 20});
                            $("#itemPriceOut2").val(row.PriceOut2);
                            $("#itemPriceOut3").jqxInput({width: 100, height: 20});
                            $("#itemPriceOut3").val(row.PriceOut3);
                            $("#itemPriceOut4").jqxInput({width: 100, height: 20});
                            $("#itemPriceOut4").val(row.PriceOut4);
                            $("#itemPriceOut5").jqxInput({width: 100, height: 20});
                            $("#itemPriceOut5").val(row.PriceOut5);
                            
                        });
            
              
              
        });

[Peter StoevKeymaster]

Hi cpuin,

The Sorting is not enabled in the provided code. In order to enable it, set the “sortable” property of jqxDataTable to true.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

It was my mistake, i mean i need filtering not sorting.

[Peter StoevKeymaster]

Hi cpuin,

We do not find an issue with the filtering on our side. However, I just noticed in your code that you missed to set the “type” member of your source object’s data fields. That is mandatory and should not be ommited.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[cpuinParticipant]

Now it works.Thank you a lot!

[Peter StoevKeymaster]

Hi cpuin,

Thanks for the update and greetings from Sofia

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts