Beginner trying to use custom pop up form for edting

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    4 posts
    Member since:
    Oct 2017

    Posted 06 Nov 2017 Link to this post

    I have a grid that uses a datatable as the mode. Here's the code for the grid:

    @(Html.Kendo().Grid<dynamic>()
                    .Name( "Grid")
                    .Columns( columns =>
                    {
                        foreach ( DataColumn col in Model.Columns)
                        {
                            var c = columns.Bound(col.ColumnName);
                            // handle special cases here, e.g. putting things in footer of grid
                            c.Width(200);
                        }
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
                    })
                    .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("UsersEditAdd").Window(w => w.Title("Add or Edit User")))
                    .Pageable(pager => pager
                        .Input(true)
                    )
                    .Sortable()
                    .Scrollable(s => s.Height(500)) //////////////////////// hard coded height
                    .Filterable()
                    .DataSource( dataSource => dataSource
                        .Ajax()
                        .Model( model =>
                        {
                            // two lines below are in demo code. I get an index out of bounds from the next line
                            //var id = Model.PrimaryKey[0].ColumnName;
                            //model.Id(id);
                            model.Id("AgentID"); // this is required
                            foreach ( DataColumn col in Model.Columns)
                            {
                                var field = model.Field( col.ColumnName, col.DataType);
                            }
                        })
                        .Read( read => read.Action("Read","Home"))
                        .PageSize(40) /////////////////////////////////////// hard coded items per page
                        .Create(update => update.Action("EditingPopup_Create", "UsersGrid"))
                        .Update(update => update.Action("EditingPopup_Update", "UsersGrid"))
                        .Destroy(update => update.Action("EditingPopup_Destroy", "UsersGrid"))
                    )
                    .Resizable(resize => resize.Columns(true))
                    .Reorderable(reorder => reorder.Columns(true))
                    .HtmlAttributes(new { style = "height: 550px" })  /// does control the height
                )

     

    The grid loads with data and an Edit button. When I click the Edit button, a screen pops up based on the columns and data in the grid row. But I want the edit button to bring up the view named UsersEditAdd. I created UsersEditAdd.cshtml in the same directory as the view with the grid.

    I was looking at a similar posting, and it seems that I shold be seeing the view I created. But, no.

    Any help would be appreciated.

    Also, I'm currently using an evaluation version.

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 08 Nov 2017 Link to this post

    Hi Andrew,

    In order to use a custom popup editor you need to add a partial View to the ~/Views/<GridViewName>/EditorTemplates. If the partial view is in the same directory as the view with the Grid the custom editor will not be found. Try to change the location of the custom editor and let me know how it works for you

    With that said, you can find the example below helpful. It illustrates how to define a custom popup editor for the Grid component. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top