column selector problem

jonr

Hi all,

I have tested my selector in the console and this delivers exactly the columns that I want:

$("#actuals tr:not(.even) td:not(:first-child):not(:nth-child(2)")

but when used in the keys definition like this:

columns: 'tr:not(.even) td:not(:first-child):not(:nth-child(2))'

none of my columns are editable.

I suspect that its down to the point at which the selector is being targeted as this works

columns: ':not(:first-child):not(:nth-child(2))'

can anyone please suggest a form that will only allow editing of columns on even bands and excludes columns 0 and 1?

thanks

jON

jonr

I have now ditched my plans to get this working as I am reverting to hand cranking code to move around the datatable.

With a lot of help from Bindrid and others here I have my table editable and configurable just like a spreadsheet entry with cells skipped where not set to a class of "editable".

I have 2 final issues to address.

I have removed the focus from the cells in css so that I just get my data cell to click on and then tab between cells.

However, I can only navigate on the current page with tab but what I would like to do is to tab off the last editable cell and for the page to change to page 2. When I tab off the end of page 2 I'd like to go back to the start of page 1 again. Is this possible?

Also, my DataTable appears to be responsive (its inside a boostrap modal dialog). Each time I move to a new cell, all the columns adjust witdth.

Its a bit disconcerting and not very like a fixed column spreadsheet and there is plenty of room available, there are only 6 columns in all.

can anyone advise, is there a short way to stop this from occuring, or do I have to revert to css and give everything a fixed width?

thanks

jON

allan

I can only navigate on the current page with tab but what I would like to do is to tab off the last editable cell and for the page to change to page 2. When I tab off the end of page 2 I'd like to go back to the start of page 1 again. Is this possible?

It should be perfectly possible - you just need to use the API rather than using the DOM directly. Keep in mind that DataTables will remove elements from the document that it doesn't need, so you would first need to check if there is a next page, then change the page and finally focus on that cell.

columns: 'tr:not(.even) td:not(:first-child):not(:nth-child(2))'

This isn't going to work because your select is not selecting columns - it is selecting rows and cells (based on the fact that tr is being used). The keys.columns selector is a column selector - it is specifically limited as the name suggests to selected based on the columns only. For example, to not select the first or second child:

columns: ':not(:first-child):not(:nth-child(2))'

Live example: http://live.datatables.net/goqicizu/1/edit

Also, my DataTable appears to be responsive (its inside a boostrap modal dialog). Each time I move to a new cell, all the columns adjust witdth.

We'd need a link to a page demonstrating the issue please.

Thanks,
Allan

jonr

Thanks Allan,

With regards the selector, I have now dropped the idea of using this although I do understand the problem for when I use this next.

I have a demo page online at:

http://planning.ferns-surfacing.co.uk/Actuals.aspx

fields that have a dash in are not editable and only the actual measures bands are editable.

thanks

jON

allan

Thanks - I see. I what you've tried to do with the selector. Perhaps one idea would be to change the colour of the focus when the editing can be used and have it, e.g. hashed red, when the cell can't be edited. That way you could still use KeyTable that then needing to reimplement that logic yourself.

Regarding the responsive nature, that's happening because the model container has a fixed width:

#actuals-modal {
    width: 1000px;
}

Allan

jonr

With regards selector, are you saying that I could avoid hand cranking?

Currently I only allow editing of cells which have class "editable", is there a way with keytables to stop an edit being allowed if the class is not editable?

With regard the styling ... if I disable that style in the chrome developer, it still has the same behaviour but also is a thinner table !?

jON

allan

is there a way with keytables to stop an edit being allowed if the class is not editable?

Instead of assigning the keys.editor option to have KeyTable automatically start editing, listen for key and call inline() yourself. That is basically all KeyTable is doing.

if I disable that style in the chrome developer, it still has the same behaviour but also is a thinner table !?

I don't think the responsive option is enabled for your table, even although the Responsive extension is being loaded.

Allan

jonr

Thanks Allan,

responsive - is that a bug or is it not going to be possible to fix? i.e. do I have to use a standard div and not Bootstrap Modal?

jON

allan

It should be fixable. Try enabling the responsive option.

Allan

jonr

I turned it on like this:

       table = $('#actuals').DataTable({
       responsive: true,
       destroy: true,

but behaves the same.

jON

allan

It still appears to have a fixed width for the modal:

.modal-dialog, #actuals-modal {
    display: table;
    /* max-height: 500px; */
    width: 1000px;
}

Try changing the width to max-width.

Allan

jonr

That has the same effect previously.

I get a scrunched up modal with a table inside and the longer, text based, columns are wrapped onto 3 lines of text.

Edit boxes are still switching to almost exactly twice the size when being edited as when simply being in the TD.

I think I am going to drop the idea of getting this to work inside a Bootsrap Modal dialog and rever to the old method of an overlay div with left and right margins set to auto as a container.

This is all taking far too long for the small amount of benefit.

thanks for your help Allan.

regards

jON

jonr

Indeed that is not even going to work.

I have created a page from scratch with the bare minimum that I should need I think.

This page is not responsive in any way shape or form as far as I can see.

http://planning.ferns-surfacing.co.uk/Actuals2.aspx

There is something really strange going on with the change of an editable field when selected.

The input makes the td grow to almost twice the size of the original.

I seem to be going backwards with this ... from what looked pretty impressive when I first dropped a table into a Modal Dialog and now weeks later and I still don't have a usable DataTable.

Can anyone suggest what is going wrong please?

jON

tangerine

These "double" references are probably not helping:

jquery/3.1.1/jquery.min.js
jquery-1.12.4.js

and

cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css

jonr

I was careful to get rid of all the bootstrap twoddle, didn't notice that I had duplicated versions etc.

thanks tangerine.

I will see what it looks like after I tidy up.

Think perhaps I should have taken Allans suggestion to build a fresh package, sorry Allan :-)

jON

jonr

I have removed all recently added code, used only DataTables js and css and everything is working as it should.

The code that I cribbed from these forums was placing an input into the td for user entry and that was causing the cell to adjust to almost twice the size.

        // puts the selected cell in edit mode
        function setEditable(cell) {
            cellData = cell.text();
            var txt = $("<input class='editInput' value='" + cellData + "'/>");
            cell.html(txt);
            txt.select();
            txt.focus();
        }

with only DataTables css in place on a clean fresh web site this code will produce the effect I was seeing.

I also checked thoroughly, the class editInput does not have any styling within my files.

jON

jonr

I have now completed building the table in to a BootStrap Modal dialog without any problems with formatting or resposive like behaviour, I am very please with the look feel and operation.

http://planning.ferns-surfacing.co.uk/tezting/Actuals3.aspx

One minor issue still haunts me is the excel like tab between cells will always drop on a cell that is configured as not editable via the editable class.

I believe that this:

columnDefs: [{ targets: [2, 3, 4, 5], className: "editable"}],

will allow edits to columns 2, 3, 4 and 5 but only if the class is editable.

however, its still possible to tab to and click on a cell to edit, regardless of whether it has class editable or not.

I am not sure that there is a way around this without copious amounts of awkward code and I am wondering whether I should just leave it as it is and let the user know that data entered into those fields will not be sent back to the server.

I could just zap the field data if they enter something in that cell perhaps?

Any ideas anyone

thanks

jON

allan

will allow edits to columns 2, 3, 4 and 5 but only if the class is editable.

Actually, its because the class is editable (assuming your listener is looking for that) that editing is allowed on them. The line of code above will add the class editable to cells in those four columns. It doesn't do anything else and DataTables or Editor themselves do not look for that class.

however, its still possible to tab to and click on a cell to edit, regardless of whether it has class editable or not.

Since you want to skip some rows (which KeyTable wasn't really designed to do), the only thing I can think of is to use the key-focus event. If it focuses on a cell that you don't want to have focus, bump the focus on to the next cell.

Allan

jonr

Hi Allan,

I think I will probably adopt your earlier suggestion to colour the cells that cannot be entered a red colour.

The problem with an excel like navigation is that I would have to cater for arrow keys as well and it starts to get messy.

A spreadsheet doesn't hide cells that you must not enter.

I may listen out for the event and set the table value to empty as well.

I have to say I am thrilled to see the table working in the bootstrap modal dialog.

and its behaving just as I expected it to.

jON