I've created custom module and added category selector in admin form. its work perfect and save values as well. but the problem is its not look like default category selector. I guess css is missing.

see screenshot of category selector of my module.

enter image description here

Here is screenshot of magento default selector.

enter image description here

Does anyone found this type of issue?

  • Update question with code which you used for category dropdown – Prince Patel May 20 '17 at 7:39
  • 1
    @PrincePatel see code here github.com/kul3101/Category-Selector/tree/master/Test/Category/… – Kul May 22 '17 at 15:21
  • I have a feeling that you get a different view because the core uses ui-components and you build the form in php. But you can try to add in Test/Category/view/adminhtml/layout/test_category_category_edit.xml this <update handle="styles"/> at the top of the file, right inside the <page> tag. – Marius Jun 13 '17 at 8:11
  • @Marius Thanks. Its applied some css but still layout is broken for selector. – Kul Jun 14 '17 at 6:05
  • @Kul Have you found the soluntion of category tree css ? – Dinesh Yadav Aug 2 '17 at 6:27

add this code in your ui component form xml

<field name="parent">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Parent Category</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">data.parent</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">false</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
| improve this answer | |
  • I've not used Ui form you can see module code is also there on github – Kul Jun 7 '17 at 11:39

You need to define your selector as Ui component, because "category selector" official name is "Ui Select component".

You can take a look into this question (also answered by myself) Customise a custom product attribute input renderer in Magento 2 the right way

My advise for this is extend the ui-select to something like category-selectors, create your own knockout template...etc

For more information, take a look into this: http://devdocs.magento.com/guides/v2.0/ui-components/ui-secondary-uiselect.html

| improve this answer | |

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.