Editable Table: using non-native widgets

Editable Table: using non-native widgets

  

Hi,

When I scaffold the Editable Table widget, it places native widgets inside: Input, ComboBox etc. Normally they are shown as labels and when I click anywhere on the row they become real Input/ ComboBox widgets.

Now I would like to use the SilkUI's widget Select2 to make the dropdown more user-friendly. But in this case the dropdown loses its ability to be displayed as label and becoming th real edit widget only after being clicked: it is active and editable all the time.

Is there any solution of this problem or am I stuck with only native widgets?

Regards

Tomasz


Hi Tomasz,

I had the same problem some time ago and I "fix" it with some css. It's not the best way, but I hope it helps.

Here is my code:

tr:not(.OnEdit) .select2-container .select2-choice {
    border: none;
    box-shadow: none;
    cursor: pointer;
    background-color: transparent;
}

tr:not(.OnEdit) .select2-container .select2-choice span {
    font-weight: normal;
    color: black;
}

tr:not(.OnEdit) .select2-container{
    pointer-events: none;
}

tr:not(.OnEdit) .select2-container .select2-choice .select2-arrow b::after,
tr:not(.OnEdit) .select2-container .select2-choice div b::after{
    content:none !important;
}


My regards,

Samuel

Hi Samuel,

Thank you for your response, this helped a lot! (I am working together with Tomasz).

We encountered one more problem with the EditableTable & Select2. When using Select2 edition icons do not show up underneath the edited row. Do you have any idea how to make it work?

Hi Lukasz,

I am glad I've been able to help you. 

I don't know the reason for your problem that you mention. And I just created an editable table to test and everything works fine. If possible, send me the OML and maybe I can help.

My regards,

Samuel

Hi Samuel,

In attachment you can find example. When you click "add new" edit buttons will show below, but once there is mapping on the list and you click on the select widget connected to select2 you will notice that edition buttons to save/cancel/delete will not pop up.

I know the table is not fully functional (save and delete do not work properly) but it does not affect the example in any way.


EDIT: just to clarify, steps for recreating error:
1. I click 'add new', select controls will show up and I can work on it properly. I click the "check" button that indicates I accept values I've set.

2. I click on the row I just added. When clicking on the field that contains select it works properly and 3 edit buttons show up. Clicking on select2 does not show up these buttons.


Warm regards,

Lukasz Cybula

Hi Lukasz,

Sorry for the late response.

With the CSS that I gave in my first response, when you click on the field that contains a select2 it will show up the control buttons. But, it will not show the combo expanded, it's a problem that I can't solve yet.

Can you tell me if this example works?

My regards,

Samuel

Very nice! I'd only add .EditableTable to the front of each property so it affects only select2 widgets inside an editable table instead of all of them.


Samuel M. wrote:

Hi Tomasz,

I had the same problem some time ago and I "fix" it with some css. It's not the best way, but I hope it helps.

Here is my code:

tr:not(.OnEdit) .select2-container .select2-choice {
    border: none;
    box-shadow: none;
    cursor: pointer;
    background-color: transparent;
}

tr:not(.OnEdit) .select2-container .select2-choice span {
    font-weight: normal;
    color: black;
}

tr:not(.OnEdit) .select2-container{
    pointer-events: none;
}

tr:not(.OnEdit) .select2-container .select2-choice .select2-arrow b::after,
tr:not(.OnEdit) .select2-container .select2-choice div b::after{
    content:none !important;
}


My regards,

Samuel

Sorry for the late reply.

Samuel, you were right from the beginning: your CSS works flawlessly, I was adding some modifications to meet the project needs and I lost the one that turns off pointer events. My bad. Thank you for all your help, we appreciate it. 

On the other side - have you noticed that with select2 widget "cancel" button does not work? (middle x button on the row menu that shows up when you focus the row). User can focus the row, edit the data with picking value from select2 but when he cancels it field does not come back to it's original value.

We are currntly working on something else but we will probably come back to this one. I will post the soluition as soon as we'll find one.

Caio, you are right. It's better add .EditableTable just to affect the editable tables.

Lukasz, you're welcome. I'm very glad I've been able to help. Yes, I noticed the same thing... I can try to find a way to fix that... don't know if possible.

My regards

Samuel