Standalone and single row editing

helloenjoi

I've tried for a few days now to get standalone editor working with no such luck. The examples are missing the HTML and server codes. Can these be updated to include the entire code?

Also it would be great to get a standalone example that shows editing single rows possibly with next and previous buttons to load the data. This is explained a little bit in the manual but an example of how it works in practice would be awesome.

A little background: I am trying to build a timesheet hours form. so it has 7 days, time in, lunch, and time out. This doesnt really lend itself to datatables rows (too long) or a normal edit form (too tall) Thus the need for ultimate flexibility and having a matrix entry form (pivot table looking, with labels on left and top).

Only a single row would ever need to be edited at once so standalone seems the goto option. But trying to build this i have already put a couple weeks into multiple different avenues including the "always visible editing panel" option, I jquery'd the labels away but i need to do additional JS for a total row(thats not saved) and it doesnt seem to lend itself well to the form version.

You've already built excellent tools and i'd like to keep the other benefits like validation, e.t.c. As an amateur programmer your examples have helped build my skillset and confidence in web design. All the other examples have done wonders to point me in the right direction on building my application.

Thanks,
Ed

allan

Hi Ed,

The standalone examples don't actually have any server-side code examples as the Editor PHP / .NET libraries don't directly support that - they are focused on using table based data. The standalone case indirectly assumes that you would be using your own code.

However, if you are actually editing a row in a database, and its just that you are presenting it as a single standalone form, this example is the one you want. You still get all the validation and everything. To reduce it to a single record you would apply a suitable where condition.

The key here is to have the data-editor-id attribute, as discussed here. That is what tells the server-side libraries you will be editing a row in a table (and what its identifier is).

Allan

helloenjoi

Okay i followed the example. My next issue is how to link up the data.

I have 1 normal datatable/editor as a selection table, this triggers the draw on the standalone table with additional editor data. The problem is now that once inline editor is finished the table is fine, but it only submits the data and doesnt update the original selector table data (i've tried adding an ajax reload in multiple places but it just causes errors or doesnt work) also tried linking the 2nd editorHours to the table but then inline breaks.

I believe that since the standalone is updating the actual database whenever i select a new row the data on selector has not refreshed or been updated by editor as a normal edit would be. is it possible to link these two?

       //handle wiring the timecard selector to the timeitem child and timesheet standalone 
        oTableTimecard.on('select', function () {
            oTableTimeitem.ajax.reload(); //the child table for project hours
            $('#timesheet').remove(); //remove the standalone elemeent
            oTableTimecard.ajax.reload; //this doesnt work
            //open the Timesheet Panel to enter the hours
            createPanelHours(oTableTimecard.row({
                selected: true
            }).data());
            // Activate an inline edit on click of a hours cell in the standalone element
            $('[data-editor-field]').on('click', function (e) {
                editorHours.inline(this, {
                    onBlur: 'submit'
                });
            });
            editorTimeitem //parent child editing per blog
                .field('tbl_TimesheetDetails_Time.TimeCardID')
                .def(oTableTimecard.row({
                    selected: true
                }).data().tbl_TimesheetID.TimeCardID);
        });
        oTableTimecard.on('deselect', function () {
            oTableTimeitem.ajax.reload();
            $('#timesheet').remove();
        });

allan

doesnt update the original selector table data

Listening for the submitComplete event handler on the standalone Editor instance and then calling ajax.reload() on the table should do it.

Allan