Question

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>

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top