How to Use UI Grid Component on the Front End in Magento 2

Apr 24, 20182196Denis Natalevich
How to Use UI Grid Component on the Front End in Magento 2

There are plenty examples of such a wonderful UI component as grid on the administrator part of the site. Using grid on the front end allows us to quickly enable paging, sorting and filtering via standard Magento functionality without having to invent something new. However, you will encounter a lack of less, fonts and an ajax data request error for the grid.

It is going to look like this:

1

You can use our UiGrid module to solve this problem quickly. The module is available at github.com.

To use the module, specify the dependency in the file etc/module.xml:

Add CSS on the page with the grid:

Ajax data requests from the admin side go at URL mui/index/render.

This does not suit us, that is why we need to change the URL to your controller in the app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml file:

Inherit the controller from:

Now the grid should look as usual:

2 (1)

In the example, the administrator can manage notes for customers. Customers can view notes and delete them. The examples are available at github.com.

Note that in order for a user to see not all the records, but only his own, you need to create your DataProvider and indicate it in ui_component/{your_route}.xml.

Ui_component: app/code/Vendor/Module/view/frontend/ui_component/{your_route}.xml.

Model

We specify filter conditions in the data provider: app/code/Vendor/Module/Model/DataProvider.php.

Done. Now we have a full grid from the front end, in which a customer can see only his own notes:

3
That is it concerning UI grid component in Magento 2, we hope you will easily implement the article’s material into your Magento 2 development process.



15 Comments

  1. But it is not running :( Your module from github, no possibility to add note in admin and I can’t check frontend, because probably you didn’t add link into customer account. When I tried your css in my own module, I go error: Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’: Cannot access rules” . Without yours css, knockout works but looks bad :(

  2. Thank you for your comment.
    The table in the admin panel is just an example so that a programmer could compare how it is done on the admin panel and on the front. You can add entries to the database or write functionality in Magento.

    Regarding your second question. The front does not work, the “failed to read the CssRules property from CSSStyleSheet Can not access the rule” error is displayed. If you google, you can see that this is an issue with the Chrome browser, and maybe with one of its extensions. The point is that it’s not a Magento’s problem.

    All the abovementioned was tested on Magento 2.2.3.

  3. I have used above solution and now grid is available on frontend. I have one requirement where i need to add checkbox column in grid so user can select it and save that. I have added column and now column is there.
    I have two questions. One is that how can i put this grid in form, So on submit of form I can get selected rows and another oneis that how can I set selected rows in grid by customer on edit of this form ?
    Please help me.
    Thanks in advance…

  4. Hi Ajay,
    It depends on your code and can take much more time for explanation than implementation. To cut a long story short you are to create the whole form with UI component, not only the grid itself. Also, you need to create your own data provider with grid predefined values to mark required checkboxes.
    The module allows using UI COmponents the same way as you do in the admin panel, please check the official documentation https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html

  5. ok Thank you for reply.
    I have resolved that issue.

    now I am facing one more issue with grid. On frontend admin-icons.woff2 , admin-icons.woff, admin-icons.ttf file is missing.
    How can i add them ?

  6. I can confirm that admin’s grid works on frontend (on user’s pages).

    But grid alone is virtually useless. There is a great need for adding, editing and deleting functionality.

    Alas, it is impossible in frontend to use admin’s adding, editing and deleting layouts – they are relying on adminhtml area’s components.

    So, in all, this article is a cute but unpractical piece of programming work.

    Thank you anyway.

  7. Dear Denis,

    I’m currently using your module to use Magento grids in the frontend of my application.

    I have noticed that bookmarks try to save the current state to mui/bookmark/save like the render of the grid did.

    Did you manage to fix this too with your module ? I don’t see any path to bookmarks configuration to let the current save to be saved to another url.

    Furthermore, I was not able to make the columns control to be displayed on the grid, to select only some columns. Did you try this with your module ?

    Thank you in advance for your help.

    Best regards,
    Anthony

  8. My icons files are also missing. So next to the Filter and pager, there is a broken icon. If you have time, please give a hint on how to fix. Thanks!!

  9. It looks like the frontend template is missing from the Github repository (Belvg_Note::menu/belvg_note_note_index.phtml).
    Could you provide that one?

  10. Hi, Maikel! Thanks for your question.
    This is an odd line, and you can delete it or add belvg_note_note_index.phtml template and give a link leading to the page where the record was added.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *