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

Dropdownlist in grid header

7 Answers 855 Views

Grid

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

Stanley asked on 21 Sep 2012, 04:27 PM

I have the following code in a partial view (MVC4)

<fieldset>

<legend>Additional Loose Parts</legend>

<table>

<tr>

<td>Part Number</td>

<td>Quantity</td>

<td></td>

</tr>

<tr>

<td>@( Html.Kendo().DropDownList()

.Name("AvailableLooseParts1")

.Events(ev => ev.Change("AutomationDeviceMappingDDLChanged"))

.DataTextField("Name")

.DataValueField("PartNumberId")

.DataSource(source => source.Read(read => read.Action("LooseParts", "AutomationDevice")))

.HtmlAttributes(new { style = string.Format("width:{0}px", 200) })

)

</td>

<td>

<input type="text" id="textboxLoosePartQuantity" class="bpNumeric" style="width: 30px" /></td>

<td>

<button type="button" id="buttonAddLoosePart" onclick="onAddLoosePart()" title="Add Loose Part" value="Add"></button>

</td>

</tr>

<tr>

<td colspan="3">

@(Html.Kendo().Grid<BluePillar.Aurora.DataEntity.Models.AutomationDevicePartsMapping>()

.Name("GridAutomationDevicePartsMapping")

.ToolBar(toolbar => toolbar.Template(

@<text>

Site:

@( Html.Kendo().DropDownList()

.Name("AvailableLooseParts2")

.Events(ev => ev.Change("AutomationDeviceMappingDDLChanged"))

.DataTextField("Name")

.DataValueField("PartNumberId")

.OptionLabel("Any")

.DataSource(source => source.Read(read => read.Action("LooseParts", "AutomationDevice")))

)

</text>

))

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Sortable()

.Scrollable()

.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.AutomationDeviceId);

// model.Field(p => p.PartNumberName).Editable(false);

})

.Create(update => update.Action("CreateNewAutomationDevicePartsMap", "AutomationDevice"))

.Read(read => read.Action("GetAutomationDeviceMaps", "AutomationDevice").Data("AutomationDeviceID"))

.Update(update => update.Action("UpdateAutomationDevicePartsMap", "AutomationDevice"))

.PageSize(50)

)

.Events(e => e.DataBound("GridAutomationDevicePartsMapping"))

.Columns(columns =>

{

columns.Bound(s => s.PartNumberName)

.Width(300);

//.ClientTemplate(Html.Kendo().DropDownList()

// .Name("PartNumberxyz")

// .Events(ev => ev.Change("AutomationDeviceMappingDDLChanged"))

// .DataTextField("Name")

// .DataValueField("PartNumberId")

//                    .DataSource(source => source.Read(read => read.Action("LooseParts", "AutomationDevice")))

// .ToClientTemplate()

// .ToHtmlString());

columns.Bound(p => p.QuantityMultiplier).Title("Quantity");

columns.Command(commands => commands.Destroy()).Width(100);

})

)

</td>

</tr>

</table>

</fieldset>

when I run this code the dropdownlist outside of the grid (AvailableLooseParts1) shows but the one in the Toolbar section of the grid (AvailableLooseParts2) does not appear at all. They are identical except for the names. Can someone please give me a clue what I could possibly be doing wrong.

7 Answers, 1 is accepted

answered on 22 Feb 2018, 09:04 AM

Hello, Priyanka,

The MVC approach is similar, an input element has to be added to the HeaderTemplate, and then the DropDown should be initialized with jQuery. The main difference is that the DropDown should be initialized in the dataBound event of the Grid:

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI/GridColumnBase?multiselect%2Foverview#properties-HeaderTemplate

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Dropdownlist in grid header

7 Answers, 1 is accepted