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

Making fields Read-Only and hidden in the Edit Template

15 Answers 215 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Reid
Top achievements
Rank 2
Reid asked on 01 Mar 2012, 08:10 PM
Hello All,

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

Thanks,
Reid

15 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 02 Mar 2012, 06:17 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Reid
Top achievements
Rank 2
answered on 02 Mar 2012, 07:19 PM
Great Petur!

Thanks,

Reid
0
Reid
Top achievements
Rank 2
answered on 02 Mar 2012, 07:30 PM
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
0
Petur Subev
Telerik team
answered on 06 Mar 2012, 10:32 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Reid
Top achievements
Rank 2
answered on 06 Mar 2012, 05:23 PM
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



0
Petur Subev
Telerik team
answered on 07 Mar 2012, 02:07 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Reid
Top achievements
Rank 2
answered on 11 Mar 2012, 07:23 PM
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
0
Accepted
Petur Subev
Telerik team
answered on 13 Mar 2012, 02:23 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
Reid
Top achievements
Rank 2
answered on 14 Mar 2012, 02:06 PM
Thanks Petur,

This works!

Reid
0
Dennis
Top achievements
Rank 1
answered on 12 Jul 2012, 03:12 PM
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()
        )
0
Reid
Top achievements
Rank 2
answered on 12 Jul 2012, 03:38 PM
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

0
Dennis
Top achievements
Rank 1
answered on 12 Jul 2012, 04:02 PM
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()
)
0
Reid
Top achievements
Rank 2
answered on 12 Jul 2012, 04:38 PM
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

0
Dennis
Top achievements
Rank 1
answered on 12 Jul 2012, 09:15 PM
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
0
Reid
Top achievements
Rank 2
answered on 20 Jul 2012, 12:32 PM
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
Tags
Grid
Asked by
Reid
Top achievements
Rank 2
Answers by
Petur Subev
Telerik team
Reid
Top achievements
Rank 2
Dennis
Top achievements
Rank 1
Share this question
or