0

I am doing rendering students to magento admin page using ui-component after this course

https://www.youtube.com/watch?v=qeIjXiAI5JY&index=3&list=PL98CDCbI3TNvvb0SvN_M35IToppFCHGg3.
And its working. But for some reason, it render in the wrong position, even when i set the sortOrder for theme. enter image description here

Like you can see, my Age and Choose Column is render in the last position.And also, my Filter and Search is not working.

Here is my code.

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">students_listing.students_listing_data_source</item>
        </item>
    </argument>
    <settings>
        <buttons>
            <button name="add">
                <url path="*/*/add"/>
                <class>primary</class>
                <label translate="true">Add New Students</label>
            </button>
        </buttons>
        <spinner>students_columns</spinner>
        <deps>
            <dep>students_listing.students_listing_data_source</dep>
        </deps>
    </settings>
    <dataSource name="students_listing_data_source" component="Magento_Ui/js/grid/provider">
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <aclResource>Fudu_HelloWorld::students</aclResource>
        <dataProvider class="Fudu\HelloWorld\Ui\Component\DataProvider" name="students_listing_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <listingToolbar name="listing_top">
        <settings>
            <sticky>true</sticky>
        </settings>
        <bookmark name="bookmarks"/>
        <columnsControls name="columns_controls"/>
        <filterSearch name="fulltext"/>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="observers" xsi:type="array">
                    <item name="column" xsi:type="string">column</item>
                </item>
            </argument>
            <settings>
                <templates>
                    <filters>
                        <select>
                            <param name="template" xsi:type="string">ui/grid/filters/elements/ui-select</param>
                            <param name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</param>
                        </select>
                    </filters>
                </templates>
            </settings>
            <filterSelect name="store_id" provider="${ $.parentName }">
                <settings>
                    <captionValue>0</captionValue>
                    <options class="Magento\Cms\Ui\Component\Listing\Column\Cms\Options"/>
                    <label translate="true">Store View</label>
                    <dataScope>store_id</dataScope>
                    <imports>
                        <link name="visible">componentType = column, index = ${ $.index }:visible</link>
                    </imports>
                </settings>
            </filterSelect>
        </filters>
        <massaction name="listing_massaction">
            <action name="delete">
                <settings>
                    <confirm>
                        <message translate="true">Are you sure to delete selected student?</message>
                        <title translate="true">Delete student</title>
                    </confirm>
                    <url path="students/student/massDelete"/>
                    <type>delete</type>
                    <label translate="true">Delete</label>
            </settings>
        </action>
        <action name="edit">
            <settings>
                <callback>
                    <target>editSelected</target>
                    <provider>students_listing.students_listing.students_columns_editor</provider>
                </callback>
                <type>edit</type>
                <label translate="true">Edit</label>
            </settings>
        </action>
    </massaction>
    <paging name="listing_paging"/>
</listingToolbar>

<columns name="students_columns">
    <!--xoá class="Magento\Customer\Ui\Component\Listing\Columns" ở columns đi để ko hiện những cột thừa-->
    <settings>
        <editorConfig>
            <param name="clientConfig" xsi:type="array">
                <item name="saveUrl" xsi:type="url" path="students/student/inlineEdit"/>
                <item name="validateBeforeSave" xsi:type="boolean">false</item>
            </param>
            <param name="indexField" xsi:type="string">id</param>
            <param name="enabled" xsi:type="boolean">true</param>
            <param name="selectProvider" xsi:type="string">students_listing.students_listing.students_columns.ids</param>
        </editorConfig>
        <childDefaults>
            <param name="fieldAction" xsi:type="array">
                <item name="provider" xsi:type="string">students_listing.students_listing.students_columns_editor</item>
                <item name="target" xsi:type="string">startEdit</item>
                <item name="params" xsi:type="array">
                    <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                    <item name="1" xsi:type="boolean">true</item>
                </item>
            </param>
        </childDefaults>
    </settings>

    <selectionsColumn name="ids">
        <settings>
            <indexField>page_id</indexField>
            <resizeEnabled>false</resizeEnabled>
            <resizeDefaultWidth>55</resizeDefaultWidth>
        </settings>
    </selectionsColumn>
    <column name="id">
        <settings>
            <filter>textRange</filter>
            <label translate="true">ID</label>
            <sorting>asc</sorting>
        </settings>
    </column>
    <column name="name">
        <settings>
            <filter>text</filter>
            <label translate="true">Name</label>
        </settings>
    </column>
    <column name="class_id">
        <settings>
            <filter>text</filter>
            <label translate="true">Class</label>
        </settings>
    </column>
    <column name="gender">
        <settings>
            <filter>text</filter>
            <editor>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Gender</label>
        </settings>
    </column>
    <column name="age">
        <settings>
            <filter>text</filter>
            <editor>
                <editorType>text</editorType>
            </editor>
            <label translate="true">Age</label>
        </settings>
    </column>
    <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
        <settings>
            <filter>dateRange</filter>
            <dataType>date</dataType>
            <label translate="true">Created At</label>
        </settings>
    </column>

    <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
        <settings>
            <filter>dateRange</filter>
            <dataType>date</dataType>
            <label translate="true">Updated At</label>
        </settings>
    </column>

    <actionsColumn name="actions" class="Fudu\HelloWorld\Ui\Component\Listing\Column\StudentActions">
        <settings>
            <indexField>id</indexField>
            <resizeEnabled>false</resizeEnabled>
            <resizeDefaultWidth>107</resizeDefaultWidth>
        </settings>
    </actionsColumn>
</columns>

1

Add sortOrder="40" for sorting column. For example


<column name="name" sortOrder="40">
    <settings>
        <filter>text</filter>
        <label translate="true">Name</label>
    </settings>
</column>

Now truncate ui_bookmark table and clear cache.

Check here how magento default module use this

  • I dont understand the truncate ui_bookmark part. I already use sortOrder like i said in the post, and clear cache also, but it doesn't work at all. – fudu Jul 28 '18 at 6:16
  • Ah i understand now, thanks for the advice. Its work perfectly. I only need to truncate table "ui_bookmark" in database and clear cache. – fudu Jul 28 '18 at 6:31
  • But do you know where is the search and filter go to in my ui component? I'm looking for the controller or something like that which using to execute the search or filter – fudu Jul 28 '18 at 6:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.