Editable in ListView

I wanted to show the list of rows using ListView for the user accessing my system from mobile phone. GridView, altough set using bootsrap responsive will make it difficult for mobile users to read.

However, I cannot use Editable from kartik Editable library for the item view. Problem is Editable popup is shown in the first itemview, altough clicked on the other items. Anyone can help?

Or can anyone can give other altenative for editable like in list view?

if check in the chrome inspection,

'hasEditable' => '1'
'ProductPrice' => [
    'price' => '100000'
]
'editableKey' => '5'
'editableIndex' => '0'
'editableAttribute' => 'price'

above is the call from Editable in ListView

below is the call from GridView (EditableColumn class)

'hasEditable' => '1'
'editableIndex' => '6'
'editableKey' => '16'
'editableAttribute' => 'name'
'ProductPrice' => [
    6 => [
        'name' => 'PTL 21'
    ]
]

Two differences,

  1. I got the editableIndex is 0 although I already pass the index from the ListView called

    ‘itemView’ => function ($model, $key, $index, $widget) {
    return $this->render(’_list_item_view’, [‘model’ => $model, ‘index’ => $index]);
    },

  2. I see the ProductPrice index in GridView (EditableCOlumn in in an array while in ListView (Editable) is not.

Related to 1, somehow it is working now. I can get the $index.

I can manage to make the gridview working now by adding id in the option.

'options' => ['class' => 'form-control', 'id' => "productprice_price_{$index}"],

But still I have problem with the processing in saving the changes.