#inline edit

[uxuigifs]

Inline edit

By Alex Lauderdale

[prettyscripts]

Yii2: GridView inline editing with Editable Column

Yii2: GridView inline editing with Editable Column #yii2 #webdevelopment

Inline editing provides a quicker way to update data without navigating away from the page. However the built-in GridView does not provide this capability. Thankfully there are 3rd party solutions. One that I use is Krajee’s GridView which has Editable Column to serve this purpose.

There’s a tutorial on setting up the grid to allow inline editing.

Here are some coding templates that I often use.

View On WordPress

[wikitrainings]

Standard List Controllers, Inline Edit and Passing Parameters in Visualforce

[tyln-blog]

Inline edit with Jquery

I need an inline edit option for one of my projects. I searched about inline edit with jquery on web and found a useful java script code for inline edit.

Go to code homepage

It's a useful code and a great tutorial about inline edit. But it's not useful enough for my project. I need to save edited text area to my sql database. Let's take a look how to save it to sql database;

$(function(){

    $('.editable').inlineEdit({control: 'textarea',cancelOnBlur: true, buttons: '<button class="save">Kaydet</button>', save: function(e, data) {

      $.post(

'edit.php',

{msgid: this.id,data:data.value},

function(data){

if(data==no)

alert('Error!');

}

);

 }});

});

First we use editable class for inline edit and add some options to inline edit class. I have a text area to edit so i used control:textarea.

Also it's a good visual feature cancel editing when user clicks out of textarea. So i used cancelOnBlur: true.

And added a button which saves changes. buttons: '<button class="save">Save</button>'

Now its the important part. İf you take a look to inline.js which you'll download the page i linked above we have some events. Ex. save,get,cancel. We have to write a function to save event which will save data to sql.

We send id and data to edit.php (we coded before) which edits sql and saves data to sql.

We have to send two variables. First msgid and second data.value. We know how to use ajax post method (i explained it in my ajax login post) 

Finally we need to process the data we'll get result of sql operations. Example: if sql operation is successful we give an output echo 'yes' or echo 'no'

We have a function(data) to process data. If data==no we give an error with javascript.

You see it's easy to edit inline and save it to sql.

Thanks for great inline edit js to yelotofu. 

tyln