Making fields Read-Only and hidden in the Edit Template

[Reid]

Hello All,

Is there a way to hide fields showing in the Edit Template?  Guid Primary Keys are not user friendly.  :)

Thanks,
Reid

[Petur Subev]

Hi Reid,

Yes there are several approaches here. You can define the guid column as hidden.
i.e.

.Columns(columns =>
        {
            columns.Bound(p => p.CustomerGUID).Hidden();
//...

Or you can decorate your GUID property with the following attributes:

[HiddenInput(DisplayValue=false)] //Hide from Edit
//or
[ScaffoldColumn(false)] // Hide from both Display/Edit

All the best,
Petur Subev
the Telerik team

[Reid]

Great Petur!

Thanks,

Reid

[Reid]

Also, can you make a checkbox for a boolean member in the model in a grid row read only for display but editable in the edit template?  Iw ould think by default this would be the case, yet the user can check it by default. 

I see the advantage considering record selection, I have used a grid in a prototype where the records were selected based on the demo. 

But in this case it is bound to a column and it not only allows the checked property to be set but the values in columns in the row that are false, show a diimmed checkmark box. 

Thanks,
Reid

[Petur Subev]

Hello Reid,

Basically you can control how the information is displayed using the Template/ClientTemplate methods in the column definition (the default display template is using disabled check-box). If you want to change how the data is edited you should use editor templates.
Notice that even if you make your template to display a check-box (editable), if the user changes its state this wont change the model property (this is why the check-boxes are disabled in display mode).

All the best,
Petur Subev
the Telerik team

[Reid]

Hi Petur,

As you know from another thread the ClientRowTemplate once working will resolve this I guess, but I have been trying for a couple days to solve that issue amongst others.  The issues are just me not really understanding all the pieces.
If I use this code as the client template it runs but nothing different is happining, the checkbox is still "checkable".

.Columns(columns =>
 {
    columns.Bound(eg => eg.Enabled).Width(130)
    .ClientTemplate("<input type='checkbox' name='enabled' disabled='disabled' value='<#= eg.Enabled #>' />");

Now that I think about it, it would be fine to just display a "Yes" or "No" here to show the user they are managing if they are enabled or not.  Can you use conditional statements here?  If(Enabled) "Yes" else "No"?

Thanks,
Reid

[Petur Subev]

Hello Reid,

Yes inside the client side expressions you can use the ternary operator. Also make sure you are using the ClientTemplate when your data is coming via Ajax.

Kind regards,
Petur Subev
the Telerik team

[Reid]

Petur,

I abstracted out a sample project so that I could understand ClientRowTemplates.  This solved many issues I had with how the grid was displaying the model. At that point you do not have to work at the column template level. As you know with ClientRowTemplates you have complete control over the row layout and columns displayed.

This solution lacks a Custom View for editing the row.  What would be nice is for it to mirror the ClientRowTemplate and just snap into edit mode without the layout change other than an Update or Cancel button.

If you know how to implement that in this solution I would like to gain that knowledge.

The solution uploaded also demonstrates the use of Membership for the users in the grid.  The users and ther roles come from the aspnet Membership database.  That database is in the App_Data folder and uses .SQLExpress to connect.

Thanks,

Reid

[Petur Subev]

Hi Reid,

To fully customize the row in edit mode you should:

1. Set the edit mode to InForm
2. Create a View used as editor template under the Shared/EditorTemplates folder and name it like your model. In your case UserModel.aspx
3. Add the input fields you want and format them with CSS the same way as your display template.

All the best,
Petur Subev
the Telerik team

[Reid]

Thanks Petur,

This works!

Reid

[Dennis]

Do you have an example? I currently have a project and it binds correctly and shows the fields I want to edit but the problem is when I want to insert. Below is my model that the grid binds to and displays the fields I want and when I click the edit button it displays the correct fields as well. The problem is when I want to insert it still only displays the same 2 fields for an edit and I need all but 1.
Model:

public class CodeModel
   {
       [Required]
       [MaxLength(2)]
       [DisplayName("Code ID")]
       public string CodeID { get; set; }

       [HiddenInput(DisplayValue = false)]
       public string Title { get; set; }

       [HiddenInput(DisplayValue = false)]
       public string Status { get; set; }

       public bool Active { get; set; }

       [HiddenInput(DisplayValue = false)]
       public string Category { get; set; }

       [DisplayName("User ID")]
       [ScaffoldColumn(false)]
       public int UserID { get; set; }

   }

Grid:

@(Html.Telerik().Grid<hrmsMVC.Areas.HRMS.Models.CodeModel>()
        .Name("CodeManager")
            .DataKeys(keys =>
            {
                keys.Add(c => c.CodeID);
            })
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))
            .DataBinding(dataBinding =>
            {
                dataBinding.Ajax()
                    .Select("_Filtering", "CodeManager", new { classifications = @ViewBag.SelectedCatgory })
                    .Update("_SaveAjaxEditing", "codeManager", new { classifications = @ViewBag.SelectedCatgory })
                    .Insert("_InsertAjaxEditing", "CodeManager", new { classifications = @ViewBag.SelectedCatgory });
            })
        .Columns(columns =>
        {

            columns.Bound(o => o.CodeID).Width(120);
            columns.Bound(o => o.Title).Width(200);
            columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active ? checked='checked' : '' #> />").Width(120);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.ImageAndText);
            }).Width(180).Title("Commands");

        })
            .Editable(editing => editing.Mode(GridEditMode.InForm).InsertRowPosition(GridInsertRowPosition.Top))
            .Sortable(sorting => sorting
            .SortMode(GridSortMode.SingleColumn)
            .AllowUnsort(true)
            .OrderBy(order =>
                {
                    order.Add(o => o.CodeID);
                })
             )
             .Pageable()
                 .Resizable(resizing => resizing.Columns(true))
            .Filterable()
        )

