This is a migrated thread and some comments may be shown as answers.

Customize popup edit fields

2 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 18 May 2015, 05:01 AM

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

2 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 18 May 2015, 05:39 AM

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

0
Boyan Dimitrov
Telerik team
answered on 19 May 2015, 03:37 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or