DropDowns in detail table showing wrong data until clicked. They show what parent row dropdown shows.

[Keith]

Grid with Parent rows and Detail Table. Parent row has a DropDown bound to choices. The data in the Detail Table includes a DropDown bound to same possible choices. When page 1st renders all the DropDowns in the detail table display the same choice that the parent row shows.  It is possible for parent row to have 1 value then each of the 5 detail rows to have different values for the column that is manipulated with dropdown. The problem is that the detail dropdowns although bound to data rows with proper value instead show the text that the parent dropdown shows.

This is before user makes any choices. If user clicks on dropdown in detail table it will change to dropdown and show the correct choice.

How to get the detail tables to render correctly when initially displayed? I added a couple of images for illustration. InitialRender.png is the screen right after it loads. Afterclick.png is the screen after clicking the dropdown control, but not changing the value. You see that the dropdown has selected the value that corresponds to the data in the datasource for that row. The dropdowns in the detail rows dont even have a value of "Multiple" to select.

 

 

 

 

[Anton Mironov]

Hi Keith,

Thank you for the details provided.

After reading the post a couple of times, I am still not sure what the desired result should look like.

The images attached are the same.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you with a runnable sample and further instructions.

Kind Regards,
Anton Mironov

[Keith]

Sorry must have saved the Initial Render png wrong. I have updated.  The desired result is the child dropdowns when initial rendered should all say "Default" besides the last which should say "Detailed". Why? Because that is what the data for the children dropdowns values are. "Multiple" is only valid in the parent and doesnt even exist in the lists the children dropdowns are set to.

[Eyup]

Hi Keith,

The good news is that the DropDowns in Edit Mode get their correct value, which is the more important part :)

The text "Multiple" in cells during view mode (initial render) is probably there due to mismatching ClientTemplate() definition. Can I kindly ask you to modify this property to something else and let me know about the result? For instance:

columns.Bound(p => p.Category).ClientTemplate("\\\\#=Category.CategoryName\\\\#");

The hash escapings here are required because without them the Template content will be evaluated by the parent/main grid. But together with them, the Template content will be evaluated For the inner detail grid:
https://docs.telerik.com/kendo-ui/framework/templates/essentials#using-hash-literals

This should fix the issue. Feel free to give it a try and let me know if it helps you.

P.S. You can also check this sample for dropdownlist editing:
https://demos.telerik.com/aspnet-mvc/grid/editing-custom

[Keith]

Is there any documentation on how ClientTemplate names should be formatted?  I havent found anything.

[Eyup]

Hi Keith,

I am glad the provided info has been helpful!

The most beneficial documentation on MVC Template questions is this article:
https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/faq

[Keith]

I will look at this shortly. Will be back working on this task next week if plans are followed.

[Eyup]

Of course. Feel free to take your time.

[Keith]

What I dont see is the proper naming for the ClientTemplate in the child table template I have:

Parent Drop Down list markup

columns.Bound(c => c.ETCBasis).ClientTemplate("#=ETCBasis.Name#").Sortable(false).Width(150);

Child Drop Down list 

columns.Bound(c => c.DetailETCBasis).ClientTemplate("#=ETCBasis.Name#").Sortable(false).Width(150);

The name of the property in my object is DetailETCBasis and is defined as follows:

[UIHint("DetailETCBasisTemplate")]
public DetailETCBasisSelectionViewModel DetailETCBasis { get; set; }

DetailETCBasisSelectionViewModel is defined as

    public class DetailETCBasisSelectionViewModel
    {
        public string Name { get; set; }
        public int Id { get; set; }
        public string Selected { get; set; }
    }

The template is defined as

@model PTAF_ASP.Models.DetailETCBasisSelectionViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Id")
        .DataTextField("Name")
        .Value(Model.Selected)
        .Events(e =>
        {
            e.Select("etcBasisDropDownItemSelected");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetBasisList", "ETCWorksheet"))
        )
)

What I dont understand is why does the ClientTemplate work when the value is #=ETCBasis.Name# but not #=DetailETCBasis.Name#

To me in the parent it should be #=ETCBasis.Name# and in the child it should be #=DetailETCBasis.Name#

Why? Well ETCBasis is the property in the parent and that is an object itself with a property called Name. If I change the name of the property to say LongName I need to change the template hashtag to #=ETCBasis.LongName# so it does seem to be tied to the property name.

So in summary parent class for the parent row called WorkSheetViewModel and has a property called ETCBasis which is typed as ETCBasisViewModel for the grid it is using a Template called ETCBasisTemplate which is a dropdown as defined earlier. Then WorksheetViewModel has a list of children that each have a property called DetailedETCBasis which is typed as DetailedETCBasisViewModel with also uses a template like defined above. Only difference between the two templates are the Model and the method in the controller to get the items for the drop down.

[Eyup]

Generally, if the Child DropDownList is placed within another template, its script evaluation should be escaped, for example like this - \\#. More information you can find here:
https://docs.telerik.com/kendo-ui/framework/templates/essentials#using-hash-literals

If the issue remains, feel free to open a formal support ticket and share a runnable isolated version of your app so we can reproduce the problem locally. Then, we will be able to replicate and troubleshoot the issue locally, and escalate the matter for deeper technical insight and more precise solution.

[Keith]

It wasnt clear that I needed to use the \\ in the Child Grid Template definition. I stumbled across this yesterday in an example for another purpose and saw the \\ and simply tried it. The link really isnt all that clear why it is needed. I find documentation on ClientTemplate to be confusing at best.

[Keith]

So came across something else not clear how to do.

Parent dropdown gets changes and I can ripple through and change the datasource of all the children.  The labels representing the dropdowns of the child gets changed to match the parent. This is the desired result, but once you click on a dropdown in the child/detail grid the selected item remains what it originally was. The changing the of the child row datasource doesnt actually change the selected item, just changes what is visible in the label.

How to change so that the selected item represents what the label shows?

[Eyup]

Hi Keith,

Thank you for writing back to us. I hope you are doing well :)

Since this is a bit different question, I have created a new Support Thread for this matter. Its ID is 1625169.

You can expect a follow-up there.