[Reid]

Dennis,

Here is an example of the usage of the DefaultDataItem, used to initiate a template on insert for a grid bound client side.

.Editable(editing => editing.Mode(GridEditMode.InForm))
           .Editable(config => config.DefaultDataItem(new ProviderGroupModel()
           {
               CreatedOn = DateTime.Now,
               Enabled = true,
               FilterExactMatch = false,
               FilterStartDate = DateTime.Now,
               FilterEndDate = DateTime.Now.AddYears(1),
               LastModified = DateTime.Now

           }))
           .Sortable()
           .Pageable()
           .Selectable()
           .Filterable()
           .Render();

The model class, in this case ProviderGroupModel that the grid is binding to must address visibility and/or validation rules of it's fields or structures with data annotations and it appears you are.  So hopefully defining the dataitem template will work for insert.

Regards,

Reid

[Dennis]

So, I need to Model classes? One for the select/update and one for the Insert?
Example:

@(Html.Telerik().Grid<hrmsMVC.Areas.HRMS.Models.CodeModel>()

.Name("CodeManager")

.DataKeys(keys =>

{

keys.Add(c => c.CodeID);

})

.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))

.DataBinding(dataBinding =>

{

dataBinding.Ajax()

.Select("_Filtering", "CodeManager", new { classifications = @ViewBag.SelectedCatgory })

.Update("_SaveAjaxEditing", "codeManager", new { classifications = @ViewBag.SelectedCatgory })

.Insert("_InsertAjaxEditing", "CodeManager", new { classifications = @ViewBag.SelectedCatgory });

})

.Columns(columns =>

{

columns.Bound(o => o.CodeID).Width(120);

columns.Bound(o => o.Title).Width(200);

columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active ? checked='checked' : '' #> />").Width(120);

columns.Command(commands =>

{

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

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

})

.Editable(editing => editing.Mode(GridEditMode.InForm))

.Editable(config => config.DefaultDataItem(new hrmsMVC.Areas.HRMS.Models.CodeModelSecond()

.Sortable(sorting => sorting

.SortMode(GridSortMode.SingleColumn)

.AllowUnsort(true)

.OrderBy(order =>

{

order.Add(o => o.CodeID);

})

)

.Pageable()

.Resizable(resizing => resizing.Columns(true))

.Filterable()

)

[Reid]

Dennis,

No you don't need separate classes for each Ajax action, I don't believe that is possible. The CodeModel class is all that is needed to perform the Select, Insert, Update and Delete.  I believe the signatures for your controller related actions have the datatype of the @ViewBag.SelectedCategory correct?  In any event because the grid is bound to the CodeModel class the dataitem should correspond to the CodeModel class. 

Below your question is that you want more fields to display on insert.  The two fields UserID and CodeID will display because you have not adorned them with the HiddenInput[] attribute.  If you want those fields to display on Insert then you need to remove those attributes at design or runtime.  If that conflicts with the design for edit, meaning you don't want those fields to display then I beleive the key would be to define a custom client template for editing and exclude or include whatever fields are needed from the CodeModel class.

This is as I understand it. 

Regards,
Reid

[Dennis]

Thank you for the response. You are right about the fields conflicting with my insert and update. In insert I need CodeID, Title and Active and in update I just need CodeID and Active. The way I have my class (CodeModel) adorned works the way I want only for an update. If I remove those dataannotations it won't work for both. Can you please tell me how to use client template for editing and inserting?

Thanks
Dennis

[Reid]

Hi Dennis,

Sorry for the delay.  I am in a transition period, moviing to a new home. I have this linked for reply and should in the next two weeks or so.
Reid