TabStrip content inside edit template

[Stéphan Parrot]

Hi everyone,
    I have a page that has a grid which I've set the editing mode to PopUp.
When I click edit on an item, a modal window pops up and it's content is using a partial view based on the Entities I'm editing.
This entities has lots of data which I've separated into sections using a tabStrip.
Each tabstrip should display infos from the entities of the item I've clicked.
I've tried to use LoadContentFrom which loads the content once and after that, it's always the same so, it's not practical when I click on another item's edit button.
So, I've tried the .Content method which works fine but, the model used is empty, nothing is set in it.

What would be the best approach to this scenario?

Thanks.

[Petur Subev]

Hello Stéphan,

I tried your scenario and it seems it is working fine. Could you check the attached project and see if it helps? If not modify the project and send it so we can take a look.

Regards,
Petur Subev
the Telerik team

[Stéphan Parrot]

Looks good but, if I change .EditorFor for DisplayFor on say, the Name property, nothing is displayed...
Also, I'd like to load the content using LoadContentFrom so I can use a Partial view and separate the markup in several files.
I've tried many things but nothing has worked so far.

[Petur Subev]

Hi Stéphan,

The Grid serializes this editor template and on the client when the Popup window is opened the Grid populates all input fields with the needed values according to their name attribute. Since there are no name attributes to the html elements generated from Html.DisplayFor helper, the Grid is not capable of populating them as well.
LoadContentFrom uses Ajax - as I mentioned the template is serialized on the server. So if you want you can render the partial directly to the template like this:

@(Html.Kendo().TabStrip().Name("ts").Items(it=>{
    it.Add().Text("t1").Selected(true).Content(@<text>
        This is customized Person edit template

        @Html.HiddenFor(model => model.PersonID)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

</text>);
    it.Add().Text("t2").Content(@<text>
    @(Html.Partial("test"))
        <div class="editor-label">
                @Html.LabelFor(model => model.BirthDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.BirthDate)
                @Html.ValidationMessageFor(model => model.BirthDate)
            </div>

    </text>);
}))

I hope it helps.

Kind Regards,
Petur Subev
the Telerik team

[Stéphan Parrot]

Thank you Petur.
I'm  not quite sure I understand why the "name" field cannot be "displayed"... Is it possible at all? If not, it's kind of bugged because, let's say I want to display a form with editable fields but with a headers filled with read-only informations...
Also, why using EditorFor on a DateTime doesn't render the DateTimePicker when loaded from Html.Partial?  

[Stéphan Parrot]

UPDATE:
Got a workaround for this:

Set an event handler on the Edit event of the grid:

[...]

    .Events(e=>{

        e.Edit("edit");

    })

[...]

The event handler :

<script>

    function edit(e) {

        $("#name").html(e.model.Name);

    }

</script>

Then in the partial view:

<div class="editor-field">

    <span id="name"></span>

</div>

I've found out that Telerik's extensions had the same behavior and the same workaround works:
http://www.telerik.com/community/forums/aspnet-mvc/grid/clajax-databinding-client-editing.aspx#1906385 

It would be nice if it was possible to use DisplayFor as well in Ajax editing as in real life application, we don't necessarilly want to edit everything.

Hope this will help someone else!

Cheers!

[Stéphan Parrot]

Well well... Another bump in the road...
Can't get a dropdownlist to be populated...
In my partial view, the dropdown is set like this:

...

 

 

        <div class="editor-field">

        @(Html.Kendo().DropDownListFor(model => model.ID)

            .DataSource(ds =>

            {

                ds.Read(a => a.Action("ReadData", "Home"));

            })

            .DataTextField("Name")

            .DataValueField("ID")

            .Name("sampleDDL")

        )

        </div>

 

...

I check the Network tab of chrome's browser developper tools and I clearly see the ReadData being called and it returns the proper json but the list isn't bound...

[Petur Subev]

Hi Stéphan,

This is strange, can you modify the project and send it back so we can take a look? Also you do not need to set the Name of the DropDownList when using the DropDownListFor helper - this way the name  attribute of the input will be as the name of your field i.e. ID.

@(Html.Kendo().DropDownListFor(model => model.ID) 


As I explained in my previous post the Grid relies on that name attributes to bound the values.

Regards,
Petur Subev
the Telerik team

[Stéphan Parrot]

Hi Petur,
Sorry, I forgot to come back to post an erratum as I've figured out why my lists weren't populated but it turns out I was using actions that weren't coded the way they should... My bad...

So all in all, it works perfectly!

The only thing that I'm a bit disappointed is the fact that DisplayFor isn't working but EditorFor and HiddenFor works... It's kinda weird and it should work the same way.

Thanks for your help! :)