1

I'm using Kendo UI MVC and I have a view that contains details about an object. On that page I have a Kendo UI Grid that shows a list of notes about the object. I allow the user to create or edit the notes from the grid.

The problem I have is when the user clicks the add button I need to pass the id of the page's object. I'm using GridEditMode.PopUp.

Basically, this is what I have:

public class Item {
   public int Id { get;set; }
   ...
}
public class Note {
    public int ItemId {get;set;}
    ...
}

Here is the grid code:

@(Html.Kendo()
    .Grid<NoteViewModel>()
    .Name("kendo-grid")
    .Columns(columns =>
    {        
        columns.Bound(n => n.NoteDateTime).Title("Date").Format("{0:MM/dd/yyyy}");
        columns.Bound(n => n.NoteDateTime).Title("Time").Format("{0:h:mm tt}").Sortable(false);
        columns.Bound(n => n.NoteActivityType).Title("Activity Type");
        columns.Bound(n => n.NoteDescription).Title("Description");
        columns.Bound(n => n.NoteDetail).Title("Notes");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Note"))
    .Mobile()
    .Pageable()
    .Sortable()
    .Filterable()
    .Reorderable(r => r.Columns(true))
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource.Ajax()
        .Model(model => model.Id(note => note.Id))
        .PageSize(25)
        .Sort(sort =>
        {
            sort.Add(note => note.NoteDateTime);
        })
        .Read(read => read.Action("ReadNotes", "Case").Data("getCaseId"))
        .Create(a => a.Action("CreateNote", "Case"))
        .Update(u => u.Action("UpdateNote", "Case"))
        .Destroy(d => d.Action("DeleteNote", "Case"))
    )
)

I need to set Note.ItemId when the user clicks the add button on the grid. Or, is there a better way to do this, as in send the ItemId value on the post?

1
  • Show us the Grid creation code.. May 4, 2015 at 11:32

3 Answers 3

1

I ended up getting this to work by hooking into the edit event of the popup. I wasn't able to figure out how to do it on the initial setup, so I added this to doc ready handler to the edit popup. This kind of feels like a hack, so if someone has a better way I'd love to hear about it. The #ItemId input is already on the details page, so I figured I may as well use it.

$(function () {
    function setItemId(event) {
        var uid = $('.k-edit-form-container').closest('[data-role=window]').data('uid');
        var model = $('#kendo-grid').data('kendoGrid').dataSource.getByUid(uid);
        if (model.get('ItemId') === 0) {
            model.set('ItemId', Number($('#ItemId').val()));
        }
    }

    var grid = $('#kendo-grid').data('kendoGrid');
    grid.bind('edit', setItemId);
});
1
  • 1
    I don't see your code as a hack. In fact sometimes(many times, I mean) you have to do such things like you did. May 5, 2015 at 11:42
0

I'm not sure if it's possible what you want, but to get you on the way this is how you'd start doing it.

You generally want a flat viewmodel, containing everything you want to use.

public class NoteViewModel {
    public int ItemId { get;set; }
}

Then properly setup the use of your editor template. Since your ItemId is now part of the grid's model it'll be send to the controller on edit/create.

@(Html.Kendo()
    .Grid<NoteViewModel>()
    .Name("kendo-grid")
    .Columns(columns =>
    {
        columns.Bound(n => n.ItemId).Hidden();
        columns.Bound(n => n.NoteDateTime).Title("Date").Format("{0:MM/dd/yyyy}");
        columns.Bound(n => n.NoteDateTime).Title("Time").Format("{0:h:mm tt}").Sortable(false);
        columns.Bound(n => n.NoteActivityType).Title("Activity Type");
        columns.Bound(n => n.NoteDescription).Title("Description");
        columns.Bound(n => n.NoteDetail).Title("Notes");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NoteTemplate"))
    Etc...
)

Finally create your template (called NoteTemplate.cshtml) and place it in Views/Shared/EditorTemplates so Kendo can find it.

@model NoteViewModel

Date: @Html.EditorFor(l => l.NoteDateTime)
Note Description: @Html.EditorFor(l => l.NoteDescription)
(Add all fields you need to edit here)
1
  • This does not pass the ID to the controller when using a Custom Editor Template with the Grid in Popup Edit mode
    – MattParra
    Aug 28, 2015 at 14:45
0

I had same problem

Problem is that some of fields of the model(viewmodel) is nullable

Model nullable field is not fully supported in Kendo UI

1
  • Real solution is data-value-primitive="true' link
    – Cybertron
    Mar 9, 2016 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.