[Solved] How to use different model for Grid and Edit?

[Navneet]

Hi,

I just started reviewing telerik MVC grid and want to keep the data transfer to minimal in case of related tables. Also, I am using AJAX Binding for the Grid. 

Example: I have Department Table that has Employee Foreign Key to identify the Department Head.

For the MVC Grid, I only want to show the Department Name and Employee Full Name (First Name+Last Name) with hidden department ID i.e. the model for Grid will have only these information.

But for editing I want to show all the Department information i.e. Phone #, Location, Department notes etc. In this case the Model for Edit Mode will be Department with a picklist for Employee.

How can I do this? I am using EF code first model.

Thanks in advance.
Navneet

[Navneet]

Anyone!!!!

[Daniel]

Hi Navneet,

This is not supported when Ajax binding mode. All model properties should be available client-side.  Binding to only part of the editable properties can be accomplished with Server editing by using custom editor template in PopUp or InForm mode.

Kind regards,
Daniel
the Telerik team

[Navneet]

Daniel:

Appreciate your response. Any plans for providing this functionality?

Currently I update my model to include the information in the model and that will solve the problem for small lists. But for bigger models, I would like to have the first option.

Thanks once again.
Navneet

[Daniel]

Hello Navneet,

Currently, we don't plan to add this functionality. I logged it in our system and if there are more requests we will schedule it for further investigation. 
Another way in which this could be achieved, is to use a custom window to edit your model and rebind the Grid afterwards. I attached sample project which implements this scenario. I hope it helps.

All the best,
Daniel
the Telerik team

[Navneet]

Daniel:

I greatly appreciate your response.

I am surprised people don't want this feature because this makes a great sense to not only reduces network traffic but frees up dependency of the grid with the the details of the model.

In our case, big models typically have 20+ columns with 5+ foreign keys. So in our grid we want to ONLY show mostly 8 important columns. But in the edit mode, we want to show all the information as the main model also has parent/child relationships. By having a custom model for Grid and Edit mode, we will be getting the best of both worlds. Those are my 2 cents in support of this feature. Also, as a third party vendor, this will surely put you ahead of other vendors who have not thinking about this users issue.

Having said that, I will check out the sample code that you have provided and post my feedback.

Thanks,
navneet

[Alejandro]

If you use a custom model editor for the grid pop-up, validation stops working.  Is there something you have to do to re-enable it?  It works if you don't have a custom template, like you have in your demo, but if you add the custom template, it fails.

Thanks,

Alejandro

[Navneet]

Alejandro:

In my case, validation seems to be working. Please check the method you are calling to update and have the check for (ModelState.IsValid) and if it's false return the partial view

<pre>
 if (ModelState.IsValid)
{
    //do the save
}
else
{
    return PartialView(<<partial view name>>, updatedModel);
}
</pre>

Daniel:
I got this implemented in my project by following the example. In my case, the edit form was not closing after successful save. Any ideas?

Best,
Navneet

[Alejandro]

Navneet,

If the call has made it to the controller, then the client side validation is not working. :-)  Server side validation I can get to work, but client side is the one that stops working.  If you remove the partial view, then try again, you will see that if you click the checkmark, the call never reaches the server before you get the validation errors.  With the partial view, it gets submitted, and you have to validate serverside.

Thanks for your help though,

-Alejandro

[Daniel]

Hello All,

I will need more information in order to determine what is causing the problems.

Navneet:
Have you added the Grid's OnDataBinding handler which is used to close the Window? Are there any errors thrown? It would be helpful if you could send the project so I could examine your current setup.

Alejandro:
What is the custom editor? Are the validation attributes added to the input elements?

Regards,
Daniel
the Telerik team

[Navneet]

Daniel:

I am attaching part of the project (controller and views) for you.

Alejandro:
You are right, client side validation for skipped in my case also.

Thanks,
navneet

[Alejandro]

Daniel,

Thanks for your prompt reply.  I added the validation only on the model, then I created a new partial view (Razor), strongly typed to my object, and either create or edit.

at the top of the view, I have the defaults:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

which is added by default, and I also added
@Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(true)
No other scripts.  I also make no other changes to the editor template.
I have tried various combinations of true/false as well as removing/adding those scripts...I'm pretty sure I've tried all or most combinations.

With firebug enabled, I noticed that if I so much as click on a field in the popup, I get "f is undefined."

I attached a minimal project.  Both planes and cars are missing a required field, and the car has a custom editor, so if you attempt to edit the car, you get a 404, if you edit the plane, you get a validation error.

 Thanks for your help,

Alejandro

[Daniel]

Hello again,

Navneet:

The Window isn't closing because the onDataBound function isn't subscribed to the Grid's OnDataBound event. You should add the following line to the Grid's configuration:

.ClientEvents(events => events.OnDataBound("onDataBound"))

Regarding the client validation - I am not sure what is causing the problem. Could you provide more information regarding the jquery.validate version and the browser you are using? There is a known problem with jQuery 1.6.+ and jquery.validate 1.8 when used in Internet Explorer versions prior to 9. If that is the case you should use jquery.validate 1.9. If not, I will need a runnable project that reproduces the problem to in order to investigate further.
Also, adding the validation scripts isn't necessary as the form validation is added with jQuery.validator.unobtrusive.parse method.

Alejandro:

When defining a custom editor template for the Grid, you should use a partial view without a form. The Grid uses its own form to handle the field editing and validation. Also, the scripts should be removed from the partial view. Adding jQuery will cause all element's data to be cleared and the validation scripts aren't necessary in this case.

Regards,
Daniel
the Telerik team

[Alejandro]

Daniel,

When I removed the Form element, the validation started working on the grid.

Thanks for your help,

Alejandro

[Alejandro]

And one more:
How do I get the values of the model?  Or get some properties read only in the custom editor?  Even setting .ReadOnly on the column (plane.year) doesn't change the editor.

If I take the car template from before, and I add a @Html.DisplayFor(model => model.year), it shows 0
but @Html.EditorFor(model => model.year) shows 2012.

This works fine if you don't go via the grid.  Am I missing something?

I have attached the updated version of the project.

Thanks,

Alejandro

[Daniel]

Hi Alejandro,

This is not supported out of the box when using Ajax binding. The editor template is serialized on the server with the model's default values and only input elements with matching names are populated on the client. If you wish the property not to be part of the editor template you should just remove it.
There are two options to display the property value without it being editable.

1. Use disabled input in the editor template:
   

   <div class="editor-label">
       @Html.LabelFor(model => model.year)
   </div>
   <div class="editor-field">
       @Html.TextBoxFor(c => c.year, new { disabled = "disabled" })
   </div>

2. Use a value holder in the editor template and populate it from the dataItem event argument in the OnEdit client-side event:
   

   <div class="editor-label">
       @Html.LabelFor(model => model.year)
   </div>
   <div id="yearValue">
   </div>

   function onEdit(e) {
       if(e.mode == 'edit'){
           $(e.form).find("#yearValue").text(e.dataItem.year);
       }
   }

   
   
   

Greetings,
Daniel
the Telerik team

[Navneet]

Daniel:

Thanks for your assistance. I was able to get it working by binding on onDataDound  event as you had suggested. Also, the code snippet you provided worked directly as I was able to use your code to implement edit/copy/new feature very easily into the application and avoid Grid toolbar altogether.  

.ClientEvents(events => events.OnDataBound("onDataBound"))

Also, I updated my jquery validate to be 1.9 as you had suggested. Client validation is working now, all the features are working now.

Thanks for your assistance and I am extremely sorry for my late response.

Best Regards,
Navneet