Batch editing, with popup editor

11 posts, 0 answers
  1. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 19 Nov 2015 Link to this post

    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.
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 20 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 20 Nov 2015 in reply to Venelin Link to this post

    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.

  5. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 23 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 23 Nov 2015 in reply to Venelin Link to this post

    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.

  7. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 24 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 26 Nov 2015 Link to this post

    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.
  9. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 26 Nov 2015 in reply to DominionZA Link to this post

    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
  10. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 26 Nov 2015 Link to this post

    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).


  11. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 27 Nov 2015 in reply to DominionZA Link to this post

    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.



  12. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 30 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready