Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

j-DataGrid filters #183

Open
rakucmr opened this issue Jan 11, 2023 · 3 comments
Open

j-DataGrid filters #183

rakucmr opened this issue Jan 11, 2023 · 3 comments

Comments

@rakucmr
Copy link

rakucmr commented Jan 11, 2023

Hello,

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

@petersirka
Copy link
Collaborator

petersirka commented Jan 11, 2023

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
Copy link
Author

rakucmr commented Jan 11, 2023

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
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants