Skip to main content

In-Place editing with X-Editable using Datatable plugin

Introduction
In-place editing is a trending feature that can be seen in many latest web applications, a popular example would be trello.com where the editing data happens on the web page without any explicit forms or popups. Another such example I could point out is, thoughtplan.com. The in-place editing is very nice in such a way that editing data seems so natural and user friendly.

To enable in-place editing, there are many free JQuery plugins available on the internet. We are discussing a very popular plugin called x-editable. Most of the time we use html tables to display data where in-place editing is enabled. Hence we need another plugin to elegantly display tables with enormous data. We use a famous JQuery plugin called datatable. Both of these plugins are used widely and free to use.

Assumption      : Bootstrap 3, JQuery used Projects

Integration
In order to enable datatable features on any ordinary table found on web page, we should initialise datatable plugin for that table. It's simply a call on the id or class selector of the table. x-editable plugin can be initialized on each field on any table that requires in-place editing. The initialization of x-editable plugin is same as datatable plugin, i.e, id or class selector of the field should be initialized with x-editable plugin. With that you are good to go in-place editing on datatable.

Challenges
One of the many features provided by datatable is pagination. While we integrate x-editable plugin with datatable, often we forget to see how the plugin works on the rows that are hidden by the datatable pagination feature. Hence the in-place editing is not working on the paginated rows or in other words, the rows in the next page. To mitiage such issues, we will need to use the datatable plugin features or api to initialize the in-place editing on all rows hidden by pagination.

Solution
What we proposed to solve this issue is to use drawCallback function option on the datatable object so when each row is drawn, we can decide what should be done with the rows. In this case, we are trying to initialise x-editable plugin on all editable items/fields in all the rows of the datatable. Below is the drawCallback function used for this purpose on datatable object. You can see how the x-editable plugin is initialised on all editable items of all rows. We have used class name selector for the editable field/column.

Code Snippets
$('#CVUsers').DataTable({
                "pagingType": "simple",
                drawCallback: function(settings){
                          var api = this.api();
                          var csrfHeader = $("meta[name='_csrf_header']").attr("content");
                          var csrfToken = $("meta[name='_csrf']").attr("content");

                          $('.editable-action', api.table().body())
                             .editable({
                                         type : 'select',
                                         source : MAKINUSCV.baseURL + '/admin/user/list/action.mk',
                                         url : MAKINUSCV.baseURL + '/admin/user/list/do/action.mk',
                                         ajaxOptions: {
                                             beforeSend: function (xhr){ xhr.setRequestHeader(csrfHeader, csrfToken); }
                                         },
                                         success : function(response, newValue) {
                                          if (response.status == 'error')
                                           return response.msg;
                                         }
                             }).on('hidden', function(e, reason) {
                                   if(reason === 'save') {
                                       api.rows().invalidate('dom').draw();
                                   }
                             });
                },
                responsive: {
                       details: {
                          display: $.fn.dataTable.Responsive.display.childRowImmediate,
                          type: ''
                       }
                }
 });

The above solves two issues inherent on in-place editing with datatable. First, all rows on all pages are enabled with x-editable feature, and secondly, datatable dom is updated hence the sorting or search can find the updated data after editing.

Comments

Post a Comment

Popular posts from this blog

CSRF enabled Ajax requests using Spring Security

Many of you who have worked on Spring Security might be aware of the fact that Spring Security protects applications from Cross Site Request Forgery using _csrf tokens in the request sent to the web server. You can find a detailed understanding in the Spring documentation page. The objective of this post is to explain how to send _csrf tokens in the Ajax requests when we protect our application URL and application access using spring security.

How to get CSRF tokens
While we submit a form using an application that is protected with Spring Security, the form gets a default hidden parameter in the form body when using <form:form> element. The param contains the _csrf tokens to authenticate the requests in the server. In case we use other ways to create forms, we have to manually include a hidden parameter that contains name as ${_csrf.parameterName} and  value as ${_csrf.token}. For example,
<inputtype="hidden"name="${_csrf.parameterName}"value="${_csrf…

Thymeleaf th:remove vs th:if Processors

Interestingly Makinus team encountered a scenario where the team has to choose between th:remove and th:if processors. The situation is like this. Makinus team worked on a project and the team lead suggested to go with #Thymeleaf template instead of decades old JSP. Hence it adopted Thymeleaf and Thymelead Layout framework to do layout-ing.

Thymeleaf Layout
Thymeleaf layout is a framework that helps doing the layout work just as tiles framework does it using JSP technology. The framework has 5 processors, important of which is layout:decorate. The processor layout:decorate works in the layout-content template model where the content template is a small piece of template that replaces content part of the layout template. This works as if parent/child templating mode where parent will define layout format while the child template replaces only the specified content portions.

Head Element Merging Strategy
Thymeleaf layout uses a special strategy to merge parent and child template <head…