optikalefx / OpenJS-Grid

OpenJS Grid is the easiest jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it's all done.
http://square-bracket.com/openjs
MIT License
96 stars 46 forks source link

dynamically added columns are not sortable #62

Open wellumies opened 9 years ago

wellumies commented 9 years ago

I can't get dynamically added columns to sort. Is the something extra that needs to be added to the column when you add one?

var $grid = $(".tulos").grid({

    nRowsShowing : 15,

    cellTypes : {
                    "encoded": function(value, columnOpts, grid) {
                        //console.log(value, columnOpts, grid);
                        var rvalue = value+"";
                        rvalue = rvalue.replace("+"," ");
                        console.log(rvalue);
                        return {
                            cellClass: "",
                            cellValue: decodeURIComponent(rvalue)
                       }
                    }
                }

    }).on("loadComplete",function(e) {
    // the raw score column. Counts raw score from previous columns
    $(this).grid("addColumn","raw",{
    width: 40,
    insertAt: "end", // index | column | "end" | "start"
    header : "Raw",
    cellClass : "raw"
}, function(i, rowData) {
    //console.log(rowData);
    //return "<button class='btn btn-warning btn-mini'>"+total(rowData)+"</button>";
    return raw(rowData);
    });
wellumies commented 9 years ago

I'm a novice with ajax and openjs grid. If someone could just post a callback or anything that would help me sort the dynamic columns? I mean the data is in the DOM already, so it should be possible?

optikalefx commented 9 years ago

Are you seeing any errors in console?

<script>
    $(function(){ 
        var $grid = $(".demo6").grid({
            editing: true
        }).on("loadComplete",function(e) {

            // the add column
            $(this).grid("addColumn","Add",{
                width: 60, 
                insertAt: "end",
                header : "Action",
                cellClass : "center"
            }, function(i) {
                return "<button class='btn btn-warning btn-mini'>Add</button>";
            });

        });

        // button click
        $grid.on("click",".cell[data-col='Add'] button",function() {
            var diag = $grid.grid("confirm","Are you sure you want to add?",function() {
                $grid.grid("notify","fake add",1000);
                console.log("diag",diag);
            });
        });

    });
</script>
wellumies commented 9 years ago

Hmm no errors. If you check grid.js it skips sorting for dynamic columns. I was wondering if I replace this "skip" with my own sorting, is there a way to give grid just the sorted row numbers and it would redraw the grid with that order?

Sent from my iPhone

On 21.4.2015, at 23.05, Sean Clark notifications@github.com wrote:

Are you seeing any errors in console? — Reply to this email directly or view it on GitHub.

optikalefx commented 9 years ago

Sorting is done in MySQL. Not in JS. That's why you can't sort a dynamic column. B/c the dynamic column doesn't exist in your database. The sort actually calls this.load({ sort : sort, orderBy : col }); which sends the sorting back to PHP, to tell Mysql to SORT BY that column.

My next version of the grid will likely be a more JS heavy solution instead of tied so tightly to MySQL. But the way it is now, sorting has to be from the given columns so we can sort in mysql.

wellumies commented 9 years ago

I know it is done in mysql, but I thought dynamic columns where patched into dom. There is already code to skip sorting when the column is dynamic, so I think I could just add code to sort on client side. Depending on grid.js it might get ugly. If some1 clicks on a regular column the data will be fetched from mysql and sorted all over again

Sent from my iPhone

On 22.4.2015, at 18.35, Sean Clark notifications@github.com wrote:

Sorting is done in MySQL. Not in JS. That's why you can't sort a dynamic column. B/c the dynamic column doesn't exist in your database. The sort actually calls this.load({ sort : sort, orderBy : col }); which sends the sorting back to PHP, to tell Mysql to SORT BY that column.

My next version of the grid will likely be a more JS heavy solution instead of tied so tightly to MySQL. But the way it is now, sorting has to be from the given columns so we can sort in mysql.

— Reply to this email directly or view it on GitHub.

optikalefx commented 9 years ago

Dynamic columns are patched into the DOM. That is correct. But the code to "skip" sorting is there because the sort is an ajax call. It's not done client side.

If you wanted to sort client side, you'd need a brand new part that did that. Unless I'm missing what you're trying to do

wellumies commented 9 years ago

That is kinda my point. The spot where sorting is skipped is the point where to add it. I have to add the sorting and then find some efficient way to enforce my new order to dom. I guess what I am asking for is a way to tell grid how to reorganize the DOM. I know it is not built in, but if I know the new row order can I use excisting grid functions to help me? Or maybe I have to do it all from zero. There has to be some existing methods that can redo the row order?

Sent from my iPhone

On 22.4.2015, at 21.52, Sean Clark notifications@github.com wrote:

Dynamic columns are patched into the DOM. That is correct. But the code to "skip" sorting is there because the sort is an ajax call. It's not done client side.

If you wanted to sort client side, you'd need a brand new part that did that. Unless I'm missing what you're trying to do

— Reply to this email directly or view it on GitHub.

optikalefx commented 9 years ago

Alright so if you bound an event to $grid.on("loadStart"). You can access grid.rows which is the data object that builds the grid. You can resort these column arrays at this point which would cause the grid to use your new sort order when it renders. As long as you are "selecting" those fields in your PHP they will be available in the rows data object.

wellumies commented 9 years ago

Thx man! Will get on it when I get my laptop back

Sent from my iPhone

On 23.4.2015, at 3.45, Sean Clark notifications@github.com wrote:

Alright so if you bound an event to $grid.on("loadStart"). You can access grid.rows which is the data object that builds the grid. You can resort these column arrays at this point which would cause the grid to use your new sort order when it renders. As long as you are "selecting" those fields in your PHP they will be available in the rows data object.

— Reply to this email directly or view it on GitHub.