how do i add a datepicker for a backgrid cell

Question

I am working on backgrid to achieve grid functionality where i have a requirement to add a datepicker to a backgrid cell instead of using the Backgrid.DateCell. Awaiting for you response

samplecode:

           datagrid(collection) : {

                      colomns = [{

                                name : "name",
                    label: "Name",
                    cell : string
                                },
                                {

                                name : "date",
                    label: "Date",
                    cell : string
                                }
                              }],
                        var lgrid = new Backgrid.Grid({
                    columns: columns,
                    collection: collection,
                    emptyText: "no data"
             });
                   this.$("#grids").append(lgrid.render().$el);

                     }

these are columns defined in backgrid.I need to populate date in the string cell using datepicker when i click on the string cell of date a datepicker should be opened by which i need to pick the date into the cell. Please help me out....

Thanks & Regards gangadhar v

score 1 · Answer 1 · answered Feb 09 '14 at 04:01

There maybe better way to implement it, but I was able to do it like this.

MyDatePickerCell = Backgrid.Cell.extend({
    editor: MyDatePickerCellEditor,
});

MyDatePickerCellEditor = Backgrid.InputCellEditor.extend({
    events:{},
    initialize:function(){
        Backgrid.InputCellEditor.prototype.initialize.apply(this, arguments);
        var input = this;
        $(this.el).datepicker({
            onClose: function(newValue){
                var command = new Backgrid.Command({});
                input.model.set(input.column.get("name"), newValue);
                input.model.trigger("backgrid:edited", input.model, input.column, command);
                command = input = null;
            }
        });
    },
});

score 0 · Answer 2 · answered Jan 29 '19 at 10:36

0

onClose does not trigger at the first time I select a date. After second try it works perfectly. I couldn't figure out how to fix this.

answered Jan 29 '19 at 10:36

Attila Simon

1

1

I dont think this is an answer. If you have further queries or problems, comment them – Huzo Jan 29 '19 at 10:42
sorry, wanted to ask not to answare it was my mistake. I'm trying to use the code above. The problem is that newValue in onClose function is empty string when first time a date is selected. After that it works fine. – Attila Simon Jan 29 '19 at 14:13

how do i add a datepicker for a backgrid cell

2 Answers2