editable selection from options

[jihadismail8]

anybody have an idea of how to make the editable column by only selecting an options ?? the user would click on the cell and be able to select an option from the dropdown .

[ValulifeAndy]

I am Trying to Work out the same thing. I Believe you could edit the view that is placed in resources/views/datatables/editable.bladephp to include a select, and pass the array of options to that view from the datatables class.

This functionality isnt included but would be an amazing addition.

[Zsolt148]

Could you guys do it ?

[gqsnt]

I did this for foreign Key of a model here is an example for model/table MyModel/myModel by using foreign key user_id Column :

Column::callback(["myModel.id", "users.id", "users.nom"], function ($modelId, $valueId, $valueName) {
    return View::make('select-editable', [
        'rowId' => $modelId,
        'modelName' => "user",
        'nullable' => false,
        'valueId' => $valueId, // myModel.user_id
        'options' => User::All(), // [["id" => , "name" => , ....], ...]
    ]);
})
    ->exportCallback(function ($modelId, $valueId, $valueName) {
        return $valueName;
    })
    ->filterOn('users.name')
    ->filterable(User::pluck('name'))
    ->label('User')
    ->searchable(),

Blade template select-editable:

<div class="flex" x-data="{valueId: {{$valueId}}}">
    <select
        x-ref="select"
        name="{$modelName}_{$rowId}"
        class="w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        wire:input="saveData({{$rowId}}, '{{$modelName}}' , $event.target.value)"
        x-model="valueId"
    >
         @if($nullable)
             <option value=""></option>
         @endif
        @foreach ($options as $option)
            <option data-id="{{$valueId}}" value="{{$option['id']}}">{{$option['name']}}</option>
        @endforeach
    </select>
</div>

livewire callback in your datatable Class :

public function saveData($rowId, $modelName, $value)
    {
        if ($value === "")
            $value = null;         
        MyModel::where('id', $rowId)->update(["{$modelName}_id" => $value]);
    }

[jjmpsp]

I did this for foreign Key of a model here is an example for model/table MyModel/myModel by using foreign key user_id Column :

Column::callback(["myModel.id", "users.id", "users.nom"], function ($modelId, $valueId, $valueName) {
    return View::make('select-editable', [
        'rowId' => $modelId,
        'modelName' => "user",
        'valueId' => $valueId, // myModel.user_id
        'options' => User::All(), // [["id" => , "name" => , ....], ...]
    ]);
})
    ->exportCallback(function ($modelId, $valueId, $valueName) {
        return $valueName;
    })
    ->filterOn('users.name')
    ->filterable(User::pluck('name'))
    ->label('User')
    ->searchable(),

Blade template select-editable:

<div class="flex" x-data="{valueId: {{$valueId}}}">
    <select
        x-ref="select"
        name="{$modelName}_{$rowId}"
        class="w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        wire:input="saveData({{$rowId}}, '{{$modelName}}' , $event.target.value)"
        x-model="valueId"
    >
        <option value=""></option>
        @foreach ($options as $option)
            <option data-id="{{$valueId}}" value="{{$option['id']}}">{{$option['name']}}</option>
        @endforeach
    </select>
</div>

livewire callback in your datatable Class :

public function saveData($rowId, $modelName, $value)
    {
        if ($value === "")
            $value = null;         
        MyModel::where('id', $rowId)->update(["{$modelName}_id" => $value]);
    }

This is a genius solution. @marksalmon I feel like this should be in the official documentation.

[sha-hin]

I did this for foreign Key of a model here is an example for model/table MyModel/myModel by using foreign key user_id Column :

Column::callback(["myModel.id", "users.id", "users.nom"], function ($modelId, $valueId, $valueName) {
    return View::make('select-editable', [
        'rowId' => $modelId,
        'modelName' => "user",
        'nullable' => false,
        'valueId' => $valueId, // myModel.user_id
        'options' => User::All(), // [["id" => , "name" => , ....], ...]
    ]);
})
    ->exportCallback(function ($modelId, $valueId, $valueName) {
        return $valueName;
    })
    ->filterOn('users.name')
    ->filterable(User::pluck('name'))
    ->label('User')
    ->searchable(),

Blade template select-editable:

<div class="flex" x-data="{valueId: {{$valueId}}}">
    <select
        x-ref="select"
        name="{$modelName}_{$rowId}"
        class="w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        wire:input="saveData({{$rowId}}, '{{$modelName}}' , $event.target.value)"
        x-model="valueId"
    >
         @if($nullable)
             <option value=""></option>
         @endif
        @foreach ($options as $option)
            <option data-id="{{$valueId}}" value="{{$option['id']}}">{{$option['name']}}</option>
        @endforeach
    </select>
</div>

livewire callback in your datatable Class :

public function saveData($rowId, $modelName, $value)
    {
        if ($value === "")
            $value = null;         
        MyModel::where('id', $rowId)->update(["{$modelName}_id" => $value]);
    }

I've tried this, but every time I change the page, it selects the same value of the previous element on the same position, any fix???

[gqsnt]

I did this for foreign Key of a model here is an example for model/table MyModel/myModel by using foreign key user_id Column :

Column::callback(["myModel.id", "users.id", "users.nom"], function ($modelId, $valueId, $valueName) {
    return View::make('select-editable', [
        'rowId' => $modelId,
        'modelName' => "user",
        'nullable' => false,
        'valueId' => $valueId, // myModel.user_id
        'options' => User::All(), // [["id" => , "name" => , ....], ...]
    ]);
})
    ->exportCallback(function ($modelId, $valueId, $valueName) {
        return $valueName;
    })
    ->filterOn('users.name')
    ->filterable(User::pluck('name'))
    ->label('User')
    ->searchable(),

Blade template select-editable:

<div class="flex" x-data="{valueId: {{$valueId}}}">
    <select
        x-ref="select"
        name="{$modelName}_{$rowId}"
        class="w-full m-1 text-sm leading-4 block rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
        wire:input="saveData({{$rowId}}, '{{$modelName}}' , $event.target.value)"
        x-model="valueId"
    >
         @if($nullable)
             <option value=""></option>
         @endif
        @foreach ($options as $option)
            <option data-id="{{$valueId}}" value="{{$option['id']}}">{{$option['name']}}</option>
        @endforeach
    </select>
</div>

livewire callback in your datatable Class :

public function saveData($rowId, $modelName, $value)
    {
        if ($value === "")
            $value = null;         
        MyModel::where('id', $rowId)->update(["{$modelName}_id" => $value]);
    }

I've tried this, but every time I change the page, it selects the same value of the previous element on the same position, any fix???

it seems that it hasn't updated the model, I don't know why with just this info