Batch editing, with popup editor

[DominionZA]

We are using batch editing in a grid that has now grown to have way too many columns.
We would like to reduce the number of columns (not mandatory values) in the grid to make it more presentable, but have an Edit button to display a popup containing the rest of the columns to edit.

How can this be done? Been hunting for ages, and unable to find a solution.

NB: I don't want to do a trip to the server to get the partial view to render, along with another hit on the DB to get the rest of the data. The view model already exists in the grid. I just want the popup to enable editing of the additional columns that we are not showing in the grid.

[Venelin]

Hi DominionZA,

You can use grid's showColumn/hideColumn API to achieve the desired functionality: 
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-showColumn
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-hideColumn

Regards,
Venelin
Telerik

[DominionZA]

Thanks, but I don't think you are understanding.

I am in batch editing mode, so not using the popup editor as the default form of editing a record.

1. Grid is batch editing. Hiding the columns I don't want in the grid is no problem.
2. I want a button in each grid row for editing the columns I don't show (about 20 of them). This will be via a popup editor.
3. When the popup displays, it must show the additional columns I want to be able to edit. And bound to the datasource of the grid without a round trip to the server/controller to get the additional information (already part of the model bound to the grid).

Your response is only how to hide/show columns - which I don't need.

[Venelin]

Hello,

You can define a custom edit popup form and include the necessary fields. Here is an example: http://jsfiddle.net/valchev/BCBzS/1/light/. This is widely discussed in this forum thread: http://www.telerik.com/forums/custom-popup-editor-with-additional-fields

Regards,
Venelin
Telerik

[DominionZA]

Both the fiddle and the widely discussed thread are using the popup editor as the default editor. This is not related to my question and I am not sure how else to say this so you can understand better.

I am NOT using the popup editor as the default. I am using batch inline editing. Please see my posts above.

I need to display a popup editor for additional columns that I do not want displayed in the grid. I am asking how to invoke the editor via my own button "More". The editor will then popup and enable editing for additional columns.

Customising the popup is not my question. My question is how to programatically invoke it via a button in the grids row - and link it to the selected datasource - and not by setting the grids edit mode to Popup. I want it to remain in inline batch editing.

[Venelin]

You can't invoke the popup grammatically if you use batch, because edit modes can't be mixed. However you can create a template column with a button that opens window. Then set window's content to be template and bind it to the data item where the button was clicked.

Regards,
Venelin
Telerik

[DominionZA]

That makes more sense. Thank-you.

Are there no samples floating about using KendoUI MVC? Custom popup, templates and MVVM are all things that I would still have to research, then find a solution that brings them all together. Very time consuming.

[DominionZA]

Never mind - I found a solution that works for me here : http://stackoverflow.com/questions/18148734/how-to-create-custom-kendo-ui-window-for-edit-in-kendo-ui-grid

[DominionZA]

Okay, all is nearly working. Most columns are binding in the popup correctly, and saving back to the grid/db just fine - except for bool type columns.

The binding code looks like this...

$("#vehicleDeviceConfigurationWindow [name]").each(function() {
        var name = $(this).attr("name");
        $(this).attr("data-bind", "value:" + name);
    });

Model definition of a bool property that won't bind...

[DisplayName("Save Logs")]
public virtual bool DeviceCfg_SaveLogs { get; set; }

Can you perhaps point me in the right direction please. It is only the bool properties that are not binding (to view, or back to grid).

[DominionZA]

Okay, some progress. After trawling through the docs I changed...

@Html.EditorFor(model => model.DeviceCfg_UseM2MCommunications)

to...

<input type="checkbox" data-bind="checked: DeviceCfg_UseM2MCommunications" />

Now the binding works, but it does not feel right. Am I correct in saying so? I would prefer to stick with razor syntax if possible.

[Venelin]

Hello,

...
$(this).attr("data-bind", "value:" + name);

will result in checkbox with data-bind attribute set to "value: something":

<input type="checkbox" data-bind="value: DeviceCfg_UseM2MCommunications" />

As far as I can see from the code that you provided, the desired resulting rendering should be:

<input type="checkbox" data-bind="checked: DeviceCfg_UseM2MCommunications" />

If this is so, then, for the checkbox you have to render different attribute value (i.e. "checked"). Depending on the MVC version this can be done directly in .EditorFor, or you can still use jQuery, just add additional check for booleans and alter the attribute value as desired.

Regards,
Venelin
Telerik