Grid popup editor saving data not bound to grid

[Alan]

I have a scenario where I am using the popup editor and a custom template to edit items in the grid. The template has all of the fields that are part of the datasource that is bound to the grid as well as some additional fields that are not a part of the datasource. In order to submit the extra data, I am doing the following:

1. Setting data-skip=true attribute on the elements that are not bound to to the datasource to prevent binding. For example:

  <input type="radio"name="radio_test_a"id="radio_test1"value="1"data-skip="true"checked>Yes
  <input type="radio"name="radio_test_a"id="radio_test2"value="0"data-skip="true">No

2. In my update function I am getting the extra data and adding it to the ajax data parameter along with the model. For example:

update: function(options) {
                    var roles_obj={};
                    $('#extra_data input[type=radio]').each(function(){
                        if($(this).is(":checked")){
                            roles_obj[$(this).attr('name')]=$(this).val();
                        }
                    });
                    $.ajax({
                        url: "api/users/update",
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            id: kendo.stringify(options.data.id),
                            data: JSON.stringify({
                                model: options.data,
                                roles: roles_obj
                            })
                        },
                        success: function (result) {
                            options.success(result);
                        }
                        //remainder omitted for brevity

3. In the grid edit function, setting the model 'dirty' when the non-data bound fields are changed to ensure the update function is triggered. For example:

 $('#extra_data input[type=radio]').change(function() {
                var ds = grid.dataSource;
                var item = ds.getByUid(e.model.uid);
                item.dirty = true;
            })

My question is this: While the above works and allow me to submit the extra data that is not part of the datasource, I am asking if this solution is tenable or if there is another approach that would be recommended?

Please let me know if further information is needed if it is not clear what I am asking.

[Alex Hajigeorgieva]

Hi, Alan,

Thank you for the provided snippets.

The additional parameters can be sent to the remote service in different ways - the built in option is with transport.update.data, when the transport operations are configured as an object not a function.

However, I have a question for the scenario specifics - if these external properties to the data source need to be updated and if they are going to the same endpoint, then why are they not kept as part of the model?

And also, I am uncertain about the "data-skip" attribute - if you are able to prevent binding with those attributes, then that suggests the fields are part of the model. In this case, it would not be necessary to listen for the change event or send additional data. This is the statement that I would like to hear more about:

Setting data-skip=true attribute on the elements that are not bound to to the datasource to prevent binding.

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Alan]

Alex,

Thanks for the response.

To answer the first question 'if these external properties to the data source need to be updated and if they are going to the same endpoint, then why are they not kept as part of the model?'; it is because we were trying to dynamically insert content into the template, radio buttons with pre-checked values for example. The radio buttons labels were stored as values in a table and we were trying to avoid having to hard code the elements in our editor template (and the sql query) as these values can change when/if new rows are added/edited to the table. I think we'll have to put/keep these external properties in our model or so something similar as I described above and pass the additional properties via the ajax update function or the transport.update.data option as you mentioned.

 

As for the 'data-skip' attribute, we had to add this to the external elements (radio buttons for example) so that these input elements would not receive the data-bind="value:name_of element". When the data-bind attribute was added, the radio buttons would not display as checked if that's how they were added to the template - all values were unselected. Adding the data-skip attribute allowed for the radio buttons to keep their checked status. I created a simple dojo example to illustrate.

https://dojo.telerik.com/@alanwhurt/akEpuTAr/3

If you edit a record, you can see that one radio button input displays 'Yes' as selected and one does not; both have the 'checked' attribute.The first element is getting the data-bind attribute added and since the element name is not part of the model, it just displays the control as not checked.

If you would want more detailed information on the model aspect and why some data is external to the model, please let me know and I can try to provide screenshots and back-end table information if possible; but I think we're probably looking at something similar to the scenario I have described.

Thanks!

 

 

[Alex Hajigeorgieva]

Hi, Alan,

Thank you for the explanation and the provided Dojo to illustrate the functionality resulting from the usage of the data-skip attribute. I found out that it is used in kendo.editable.js which is an internal widget and it is so rare that there was a single direct usage of it in our codebase. Now I understand what is does - it does not decorate the element with data-bind="checked:radio_test_b" which when not found in the model would be null and that results in an unchecked radio.

You could utilize the schema model fields to assign default values for these properties which are used when the item is created, or the beforeEdit handler:

beforeEdit: function(e){
    e.model.radio_test_a = 1; 
}

Let me know in case you have further questions.

Regards,
Alex Hajigeorgieva
Progress Telerik