CODEWITHSUNDEEP
asp.net-mvckendo-uikendo-gridkendo-asp.net-mvc
Nick
Nick

Reputation: 331

Kendo UI Grid pass value to edit popup

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?

Upvotes: 1

Views: 4983

Answers (3)

Cybertron
Cybertron

Reputation: 31

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

Upvotes: 0

Nick
Nick

Reputation: 331

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);
});

Upvotes: 1

Nic
Nic

Reputation: 12846

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)

Upvotes: 0

Related Questions