seperate edit and insert template

Aug 23, 2011 at 12:26 PM
Edited Aug 23, 2011 at 1:17 PM

Hi

Is it possible to create a seperate insert and edit template in a grid? When someone edits something in the grid they are only alowed to specify the enddate instead of all fields. How can I do this?

And is it possible to put an datepicker in those add rows?

Patrick

Coordinator
Aug 23, 2011 at 1:29 PM

The template is the same for both edit and insert, but you can make the row looks differently in the two cases by testing if the model passed to the row is null, because during insertion the row is passed a null model.

I have an example of how different templates can be shown in different cases in this tutorial:  http://www.dotnet-programming.com/post/2011/07/20/Edititing-a-list-of-Heterogeneous-Types-with-the-Mvc-Controls-Toolkit.aspx 

The tutorial uses the SortableListFor instead of the DataGridFor but you can apply the same technique also to the DatagridFor

Aug 23, 2011 at 1:57 PM
Edited Aug 23, 2011 at 3:40 PM
That seems to work. I have just one other problem now. When I edit a row and cancel the edit again with @Html.DataButton(DataButtonType.Cancel, @Global.Cancel, null) It doesn’t allow the same row to edit again. When the button is pushed it just don’t do anything.
Aug 23, 2011 at 3:33 PM
Edited Aug 23, 2011 at 3:53 PM

I have one other problem. When the form is loaded with an empty grid and I add a new row I get this error: Uncaught TypeError: Cannot read property 'options' of undefined

The new row appears on the screen, but the add button dissapears.. What could be the problem?


Fixed this problem, forgot to put it in a form...

Coordinator
Aug 23, 2011 at 7:18 PM

 

When I edit a row and cancel the edit again with @Html.DataButton(DataButtonType.Cancel, @Global.Cancel, null) It doesn’t allow the same row to edit again. When the button is pushed it just don’t do anything.

Please post your View code. The fact that the second time the button doesn't work is propbably due to some previous javascMaybe error. Maybe you you mis-used the databutons

@Html.DataButton ?

How have you built the row template ? With a PartialView or with a 
Razor Helper? If you use Razor helpers it is @item.DataButton
Aug 23, 2011 at 7:27 PM
Edited Aug 23, 2011 at 7:28 PM

I build it as a partialview. In chrome I don't see any javascript errors.

This is the Grid code:

 @Html.DataGridFor(x => x.Autorisations, ItemContainerType.tr, "AutorisationItemEdit""AutorisationItemDisplay"null,"AutorisationItemInsert",
itemCss: "normalRow", altItemCss: "alternateRow")

This is the AutorisationEditTemplate (used the variable in the Viewbag to distinct an ad and an edit):

 

@model AutorisationDTO
           @{bool edit = ViewBag.Status == "Edited" ? true : false;}
            @Html.HiddenFor(model => model.AutorisationId)
            <td class="editor-field">
                 @if(edit){                 
                     @(@UICulture.Substring(0, 2).Equals("nl") ? Model.DutchDescription : Model.EnglishDescription) 
                 }else{
                          List<FeatureDTO> list = (List<FeatureDTO>)Session["Features"];
                          var items = new SelectList(list, "FeatureId""Description");
                          @Html.DropDownListFor(model => model.FeatureId, @items)
                 }
 
            </td>
            <td class="editor-label">
              @if (edit) {
                        @string.Format("{0:dd-MM-yyyy}", Model.StartDate)
              } else{
                        @string.Format("{0:dd-MM-yyyy}"DateTime.Now)
              }
            </td>
            <td class="editor-label">
            @if (edit) {
                        @Html.Telerik().DatePickerFor(model => model.EndDate).Min(DateTime.Now).Format("dd-MM-yyyy")
                        @Html.ValidationMessageFor(model => model.EndDate)
            } else {
                        @string.Format("{0:dd-MM-yyyy}", Model.EndDate)
            }
            
 
            </td>
            <td>
            @if (edit) {
                        @Html.DataButton(DataButtonType.Cancel, @Global.Cancel, null)
            } else {
                //A new record can't be cancelled, but must be deleted.
                        @Html.DataButton(DataButtonType.Delete, @Global.Cancel, null)
            }
            </td>

This is the AutorisationItemDisplay

 

@model AutorisationDTO
@Html.HiddenFor(x=>x.AutorisationId)
<td class="editor-field">
    @(@UICulture.Substring(0, 2).Equals("nl") ? Model.DutchDescription : Model.EnglishDescription) 
</td>
<td class="editor-label">
    @string.Format("{0:dd/MM/yyyy}", Model.StartDate)
</td>
<td class="editor-label">
    @string.Format("{0:dd/MM/yyyy}", Model.EndDate)
</td>
<td class="editor-label">
    @{
        if(Model.IsPending){
                               @Global.Status_Pending
 
        } else{
                  @Html.DataButton(DataButtonType.Edit, Global.Edit, null)
 
        }
    }
        </td>

This is the AutorisationItemInsert:

 @model AutorisationDTO
<td colspan="4">@Html.DataButton(DataButtonType.Insert, @Global.New, null)</td>

 

Coordinator
Aug 24, 2011 at 1:54 AM

There "suspect" thing that may cause errors:

 

1) Sincerely I have nor understood how you used the ViewBag in the items. Who is setting the ViewBag? The controller and the setting apply to ALL ROWS? If you want to distinguish a new fresh row from an edited one you have just to check  Model == null.

The template used to create new fresh row is passed a null Model!

2)  In the display template you test Model.IsPending...This might throw an exception if Model == null...Model is Always null for the template used to insert new fresh rows. You have to handle also the case Model == null!

3) You used a Telerick DatePicker...I don't know if it is compatible with my datagrid, because I don't know how the javascript of this control is handled. try removing it. In the Mvc Controls toolkit there is DateTimeInput you can use, that for sure is compatible with my grid.

4) What is the model you used? If you use an EF4 class automaticlly generated by the VisualStudio Designer you may have problems(with the grid...and also in several situation in a View). Avois using them in a View. You can copy them in other classes used just for

being used in Views or in Business  Layer, or you can use EF Code First that doesn't cause problems.

 

Aug 24, 2011 at 8:29 AM

1) The viewbag variable is filled by the toolkit. I found it by accident and it looked safer to me than working with the null value. Changed it to a check on null, but that didnt solve my problem.

2) Is pending is only evaluated when in edit mode, never in add mode.

3) I outcommented the the telerik lines and the problem still existed.

4) I use the EF4 on the backend but copy everyting to DTO objects in the frontend.

Patrick

Coordinator
Aug 24, 2011 at 1:47 PM

Your issue happens either when an error occurs during validation, or when initial values are copied into an edit row.  

To be sure the validation system is ok verify you have the last version of both jQuery, and of the validation plugin since using version that are not aligned creates js errors

Try also to cut the Telerick pickup instead of commenting it, since if yu cdo html style comments the control is rendered commented, and i may create problems if it contains js tags

Then if the issue is not solved please prepare a self contained project with NO DATABASE showing the issue and send it to me through the contact form of my Blog:http://www.dotnet-programming.com/contact.aspx

Something cause a js error during the row loadind, I will debug the js to dscover WHAT. 

Sep 13, 2011 at 9:45 AM

Telerik MVC was biting the mvc toolkit javascript. I added the toolkit javascripts to the telerik registrar to make it work (else there where jquery problems). Instead I had to disable jquery in the telerik script registrar and after that I added the jquery/mvctoolkit javascripts normally.