How to pre-select a row in a custom searchpane?

How to pre-select a row in a custom searchpane?

Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

I would like to pre-select a row in one of my custom panes in my searchPanes. Is there any way to do this?

Here is a cut-down version of my searchPanes definition:

searchPanes:{
    layout: 'columns-4',
    dtOpts:{
        searching: false,
        ordering: false
    },
    orderable: false,
    panes: [
        {
            header:'Availability',
            options:[
                {
                    label:'Available, 100%',
                    value: function(rowData, rowIdx){
                        return rowData[availcolumn] === 'Available';
                    }
                },
                {
                    label:'Unavailable, 0%',
                    value: function(rowData, rowIdx){
                        return rowData[availcolumn] === 'Unavailable';
                    }
                }
            ]
        }
    ]
}

And here are my columnDefs. I do have class="availability" in the thead th cell of my Availability column. The preSelect section does not pre-select the row.

columnDefs:[
    {
        searchPanes:{
            show: false,
        },
        targets: '_all',
    },
    {
        searchPanes:{
            show: true,
        },
        targets: 'searchpane',
    },
    {
        searchPanes:{
            preSelect:['Available, 100%']
        },
        targets: '.availability'
    }
]

This question has an accepted answers - jump to answer

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @Nick Hope ,

    Currently this is not available, but I've added it as a new configuration option searchPanes.panes.preSelect. Take a look at this example to see how it works.

    This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the new code from the nightly builds.

    Thanks,
    Sandy

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    Thank you very much @sandy . That works perfectly :)

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    Hi again @sandy , I'm finding that the "Clear button" ("x") and the "Clear All" button reset the custom searchpane to have the pre-selected row selected, rather than clearing all selections. This is different behaviour from a standard searchpane. Would it be possible to have those buttons clear the selections?

  • colincolin Posts: 15,146Questions: 1Answers: 2,586

    I tried both the links in this thread:

    and both of those are behaving the same - the selections are being cleared. Could you look at that, please, and see if it helps.

    If it's still not working for you, please can you update the last example, or link to your page, so that we can see the problem.

    Cheers,

    Colin

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    @colin @sandy It seems the issue only occurs when cascadePanes: true is set. Apologies for not testing more fully before posting.

    preSelect + cascadePanes with standard searchPanes:
    http://live.datatables.net/hivozogu/2/edit*
    preSelect + cascadePanes with custom searchPanes:
    http://live.datatables.net/qehenito/1/edit*

  • colincolin Posts: 15,146Questions: 1Answers: 2,586

    Yep, definitely something wobbly there - it's only showing one value when the table loads too. I've raised it internally (DD-1602 for my reference) and we'll report back here when there's an update - probably in a week or so (Sandy is on holiday).

    Cheers,

    Colin

  • allanallan Posts: 61,734Questions: 1Answers: 10,110 Site admin

    I've just been discussing this with Sandy, and supporting searchPanes.cascadePanes along with searchPanes.preSelect is actually going to be technically really difficult.

    The key part of it is that the cascade action must be performed in sequence (typically the user's mouse clicks), but that isn't possible with preSelect. We might be able to do it in column order, but that won't always be what is required. It would also be easy to enter an undefined situation whereby preSelect is used to select items that the user wouldn't have been able to (because they'd been cascaded out).

    As such, we've taken the decision to add notes into the documentation that preSelect and cascadePanes will not be supported together for the moment.

    That said, Sandy has a fix specifically for the clear issue and will post back when he's finished that.

    Allan

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @Nick Hope ,

    Please see this example which shows the clearing fix.

    Thanks,
    Sandy

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    @allan I understand. In the meantime the fix from @sandy in the nightly build appears to be working well in my development project, for both the "Clear button" ("x") and the "Clear All" buttons. Thank you very much!

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    Just updating this to note that the feature made it into DataTables 1.10.22.

This discussion has been closed.