Show Different Columns In View/Edit

[Alex]

My grid shows a PersonViewModel POCO and is set up like this:
...

    .Columns(columns =>

    {

        columns.Bound(c => c.FirstName).Width(120);

        columns.Bound(c => c.LastName).Width(120);

        columns.Bound(c => c.Address1).Width(130);

        columns.Bound(c => c.BirthDate);

        columns.Command(commands =>

        {

            commands.Edit().ButtonType(GridButtonType.Text);

            commands.Delete().ButtonType(GridButtonType.Text);

        }).Width(180).Title("Commands");

    })

...

I use popup editing with ajax binding and this is working fine. However, the PersonViewModel actually has many more columns; I'd like to only show those 4 in the grid itself (to avoid horizontal scrolling) and have all the fields on the popup editor. The editor only pulls in the values for the fields which are explicitly declared with columns.Bound().

1. How can I get values for all columns?

If this is not possible, I'd like to try this as an alternative -
Using in-line editing, I let the columns autogenerate but they are all constrained within the width of the grid and end up ~10px wide.

2. How can I force the grid to horizontally scroll without having to manually specify all the columns and their widths?

[Jigar]

Hi Alex,

While Grid opens up Edit popup window it uses EditorForModel so I think it should display all the fields of your model according to the attribute you set.

Now to achieve your goal, you can put those fields (which you dont want to display in grid) as hidden.
For Example
columns.Bound(c => c.xyz).Hidden(True);

So, xyz won't be displayed in grid but that field be there in Edit form. I hope this helps.

Regards,

Jigar.

[Alex]

This was perfect thank you.

[Kyle Pike]

i have the exact opposite question. How do i display a column in normal mode, and NOT display it in edit mode or Insert Mode?

To be more specific, i have the following grid

<%
               var caseID = ViewData["CaseID"];

               Html.Telerik().Grid<ServiceCoordinator.Models.EditableComments>()
                           .Name("CommentsGrid")
                           .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image))
                           .BindTo((IEnumerable<ServiceCoordinator.Models.EditableComments>)Model)
                           .DataBinding(dataBinding => dataBinding
                               .Ajax()
                              .Select("EditingServerSide", "Comments", new { id = caseID })
                              .Insert("GridInsert", "Comments")
                              .Update("GridSave", "Comments"))
                           .Columns(columns =>
                           {
                               columns.Bound(o => o.CommentType).Width(140);
                               columns.Bound(o => o.CommentText);
                               columns.Bound(o => o.CreateDate).Format("{0:d}").Width(80).Title("Date");
                               columns.Bound(o => o.CreatedBy).Width(80).Title("User");
                               columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Image)).Width(200);

                           })
                          .Pageable()
                          .Sortable()
                          .Filterable()
                          .DataKeys(keys => keys.Add(c => c.UID))
                          .Render();
           %>

and i do not want the user to be able to edit the CreateDate and CreatedBy fields. I am using the following model

public class EditableComments
{

    public int UID {get; set;}

    public int CaseID {get; set;}

    [UIHint("CommentType"), Required]
    public CommentType CommentType { get; set; }

    public string CommentText {get; set;}

    public string CreatedBy { get; set; }

    public System.Nullable<System.DateTime> CreateDate
    {
        get;
        set;
    }


}

public class CommentType
{
    public int CommentTypeID { get; set; }

    public string Type { get; set; }
}

Is there a data annotation i can use to make this work? Or a simple column property?

this is a pretty common request for us here, and I'd like to not have to make a custom editor template / new type for each.

[Makoto]

Kyle,

Have you tried .ReadOnly()?

In your case:

.Columns(columns =>
{

columns.Bound(o => o.CommentType).Width(140);

columns.Bound(o => o.CommentText);

columns.Bound(o => o.CreateDate).Format("{0:d}").Width(80).Title("Date").ReadOnly();

columns.Bound(o => o.CreatedBy).Width(80).Title("User").ReadOnly();

columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Image)).Width(200);

})

[Carson]

I'm under the impression that .ReadOnly doesn't hide a column, but instead displays the DisplayTemplate for that column when in Edit Mode.
Is that right?

Anyway, I want to hide a columns.Template column in Edit mode. .ReadOnly is not an option for a template column.
Any other suggestions?

Thanks

[Makoto]

If you're not editing in inline mode (that is, using Popup or Form), then you'll need to decorate your properties on your model class with the ScaffoldColumn attribute to prevent them from showing up in the editor.

For example:

[ScaffoldColumn(false)]
public DateTime CreatedDate { get; set; }

[Steve]

Hi,

    I have Q3 2010 version and I had the same problem.  I used the ScaffoldColumn, but when I do so, my column is not shown in grid.  My grid show a column who is the result of a calculation.  I want to show this column in my grid view, but not in popup edit mode.

Thank you for your help
Steve

[Lyle]

Try

<%= Html.TextBox("HiddenField", Model.HiddenField, new { style = "visibility:hidden" })%>

in your UserControl.

~Lyle

[Steve]

Thank you for your reply.  I tried another solution who works fine using DataAnnotationsModelMetadataProvider.

Here is the link:
http://stackoverflow.com/questions/2959041/showing-different-fields-in-editorformodel-vs-displayformodel-modes-in-mvc2

Thank you
Steve

[Makoto]

If your goal is to show a drop down list in edit mode that's tied to the Id column, you might want to check out this sample project that I put together that uses a very easy way to accomplish that.

http://www.telerik.com/ClientsFiles/236914_gridwidths.zip

[Steve]

Thank you for the information.  
My goal was to show a readonly column in grid and to hide this column when I'm going in popup edit.

Thank you