j-DataGrid filters

[rakucmr]

Hello,

Is there a way to use j-Rules and j-DatePicker, j-TimePicker and j-Directory on filters?

[petersirka]

Hi @rakucmr, only j-Directory is implemented there:

• https://componentator.com/components/j-datagrid/ --> example and click on the Public filter

• j-Rules could be used as an additional filter (it's possible using it outside of datagrid component)

• j-DatePicker would be implemented by us (I'll create issue for our team and we will implement it next week)

• j-TimerPicker is not possible to implement because the time type doesn't exist, so you can filter it as a string/number or a real date object

Thank you

[rakucmr]

Thanks, also maybe is a good idea to set type of inputs according with data type for these data types: number, email, phone or url. Is there a way to filter on server side not in client side when a filter is changed, do you have an example?

[petersirka]

It will work with jComponent v19 only.

Put this to your start HTML file:

<ui-component name="errorhandler"></ui-component>
<ui-component name="locale"></ui-component>

I recommend separating the parts into separate HTML files. For rendering, you can use the 'page' component (we can prepare an example with the help of the Total.js framework - since you need a backend for this scenario).

Grid implementation:

<ui-plugin path="pageproducts">

    <ui-component name="datagrid" path="?.grid" config="margin:60;height:300;exec:?/filter;noborder:1;checked:?.checked" class="invisible">
        <script type="text/plain">
            [
                { name: 'id', text: 'ID', width: 120, hide: true },
                { name: 'statusid', text: 'Status', width: 150 },
                { name: 'name', text: 'Name', width: 200 },
                { name: 'price', text: 'Price', width: 120, type: 'number' },
                { name: 'dtcreated', text: 'Created', align: 1, format: '[ts]', type: 'date' },
            ]
        </script>
    </ui-component>

</ui-plugin>

<script>

    PLUGIN('pageproducts', function(exports) {

        exports.refresh = function(el) {
            exports.nul('grid');
        };

        exports.filter = function(type, filter, sort, page) {

            if (!filter)
                filter = {};

            filter.sort = sort;
            filter.page = page;

            exports.ajax(QUERIFY('GET /endpoint/', filter) + ' @showloading ERROR', function(response) {
                exports.set('grid @hideloading', response, type === 'refresh' ? 'noscroll' : null);
            });

        };

    });
</script>

Datagrid will automatically run the filter method when it is rendered. Then if you want to reload the datagrid, you call the 'refresh()' method.