Kendo Grid: Keep custom popup open after save new record

1
votes

I've got a custom popup editor template for my Kendo Grid which contains tabs. One of the tabs is to have a second Kendo Grid of records relating to the record being edited.

I'd like to be able to create a new record and immediately start adding the related records, without having to re-open the newly created record. Obviously, I have to first save the record in order for its ID to be generated.

I've managed to prevent the popup editor closing when new records are saved, but I think the popup window is no longer bound to the model at this point.

Is there a way I can rebind the window to the model so I can carry on editing and adding the related records?

Thanks

Edit: Here's the technique for keeping the editor open:

The grid's edit and save events:

edit: function(e){
  var editWindow = this.editable.element.data("kendoWindow");
  editWindow.bind("close", onWindowEditClose);
},
save: function(e){
    if (e.model.isNew()) {
        preventCloseOnSave = true;
    } else {
        preventCloseOnSave = false;
    }
}

The onWindowEditClose:

var onWindowEditClose = function(e) {'
    if (preventCloseOnSave) {
        e.preventDefault();
        preventCloseOnSave = false;
    }
};
3
kendo-uikendo-grid
Can u share code or snapshot of ur UI? – Dhwani
Hi. There's not much no show. It's a pretty straight forward Grid at this stage. It just uses a custom popup editor, but that's fairly irrelevant. I've added code snippets to show how I'm preventing the editor from closing, but I'm now thinking a different approach would be better. – Mat
I'm thinking a better idea would be to programatically create a new record and then open it in edit mode. I'm using a remote dataSource and I'm not sure now I'd go about doing this, but it would solve the problem. – Mat

3 Answers

1
votes

I ended up using a slightly clunky workaround, but other than a minor UI 'flash' it works okay.

The Grid has a rowTemplate, so I've added the record's ID field to the TR tags so I can find them by ID. I then have a function that runs on the complete event when a new record is created which finds the new row and immediately opens it:

var ds = new kendo.data.DataSource({
  // ...
  transport: {
    create:  {
      url: '/url/to/create',
      dataType: 'json',
      type: 'post',
      complete: recordCreated
  }
});

function recordCreated(e) {
  "use strict";
  var id = e.responseJSON.data[0].id,
  grid = $('#grid').data("kendoGrid"),
  row = grid.tbody.find("tr[data-id='" + id + "']");
  grid.editRow(row);
}
0
votes

On a conceptual level, you could intercept the POST action that saves the record to the database and get the saved data on return. Note that your POST action must return the saved object (as is expected). You can hook into this event by using the requestEnd method of the Kendo UI Datasource object that supports your grid and bind the saved record to your edit window (as long as you have a reference to it).

var ds = new kendo.data.DataSource({
  // ...
  requestEnd: function (e) {
    kendo.bind(editWindow, e.response);  // bind the returned data to your edit window
  }
});
0
votes

The understanding of the kendo ui structure (which can be tedious at times) is important to getting anything done with it. The closing of the popup that allows inserting is done in the dataBinding event. Therefore, that is the place we need to prevent it from:

        $("#yourgrid").kendoGrid({
        dataSource: yourDataSource,
        columns: [
            { field: "YouColumn", title: "YourTitle", ... },
            ...
            ]
            .
            .
            .               
        editable: "popup",
        dataBinding: function(e){
            //this is the key to keeping the popup open
            e.preventDefault();
        },
        save: function (e) {
           //whatever you need to do here
        }
        .
        .
        .
    });

Hope this helps someone.

//Houdini