Custom editor

Custom editor

jalapejalape Posts: 117Questions: 2Answers: 1

Good afternoon
I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
The field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
I would appreciate any surgency.
A greeting.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @jalape ,

    I'm not sure what you're after, but search() can be used to filter the table.

    Hope that helps,

    Cheers,

    Colin

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited November 2018

    Hi Colin,
    Thanks for your interest. I think the most common way to create a filter field from a text input is:

    $('#myInput').on( 'keyup', function () {
    variable_tabla_datatable.search( this.value ).draw();
    } );

    This filters one or more columns in a table.
    In my case, I want to filter a field, inside the editor box, created from the property:

    template: '#customForm',
    I have created the following div:

    Palabras Clave:

    And it's the field I want to filter is:
    <editor-field name = "tb_palabra []. id"> </ editor-field>
    In the screenshot of the image appears as "Keywords". It is a word verification field to activate. The problem is that it is very large and without a filter it is difficult to find the one that is needed.

    Thank you

  • jalapejalape Posts: 117Questions: 2Answers: 1
    Palabras Clave:
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Hi,

    That ability is not a feature of the field types that are built into Editor I'm afraid. You would need to create a custom field type plug-in which has that ability if you need it.

    Regards,
    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1

    I have never used the plug-ins, I will look at the information.
    Thank you

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited November 2018

    I think I'm getting closer to the solution, but it still does not work at all. In this way, it filters the set of words in the list, so that, the content of the entry does not coincide with any word, the list disappears. What I can not find is the way to filter, so that they are written on the entry, the list is reduced.
    The problem is that I do not know how to control <editor-field name="tb_palabra[].id"></editor-field> since I can not put an id or a class.

    </fieldset>
    <fieldset class="hr">
        <legend id="leyenda">Palabras Clave: </legend>
        <div id="scrollPalabras">
            <input type="text" id="myInput">
            <div id="palabras">
                **<editor-field name="tb_palabra[].id"></editor-field>**
            </div>  
        </div>
    </fieldset>
    
    
    <script type="text/javascript">
        editor = $('#myInput').on( 'keyup', function () {
    
        var value = $(this).val().toLowerCase();
            $("#palabras").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        } );
    </script>
    

    Thank you

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited November 2018

    It seems that the problem is not the control of the container, but as a datatable it manages the contained list. I have found this another way, but the problem persists. The input: myInput filters as a block, shows the entire list as long as there is a match and disappears completely when there is none. The question is: how does Datatable manage these lists? and how to enter them to filter them?

    <input type="text" id="myInput">
    <span data-editor-template="tb_palabra[].id"></span>
    
    
    <script>
        $('#myInput').on( 'keyup', function () {
                    //$("#palabras").hide();
                    var value = $(this).val().toLowerCase();
            $("span").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        } );
    </script>
    
  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Are you looking for something like this? As I say, Editor doesn't not provide a built in way to allow for filtering of options in a checkbox list. You would need a field-type plug-in to allow for that ability.

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited November 2018

    Hi Allan,
    Thank you very much for your contribution, select2 is a very interesting plug-in. At the following address:
    https://editor.datatables.net/plug-ins/field-type/editor.select2,
    I have found information to adapt it to Datatable. Now it shows me the data and I filter the list correctly, inside the editor box. I even update the data correctly, if they come from a single table.
    The problem is with the data that comes from the union of several SQL tables.
    I have summarized the code with the fields with problems, in both I get an error when editing.
    - In the first case, "Materia" the error is: A system error has occurred (More information). When an Editor request is made and the data is not in the expected format (JSON). In Firefox> Web Developer> no problem.
    - In the second case, "Palabra" the error is: input not valid

    fields: [
            {
                label: "Materia:",
                name:  "tb_libro.materia_id",
                type: "select2",
                opts: {
                    "placeholder": "Seleccione una materia",
                    "allowClear": true
                }
            },
            {
                label: "Pal. Clave:",
                name: "tb_palabra[].id",
                type: "select2",
                opts: {
                    "placeholder": "Select State",
                    "allowClear": true
                }
            }
        ]
    
    
    / * PHP implementation used */
    Editor::inst( $db, 'tb_libro' )
    ->field( 
        Field::inst( 'tb_libro.materia_id' )
        ->options( Options::inst()
            ->table( 'tb_materia' )
            ->value( 'id' )
            ->label( 'materia' )
        ),
        Field::inst( 'tb_materia.materia' ),
    )
    
    ->leftJoin( 'tb_materia', 'tb_materia.id', '=', 'tb_libro.materia_id' )
    ->join(
        Mjoin::inst( 'tb_palabra' )
        ->link( 'tb_libro.id', 'palabra_libro.libro_id' )
        ->link( 'tb_palabra.id', 'palabra_libro.palabra_id' )
        ->order( 'palabra asc' )
        ->fields(
            Field::inst( 'id' )
            ->validator( Validate::required() )
            ->options( Options::inst()
                ->table( 'tb_palabra' )
                ->value( 'id' )
                ->label( 'palabra' )
            ),
            Field::inst( 'palabra' )
        )
    )
    
    ->process($_POST)
    ->json();
    
  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited November 2018 Answer ✓

    Solved. The problem was actually in the "Palabra" field with the control tb_palabra []. Id. A multiple field, actually.

        fields: [
            {
                label: "Pal. Clave:",
                name: "tb_palabra[].id",
                type: "select2",
                opts: {
                        "placeholder": "Select State",
                                "multiple": "multiple",
                        "allowClear": true
                }
            }
        ]
    

    I repeat my thanks to Allan for the hint of the great select2 plug-in.

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Thanks for posting back. Sorry I didn't get to your question before you found the solution yourself, but delighted to hear that you have.

    Allan

This discussion has been closed.