CODEWITHSUNDEEP
javascriptasp.netajaxasp.net-mvcslickgrid
daaavs
daaavs

Reputation: 35

Slickgrid changes the ID from my data and dont clean up the empty row

Im trying to update my grid without the need for refreshing! Right now, it updates only the grid, but dont know why, it changes the id to the last one inserted and dont "clean up" the empty row! When I try to insert data, it clears it . Im kinda new with ajax and slickgrid! I've tried to see the ajax example from slickgrid, but I got some errors! Do I need to re-upload the onCellChange and so on ? I just wanted to update th grid with the new data. Any help?

Thanks in advance

So, I've tried re-draw the table re-using my actual drawning code, but im failling to re-draw with correct data.

Function to re-draw grid

function desenhaGrid() {
    $("#myGrid").ready(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    for (var key in jsonResult) {
                        if (jsonResult.hasOwnProperty(key)) {
                            //print table
                            var d = (data[key] = {});
                            for (var i = 0; i < data.length; i++) {
                                d["#"] = i + 1;
                            }
                            d["id"] = jsonResult[key].id;
                            d["t_nome"] = jsonResult[key].t_nome;
                            d["t_prof"] = jsonResult[key].t_prof;
                            d["t_data"] = jsonResult[key].t_data;
                            d["t_morada"] = jsonResult[key].t_morada;
                            d["t_percCompleto"] = jsonResult[key].t_percCompleto;
                        }
                    }


                    grid = new Slick.Grid("#myGrid", dataView, columns, options);

                   dataView.beginUpdate();
                   grid.invalidateAllRows();
                   dataView.setItems(data);
                   grid.render();
                   dataView.endUpdate();
                                       }
            });

        });
    });
}

and this is my onAddNewRow

        grid.onAddNewRow.subscribe(function (e, args) {
            var idData = jsonResult[key].id + 1;
            var item = { "id": idData, "t_nome": '', "t_prof": '', "t_data": '', "t_morada": '', "t_percCompleto": '' };
            $.extend(item, args.item);
            dataView.addItem(item);
            //if user press enter
            grid.onKeyDown.subscribe(function (e) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed == 13) {
                    alert("add");
                    var myJSON = JSON.stringify(item);
                    $.post("/SlickGrid/addGridEnter", $("input[name=mydata]").val(myJSON));
                    console.log(myJSON);
                    desenhaGrid();
                }
            });

        });

I expected it to re-draw my grid with all the data. Instead, its changing all the id's to the last one inserted and when I try to insert data in the last row, wont let me (it clears it after I leave the cell).

UPDATE:

I've udpate the function to draw the grid

function desenhaGrid() {
    $("#myGrid").load(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    dataView.beginUpdate();
                    grid.invalidateAllRows();
                    dataView.setItems(jsonResult);
                    dataView.endUpdate();
                    grid.render();
                }
            });

        });
    });
}

Upvotes: 0

Views: 189

Answers (1)

Ben McIntyre
Ben McIntyre

Reputation: 1968

I don't think this is a SlickGrid issue. There are all kind of problems with the javascript. For example:

  • why are you using $("#myGrid").ready( ? the ready event only fires when the DOM has finished loading

  • the entire copy operation from jsonResult to data just ends up with the same data. why not use jsonResult directly?

  • the section for (var i = 0; i < data.length; i++) { d["#"] = i + 1; } runs once for each row added to data, it should just run once at the end, outside of the loop

  • you are subscribing to the keydown event once for each row added to the grid. you should just subscribe once. listening for an Enter key is also a very poor method of determining if a row has been entered. what if someone clicks on another row before pressing Enter?

Slickgrid is a client-side grid. This means data does not need to be persisted after every change. It's a common approach to use a 'save' button, or detect if the active row has changed.

Upvotes: 1

Related Questions