Grid Inline Edit Without Dedicated Action Column

[Adrian]

I looked through the demos and documentation and found no indication that what I'm doing is supported, but I'd like to try anyway:

I like the Inline Editing feature demonstrated here, but I do not like how an entire column is wasted providing space for Edit, Delete, Update, and Cancel buttons for each individual row. I want our users to be able to select a row (or several):

selectable: "multiple row"

...then click the Edit button in the Toolbar (I'm using Twitter's Bootstrap and its included Glyphicons, hence the templates):

toolbar = [

    { name: "create", template: "<a class='k-button add'><i class='icon-plus'></i></a>" },

    { name: "edit", template: "<a class='k-button edit'><i class='icon-pencil'></i></a>" },

    { name: "destroy", template: "<a class='k-button delete'><i class='icon-remove'></i></a>" },

    { name: "save", template: "<a class='k-button save'><i class='icon-ok'></i></a>" },

    { name: "cancel", template: "<a class='k-button cancel'><i class='icon-ban-circle'></i></a>" },

]

and finally, the selected row(s) would become editable:

editable: {

    mode: "popup",

    template: kendo.template($("#teamPopupEditor").html()),

    update: false,

    destroy: false,

    confirmation: "Are you sure you want to remove this item?"

},

It would be great if the editor could not be a popup, but instead look and feel just like the inline editor; the only difference is, instead of the buttons being in the same row, they would be in the Toolbar.

I know it should be possible to get the uid of a highlighted row and use it to target the editor, I'm just having trouble putting it together in my head, and I'm having difficulty figuring out how to make it look and act like inline editing rather than a popup dialog.

We want to be able to grant or revoke editing privileges based on the user's permissions based on the permissions of the logged-in user (changing the editable option to false, and removing the toolbar, and similarly disabling editing on the back-end to prevent clever workarounds), as well as ensure that editing still functions within the limitations of mobile devices (multitouch screens are bad for advanced or complicated UI design and don't work well with mouse-oriented features). Furthermore, clicking once on a cell to make it editable seems like a great way to have an accident (even/especially on a desktop computer -- perhaps one could use double-click instead?), and editing a row inline with that whole column dedicated to the buttons seems like a waste of space, especially on a mobile device with limited screen real-estate. I can just barely fit four columns sized to 25% each on a 320px-wide screen (original iPhone in portrait mode), and I need all four of them for displaying data in most cases.

Please reference my other thread here for details about my specific Grid setup if needed.

Thank you for your help so far. I have been enjoying learning and working with Kendo, even if its new-ness necessitated bugs, missing features, and unfinished documentation. It's definitely one of the more robust JavaScript frameworks I've worked with.

Best Regards,

Adrian

[Adrian]

I am still struggling to get this idea off the ground. I'm even having issues just getting basic editing to function properly. Does anyone out there have any idea how to get this working?

[Adrian]

Ok, I got it figured out after a bunch of tweaking and reading some more forum threads and looking over the documentation a few more times.  I have provided example code detailing my functioning grid here. I ended up just going with the custom template-based popup editor and gave it a unique presentation. While it's not my original intention, it looks good and functions smoothly enough for our needs.

Of course another issue has arisen, but that is for discussion in the linked thread rather than here.