[Solved] Nest dropdown in Grid

[M.]

<%

                 

                     Html.Telerik().Grid<DBCOnderhoud.Vis.ServiceProxy.CompleteTableVersionExport>(Model.CompleteTableVersionExports)

            .Name("TableVersionsGrid")    

            .Columns(columns =>

            {              

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId).Hidden(true);

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.Name).Title("Tabelnaam").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.IsForExport).Title("Extern uitleveren").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.NewTableVersionRequired).Title("Nieuwe versie gewenst").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableTypeId.TableTypeName).Title("Soort").Width("20%").HtmlAttributes(new { style = "text-align:left" });                                        

                columns.Template(c => {%>

            <% //= Html.DropDownListFor(c.TableVersions[0].TableVersionId, new SelectList(c.TableVersions[0].Version, "TableVersionId", "Version"))%>

                <%  

                                  

                    Html.Telerik().DropDownListFor(model => model.TableVersionInExport[0].TableVersion.TableVersionId)

                   .Name("TableVersion_" + c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId)             

                    .BindTo(new SelectList(

                        c.TableVersions, 

                        "TableVersionId", "Version")

                    )             

                    .HtmlAttributes(new { style = "font-size:11px;" })

                    .DropDownHtmlAttributes(new { style = "font-size:11px;" })

                    .Render();            

                        %>

            <%

            });

                

            })

                            .DataKeys(keys => keys.Add(c => c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId))                                                

                            .Scrollable(c => c.Height("450px"))

                            .Selectable()

                            .Sortable()

                            .Footer(false)

                            // .ClientEvents(events => events

                             //.OnRowSelect("onRowSelect")

                             //.OnLoad("onGridLoad")

                             //)

                            .Render();   

                                 

                        %>

<%

                 

                     Html.Telerik().Grid<DBCOnderhoud.Vis.ServiceProxy.CompleteTableVersionExport>(Model.CompleteTableVersionExports)

            .Name("TableVersionsGrid")    

            .Columns(columns =>

            {              

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId).Hidden(true);

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.Name).Title("Tabelnaam").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.IsForExport).Title("Extern uitleveren").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.NewTableVersionRequired).Title("Nieuwe versie gewenst").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableTypeId.TableTypeName).Title("Soort").Width("20%").HtmlAttributes(new { style = "text-align:left" });                                        

                columns.Template(c => {%>

            <% //= Html.DropDownListFor(c.TableVersions[0].TableVersionId, new SelectList(c.TableVersions[0].Version, "TableVersionId", "Version"))%>

                <%  

                                  

                    Html.Telerik().DropDownListFor(model => model.TableVersionInExport[0].TableVersion.TableVersionId)

                   .Name("TableVersion_" + c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId)             

                    .BindTo(new SelectList(

                        c.TableVersions, 

                        "TableVersionId", "Version")

                    )             

                    .HtmlAttributes(new { style = "font-size:11px;" })

                    .DropDownHtmlAttributes(new { style = "font-size:11px;" })

                    .Render();            

                        %>

            <%

            });

                

            })

                            .DataKeys(keys => keys.Add(c => c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId))                                                

                            .Scrollable(c => c.Height("450px"))

                            .Selectable()

                            .Sortable()

                            .Footer(false)

                            // .ClientEvents(events => events

                             //.OnRowSelect("onRowSelect")

                             //.OnLoad("onGridLoad")

                             //)

                            .Render();   

                                 

                        %>

<%

                 

                     Html.Telerik().Grid<DBCOnderhoud.Vis.ServiceProxy.CompleteTableVersionExport>(Model.CompleteTableVersionExports)

            .Name("TableVersionsGrid")    

            .Columns(columns =>

            {              

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId).Hidden(true);

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.Name).Title("Tabelnaam").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.IsForExport).Title("Extern uitleveren").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.NewTableVersionRequired).Title("Nieuwe versie gewenst").Width("20%").HtmlAttributes(new { style = "text-align:left" });

                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableTypeId.TableTypeName).Title("Soort").Width("20%").HtmlAttributes(new { style = "text-align:left" });                                        

                columns.Template(c => {%>

            <% //= Html.DropDownListFor(c.TableVersions[0].TableVersionId, new SelectList(c.TableVersions[0].Version, "TableVersionId", "Version"))%>

                <%  

                                  

                    Html.Telerik().DropDownListFor(model => model.TableVersionInExport[0].TableVersion.TableVersionId)

                   .Name("TableVersion_" + c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId)             

                    .BindTo(new SelectList(

                        c.TableVersions, 

                        "TableVersionId", "Version")

                    )             

                    .HtmlAttributes(new { style = "font-size:11px;" })

                    .DropDownHtmlAttributes(new { style = "font-size:11px;" })

                    .Render();            

                        %>

            <%

            });

                

            })

                            .DataKeys(keys => keys.Add(c => c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId))                                                

                            .Scrollable(c => c.Height("450px"))

                            .Selectable()

                            .Sortable()

                            .Footer(false)

                            // .ClientEvents(events => events

                             //.OnRowSelect("onRowSelect")

                             //.OnLoad("onGridLoad")

                             //)

                            .Render();   

                                 

                        %>

