This is a migrated thread and some comments may be shown as answers.

[Solved] Html.Telerik().DropDownListFor in ClientTemplate

1 Answer 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Greg
Top achievements
Rank 1
Greg asked on 09 Dec 2011, 07:46 PM
MVC3

I'm using Telerik grid with a Html.Telerik().DropDownListFor .  I need to recreate this dropdown  after ajax sorting, but I'm having a real problem maintaining the same behavior.  I know it needs to go into a ClientTemplate ... but how?

        <% int Iter = 0; %><%Html.Telerik().Grid(Model.SearchResults)
            .Name("Grid")
            .TableHtmlAttributes(new
                {
                    summary = "Manage Class Properties"
                })
            .HtmlAttributes(new { @style = "font-size: .9em; font-family: Arial, Verdana, Helvetica, Sans-Serif; padding-bottom: 0;margin-top:0;" })
            .DataBinding(databinding => databinding.Ajax().Select("_ManageClassPropertiesResults", "Administration", new { QuarterCode = Model.QuarterCode, instructor = Model.Instructor, courseName = Model.CourseName }))
            .Columns(columns =>{
                columns.Bound(model => model.QuarterName)
                    .Title("Quarter")
                    .Width(60);
                columns.Bound(model => model.ProgramLevelCode)
                    .Title("Program Level")
                    .Width(70);
                columns.Bound(model => model.InstructorName)
                    .Title("Instructor")
                    .Width(110);
                columns.Bound(model=> model.SiteDescription)
                    .Template(o =>{ %><%: Html.HiddenFor(model => Model.SearchResults[Iter].CourseId)%><%: Html.TextBoxFor(model => Model.SearchResults[Iter].SiteDescription, new { maxlength = "50" })%><% })
                    .ClientTemplate("<input id='SearchResults_" + Iter + "__CourseId' name='SearchResults[" + Iter + "].CourseId' type='hidden' value='<#= CourseId #>' /><input id='SearchResults_" + Iter + "__SiteDescription' maxlength='50' name='SearchResults[" + Iter + "].SiteDescription' type='text' value='<#= SiteDescription #>' />")
                    .HtmlAttributes(new { style = "font-size:.95em;" })
                    .Title("Site Description")
                    .Width(160);
                columns.Bound(model => model)
                    .Template(o =>{%><%: Html.Telerik().DropDownListFor(model => Model.SearchResults[Iter].ClassTimingCode)
                        .BindTo(new SelectList(Model.ClassTimingList, "Value", "Text"))
                        .HtmlAttributes(new { style = "font-size: .95em; width: 120px; background-color: #fff; border:0;" })
                        .DropDownHtmlAttributes(new { style = "font-size: .95em; width: 120px; border-color: #cccccc;" })%><%})
                    .Title("Class Timing")
                    .Width(110);
                columns.Template(o =>{%><% Iter = Iter + 1; %><%})
                    .ClientTemplate(" Iter = Iter + 1;")
                    .Hidden();
                columns.Template(o =>{%><%: Html.HiddenIndexerInputForModel() %><%})
                    .ClientTemplate("" + Html.HiddenIndexerInputForModel() + "")
                    .Hidden();
                            })
            .Sortable()
            .Pageable(paging => paging.Style(PagerStyles).PageSize(25, new[] { 5, 10, 15, 25, 50, 200 }).Position(POSITION))
            .NoRecordsTemplate("<p class='instructions'>No Records Available</p>")
            .Render();
        %>

1 Answer, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 22 Dec 2011, 07:46 PM
Update ...

Could not figure it out so I simply added a select control to the template field, works fine now.

columns.Bound(o=>o.ClassTimingCode)
   .Template(o =>{%><select id="SearchResults_<%= Iter %>__ClassTimingCode" name="SearchResults[<%=Iter%>].ClassTimingCode"  class="t-widget t-dropdown t-dropdown-wrap t-state-default" style="font-size: .95em; width: 120px; background-color: #fff;" ><option style = "font-size: .95em; border-color: #cccccc;"  value="A" <%: Model.SearchResults[Iter].ClassTimingCode == "A" ? "selected=selected" : String.Empty %> >Afternoon</option><option style = "font-size: .95em; border-color: #cccccc;" value="D" <%: Model.SearchResults[Iter].ClassTimingCode == "D" ? "selected=selected" : String.Empty %> >Day</option><option style = "font-size: .95em; border-color: #cccccc;" value="N"  <%: Model.SearchResults[Iter].ClassTimingCode == "N" ? "selected=selected" : String.Empty %> >Night</option></select><%})
   .ClientTemplate("<select id='SearchResults_<#= index #>__ClassTimingCode' name='SearchResults[<#= index #>].ClassTimingCode' class='t-widget t-dropdown t-dropdown-wrap t-state-default' style='font-size: .95em; width: 120px; background-color: #fff;' ><option style = 'font-size: .95em; border-color: #cccccc;'  value='A' <#= (ClassTimingCode == 'A') ? selected=\"selected\" : '' #> >Afternoon</option><option style = 'font-size: .95em; border-color: #cccccc;' value='D' <#= (ClassTimingCode == 'D') ? selected=\"selected\" : '' #> >Day</option><option style = 'font-size: .95em; border-color: #cccccc;' value='N' <#= (ClassTimingCode == 'N') ? selected=\"selected\" : '' #> >Night</option></select>")
   .Encoded(true)
   .Title("Class Timing")
   .Width(140);
Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Share this question
or