Add new record when using custom form

[Gary]

I have a grid with the "Add new record" button in the toolbar, which is created via the toolbar: ["create"] configuration, and I am using a custom form on the page for adding and editing records from the grid.

How can I wireup the event handled for the "Add new record" button so that it establishes a new row in my datasource?

And (I'm using a view model), how can I get that new row to set it in the view model used by the form?

I tried the following in the grid configuration:

edit: function (e) {
    if (e.model.isNew()) {
        var model = this.dataSource.reader.model();
        this.dataSource.add(model);
        viewModel.set("selected", model);
    }
}

However, the edit event doesn't seem to be getting fired when I click the "Add new record" in the grid toolbar.

Thank you for your assistance.

Gary

[Gary]

I believe the answer to my first question is that the grid widget does not wire up the "Add new record" button unless you are using the grid built-in editing features. Therefore, i have connected it to an event handler manually, and all is good.

I am still stuck on the second section, and would like to expand on it...

I am not sure what is the proper process for adding a new record to a grid backed by a datasource when using a custom form and a view model.

Q1: Should the record be added to the datasource immediately when "Add new record" is clicked or only after validation when the "Save" button is clicked?


Q2: How can I get the model used by a dataSource (this.dataSource.reader.model() is returning undefined on the model() method call)?

Thanks,
Gary

[Alexander Popov]

Hi Gary,

I would recommend using a custom toolbar template to render a button. Once the button is clicked you could get the data from the form and pass it to the Grid's dataSource.add (or insert) method.

Regards,
Alexander Popov
Telerik

 

 

[Gary]

Thanks, but I'm not sure how your answer addressed either of my questions. Let me try and explain better.

1. What is the proper way to handle adding a new record to page consisting of a datasource, grid, and custom form?

a) Add the empty record to the datasource, edit it in the form, and update the changes on form save.
b) Add an empty row to the grid, initiate editing of the row.
c) Create an empty model representation in the view model, and then add the completed model as a new record in the datasource on form save.

2. How can I obtain an empty model definition from the datasource for the purposes of creating a new record?

- I tried var model = dataSource.add({}); but this causes each property to be read as [object Object] when bound to the custom form from the view model. I am trying to avoid having to manually define each property initialized to an empty value, since I know the datasource must have this information. Plus, I see that addRow in kendo.grid.js uses this approach, albeit with insert instead of add.

Thanks in advance for your insight.

[Alexander Popov]

Thanks for the clarification Gary. Although I am still not entirely sure what the exact scenario is and where the viewModel comes into play, I will try to answer your questions.

1. What is the proper way to handle adding a new record to page consisting of a datasource, grid, and custom form?
   1. That is a bit vague, but I assume the form fields should be added as a new Grid item. In case the form will be used only for adding and not editing, then I would suggest the same approach as I mentioned in my previous reply - create a button that calls the Grid's DataSource insert method and pass the value of the form fields as parameters. 
   2. If the form should be used both for adding and updating items, then I would recommend making the Grid rows selectable and binding the currently selected row to the form. For convenience I prepared a small example illustrating how this behavior could be achieved.
2. How can I obtain an empty model definition from the datasource for the purposes of creating a new record?
   1. Both add and insert methods return an observable object having the same properties as the DataSource's model. If that observable is later bound to a form and read as [object Object], then the form is not configured to work with this model. Could you please share a runnable sample where the issue is reproduced? This would help us identify what is causing this behavior and advise you further.

Regards,
Alexander Popov
Telerik