Hello,

I have tried to nest dropdowns in a grid.

My model contains an Ilist with in it some data and and another Ilist.
So for each row there is an Ilist to fill the dropdown.

Then I have an IList in my model in which I would like to contain a result list of all the selected items in all the dropdowns.

It works fine to display it but I cannot get the result list to connect to the dropdowns.

I have tried it with the code below, but I am lacking an Index for my result list.

<%                                 Html.Telerik().Grid<DBCOnderhoud.Vis.ServiceProxy.CompleteTableVersionExport>(Model.CompleteTableVersionExports)

     .Name("TableVersionsGrid")   

     .Columns(columns =>

     {             

       columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId).Hidden(true);

       columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.Name);

       columns.Bound(o => o.TableProjectTableDefinition.IsForExport);

       columns.Bound(o => o.TableProjectTableDefinition.NewTableVersionRequired);

       columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableTypeId.TableTypeName);                                       

       columns.Template(c => {%>       

            <%                                   

            Html.Telerik().DropDownListFor(model => model.TableVersionInExport[THIS_IS_WHERE_I_WANT_AN_INDEX].TableVersion.TableVersionId)

            .Name("TableVersion_" + c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId)            

            .BindTo(new SelectList(

            c.TableVersions, "TableVersionId", "Version")

            )            

            .HtmlAttributes(new { style = "font-size:11px;" })

            .DropDownHtmlAttributes(new { style = "font-size:11px;" })

            .Render();           

            %>

            <%

            });               

            })

            .DataKeys(keys => keys.Add(c => c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId))                                               

             .Scrollable(c => c.Height("450px"))

             .Selectable()

             .Sortable()

             .Footer(false)

             .Render();  

             %>

Any help would be appreciated.

Best regards,

Mark Berghaan

[Georgi Krustev]

Hello Mark,

If I am understanding you right you need to the row id in order to get correct selected value. If this is the case I believe that you can use c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId value as an index in this case. 

If this suggestion does not work for you, you can declare rowIndex variable, which you should use as an index for your collection and increment it in the RowAction method.

If the problem still persists I will suggest you send us a simple test project which replicates the issue. Thus I will be able to review it locally and advice your further.

Regards,
Georgi Krustev
the Telerik team

[M.]

Hello Georgi,

The id's in my tablenameId are not a complete list running from 0 to n.
I will look into the rowAction tip.

Thank you sofar,

Mark Berghaan

[M.]

Hello,

I have now tried the RowAction method simular to the one used in this post:

http://www.telerik.com/community/forums/aspnet-mvc/grid/grid-rowaction-not-working-properly.aspx

When I response.Write the rowIndex after the grid has been made it did raise to the correct number of rows.
But the rowIndex becomes the final rowIndex in the output html inside the grid.
so all the output for each row becomes : 

TableVersionsInExport[1]_TableVersion_TableVersionId

instead of:
TableVersionsInExport[0]_TableVersion_TableVersionId for the first row
TableVersionsInExport[1]_TableVersion_TableVersionId for the second row

This is what I tried: 

<%
int rowIndex = -1;                    Html.Telerik().Grid<DBCOnderhoud.Vis.ServiceProxy.CompleteTableVersionExport>(Model.CompleteTableVersionExports)
            .Name("TableVersionsGrid")
            .Columns(columns =>
            {
                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId).Hidden(true);
                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.Name);
                columns.Bound(o => o.TableProjectTableDefinition.IsForExport);
                columns.Bound(o => o.TableProjectTableDefinition.NewTableVersionRequired);
                columns.Bound(o => o.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableTypeId.TableTypeName);
                columns.Template(c => {%>
                <%
                    Html.Telerik().DropDownListFor(model => model.TableVersionInExport[rowIndex].TableVersion.TableVersionId)
                    .BindTo(new SelectList(
                        c.TableVersions,
                        "TableVersionId", "Version")
                    )
                    .HtmlAttributes(new { style = "font-size:11px;" })
                    .DropDownHtmlAttributes(new { style = "font-size:11px;" })
                    .Render();
                        %>
            <%
            });

            })
            .RowAction(row =>
            {
                rowIndex++;
            })
            .DataKeys(keys => keys.Add(c => c.TableProjectTableDefinition.TableDefinitionId.TableNameId.TableNameId))
            .Scrollable(c => c.Height("450px"))
            .Selectable()
            .Sortable()
            .Footer(false)
            .Render();
 Response.Write("<br>rowIndex: " + rowIndex);
                        %>

Thanks in advance,

Mark Berghaan

[M.]

I have managed to get things working.

I changed the dropdownlistfor to dropdownlist and changed the name of the dropdownlist so that it would bind to the model:

 .Name("TableVersionsInExport[" + rowIndex++  +"].TableVersion.TableVersionId");