ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: omerix on November 21, 2023, 09:55:22 pm

Title: select2 integration
Post by: omerix on November 21, 2023, 09:55:22 pm

Hello,

I am using the Select2 library (select2.org) for its features such as searching, tagging, remote data sets, and infinite scrolling. Particularly, when using "remote data," the "infinite scrolling" feature and the ability to mark values in the option and see "labels" in the view make data entry easier.

Currently, I am using Select2 with the following HTML and script codes:

Html Code:

Code: [Select]

<select name='acCode' id='acCode' class='form-select select2ara ' multiple data-tag='true' data-po='accuntList' data-selected='a,b,c'></select>

<select name="hid" id="hid" class="form-select select2">
    <option value=""></option>
    <option value="31">Ahmet</option>
    <option value="30">Ömer</option>
</select>




Script Code:

Code: [Select]

// select2 remote data
function initSelect2Ara(element) {
    let selectedValue = String(element.data('selected') || '');
    let selectedValues = selectedValue ? selectedValue.split(',') : [];
    let po = element.data('po');
    let rtip = element.data('rtip');

    element.select2({
        theme: "bootstrap-5",
        cache: true,
        data: selectedValues.map(function (value) {
            return { id: value.trim(), text: value.trim(), selected: true };
        }),
        minimumInputLength: 1,
        ajax: {
            url: "/search.asp?p=s2",
            dataType: 'json',
            delay: 25,
            data: function (params) {
                return {
                    po: po,
                    rtip: rtip,
                    q: params.term,
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 50) < data.total_count
                    }
                };
            }
        }
    });
}

// select2 local data
function initSelect2Multi(element) {
    let selectedValue = String(element.data('selected') || '');
    let selectedValues = selectedValue ? selectedValue.split(',') : [];

    element.select2({
        theme: "bootstrap-5",
        cache: true,
        data: selectedValues.map(function (value) {
            return { id: value.trim(), text: value.trim(), selected: true };
        }),
        allowClear: true
    });
}

$(document).ready(function () {
    $(".select2").each(function () {
        initSelect2Multi($(this));
    });

    $(".select2ara").each(function () {
        initSelect2Ara($(this));
    });
});


Now, I need your help on how to integrate this Select2 integration into ParamQuery Grid 9. Do you have any suggestions on how to use the colModel and editor options for this integration?

I've looked into the ParamQuery Grid 9 API documentation https://paramquery.com/pro/api#option-column-editor (https://paramquery.com/pro/api#option-column-editor), but I'm struggling to understand exactly how to get started. Thanks in advance for your assistance!

Title: Re: select2 integration
Post by: paramvir on November 23, 2023, 04:26:46 pm

column.editor.init callback is used to create custom editors.

In this example you would find various ways to create custom editors: https://paramquery.com/pro/demos/editing_custom