Combo box in datatable populated from server

edited August 27 in Technical questions

I'm trying to set a datatable cell to be a combo box which get's populated from server-side.
On page load the the combo box should display the current value and the user should be able to modify the value by selecting another value from the combo box. Please find a simplified version of the code here: https://snippet.webix.com/pjbsl4i6

The api api_tc_supplier returns a json representation of a database table with the columns id, supplier, supplier_code and a few more.

I'm using webix in combination with Django.
I defined the function data as follows:

def data(request):
    # get all data
    if request.method == 'GET':
        silis = db_models.TcSili.objects.all();
        data = [{
            'supplier': sili.tc_supplier.supplier, 
            'line_item': sili.line_item,
            'cost': sili.cost, 'vat': sili.vat,
            'start_date': sili.start_date,
            'end_date': sili.end_date,
            'payment_period_months': sili.payment_period_months,
            'ruleset_name': sili.tc_ruleset.name,
            'is_one_off_cost_yn': sili.is_one_off_cost_yn,
            'is_deleted_yn': sili.is_deleted_yn
        } for sili in silis]
        return JsonResponse(data, safe=False)

This functions get's called by table1 in the above example.

The current version populates the combo box correctly on page load and displays the available options on expansion of the box. But after selecting an entry the datatable cell shows the id rather than the chosen value.

Could someone advice on the common way of loading combo box options from the server and how one would save the changes?
Many thanks!

Comments

  • edited August 27

    Hello @534h144k,

    Could someone advice on the common way of loading combo box options from the server and how one would save the changes?

    Generally, the best practice of loading combo options includes specifying them directly in the configuration object of a given column. In the case of a server-side list of options, you can point the options property to an external source of data, in your case that would be a URL with the path to the data.

    Having an external data source for the column options makes it possible to write a custom template function that will always display the item name instead of its id (after the selection has been done in the dropdown).

    Please take a look at the following example: https://snippet.webix.com/qw6fiuqw. Alternative example using a URL: https://snippet.webix.com/8hl63vv1 (note that the options property can point to a URL that is different to the one used as the main data source, this is simply an example).

  • Hello @Dzmitry ,

    Thank you for your detailed response! This does work for a combobox within datatable cell.
    I realised the behaviour is different when trying to build a multiview with a datatable and a form.For a combo box in the i had to define the form element as

    {
        view: "combo", label: "Supplier", name: "tc_supplier", labelWidth: 150,
        options: {
            body: {
                template: "#supplier_name#",
                url: "{% url 'api_tc_supplier-list' %}"
            }
        }
    },
    .

    Very important was the matching of the datatable column id matching the name of the form field (tc_supplier). In my case the api returns {id:<int>, tc_supplier:<the foreign key>, supplier_name:<a string representation of the foreign key object>.

    Is there a page which describes which input the different editors expect and which layout of the data?

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!