how to load view in Popup editing in kendo grid

Question

i'm starter in KendoUI, i Write this code for create grid

 @(Html.Kendo().Grid(Model)
      .Name("Grid")
      .Columns(columns =>
                   {
                       columns.Bound(p => p.Id).Groupable(false).Visible(false);
                       columns.Bound(p => p.BrandName);
                       columns.Bound(p => p.BrandAbbr);
                       columns.Bound(p => p.SrcImage);
                       columns.Bound(item => @item.Id).Title("Command").Filterable(false).Groupable(false)
                           .Template(@<text>
                                          @Html.ActionLink("Edit", "Edit", new {id = @item.Id}, new {@class = "k-button k-button-icontext k-grid-Edit"})
                                          @Html.ActionLink("Delete", "Delete", new {id = @item.Id}, new {@class = "k-button k-button-icontext k-grid-Delete"})
                                      </text>).Width(200);
                   });
})
    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Action("Create","Brand").Text("add");                          
                    }
        )
        .Groupable()
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new {style = "height:500px;"})              
        .DataSource(dataSource => dataSource
                                    .Server()                           
                                    .Model(model => model.Id(item => item.Id))
                    ))

in this grid i have delete and Edit command. i want when user click in Edit Button into grid View Edit show in popup form. But I do not know how to do it. please help me. thanks all.

score 3 · Answer 1 · answered Jun 25 '13 at 06:22

3

You will have to use Custom command, kendoWindow(to display popup) and template (to display content inside of the popup) for that.

In grid,

columns.Command(command => command.Custom("Edit").Click("editItem"));

And then (for-what will happen when you click on "Edit"..) define the template of the window.

<script type="text/x-kendo-template" id="template">
    <div id="details-container"> <!-- this will be the content of the popup -->
        BrandName: <input type='text' value='#= BrandName #' />
        .....
        .....
    </div>
</script>

<script type="text/javascript">
    var detailsTemplate = kendo.template($("#template").html());

    function editItem(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
</script>

answered Jun 25 '13 at 06:22

Paritosh

11,144
5
56
74

in this code for edit use Templete, but i want load Edit view in popup for user, thanks for help me. – Pouya Jul 02 '13 at 08:04
You can use [kendo window - Loading content with AJAX](http://demos.kendoui.com/web/window/ajax.html) to load your custom view in window – Paritosh Jul 02 '13 at 08:19
i want use kendo window, But I do not know how to create generic kendo window, and i ask question in this url:http://stackoverflow.com/questions/17281582/how-to-set-loadcontentfrom-kendo-window-in-run-time – Pouya Jul 02 '13 at 08:29
@Paritosh - This helped me as well in a problem I had binding a kendow Window to a template. Thanks. – callisto Mar 09 '15 at 11:46

Paritosh · Accepted Answer · 2013-06-25T06:32:06.387

Here is the better alternative - Demo-Popup editing

In column declaration part of the grid,

.Columns(columns =>
  columns.Command(command => { 
      command.Edit();       //for edit functionality
      command.Destroy();    //for delete functionality
  })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler"))
    .Model(model => model.Id(p => p.Id))
    .Create(update => update.Action("EditingInline_Create", "Grid"))
    .Read(read => read.Action("EditingInline_Read", "Grid"))
    .Update(update => update.Action("EditingInline_Update", "Grid"))
    .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)

@ Paritosh: thanks for help me.but this code when user click in Edit button show Edit form popup, but i want load edit view in popup and user can update data and save. thanks for help me. — Pouya, Jul 02 '13 at 08:01

how to load view in Popup editing in kendo grid

2 Answers2