Customize popup edit fields

[John]

I'm using the MVC wrappers and one of my grids is for adding/editing/deleting comments. The model contains CommentId, UserName, Comment, TimeStamp. I want to show all but the CommentId in the grid. When I add or edit a row, the popup should only contain a textarea for Comment.  How can I achieve this using the MVC wrappers?

Thanks,

--John

[John]

Here is the code I'm using now:

@(Html.Kendo().Grid<CommentsViewModel>()
        .Name("CommentsGrid")
        .Columns(columns =>
            {
                columns.Bound(o => o.UserName);
                columns.Bound(o => o.TimeStamp);
                columns.Bound(o => o.Comment);
                columns.Command(command =>
                    {
                        command.Edit();
                    });
            })
        .Pageable(pager => pager.Refresh(true))
        .Sortable()
        .Resizable(resize => resize.Columns(true))
        .Scrollable()
        .ToolBar(commands => commands.Create())
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .Selectable(select => select.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model =>
                {
                    model.Id(p => p.CommentId);
                    model.Field(p => p.CommentId).Editable(false);
                    model.Field(p => p.UserName).Editable(false);
                    model.Field(p => p.TimeStamp).Editable(false);
                })
            .Read(read => read.Action("CommentsGrid", "PickupAjax", new RouteValueDictionary { { "id", Request.QueryString["id"] }, { "gt", Request.QueryString["gt"] } }))
            .Create(create => create.Action("CreateComment", "PickupAjax", new RouteValueDictionary { { "pickupNumber", Request.QueryString["id"] }, { "gt", Request.QueryString["gt"] } }))
            .Update(update => update.Action("UpdateComment", "PickupAjax", new RouteValueDictionary { { "pickupNumber", Request.QueryString["id"] }, { "gt", Request.QueryString["gt"] } }))
        )
        .Deferred())

What I need is:

1. Add & Edit popups should only contain a textarea for the Comment field. Id, UserName, TimeStamp will be populated automatically in the controller.
2. For now, until the Data Store API developers resolve their problem, I need to refresh the grid whenever I add or edit a row.
3. For Add, I should only be posting the comment field; for Edit, I should only be posting the Id & Comment fields. Note the RouteValueDictionary pararms for Read/Create/Update in DataSource - those remain as they give context to the comments.

If possible, I would like to do as much of this in the MVC wrappers and not rely on JS (as much as possible)

Thanks,

--John

[Boyan Dimitrov]

Hello John,

Straight to your questions: 

   1. In order to make some of the model properties non-editable [ScaffoldColumn(false)] annotation as shown in this article. Also using a custom popup editor is also an option in order to control the fields in the popup editor. 

   2. When the data source of the Kendo Grid is changed (add/update or delete an item) the grid is rebound and redrawn. Could you please elaborate a bit more on the case? 

   3. A possible way to remove some of the model properties would be to use the Data method of the CRUD operations as shown below:

.Create(create=> create.Action("EditingPopup_Create", "Grid").Data("clearFields"))

function clearFields(data) {
      delete data.ProductName;
  }

This code will delete the ProductName value and will not sent its value to the controller. 

Regards,
Boyan Dimitrov
Telerik