Dropdownlist client template using Razor MVC

I've attempted a second grid with similar dropdowns required, and I'm am getting the same result.
When the grid first loads the template cells are textboxes.
If I click on the template cells they textbox cells.
When I click on an adjacent cell the textboxes turn into dropdowns.
After they turn into dropdowns they will remain dropdowns..

Am I missing an edit-behaviour? Or is this a bug in the grid?

Hello Devon,

The initialization scripts are not being executed when the Grid is bound. And your widgets are not initialized.
You can use the following code to make your scripts execute on the DataBound event.
e.g.


All the best,
Petur Subev
the Telerik team

In case anyone else runs into this problem...
To get the Dropdown to display properly I had to set the .editable to false
and add an onchangeevent to the clienttemplatedropdown

Is there a better way to do this now?

I can attach the scripts to the body (on grid DataBound event), but they are wrapped in jQuery call which just attaches them to document.ready event. They won't get called. I could manually write javascript to initialize them, but I would prefer to reuse the generated scripts if possible.

Hi again,

jQuery no longer executes the scripts when they are moved in the DOM, instead you need to manually eval the script tags content. More in the subject can be found here:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template?

Kind Regards,
Petur Subev
Telerik

Hi Petur

Can you please look at my implementation scenario? 

It is similar to Devon's issue - the first row of the grid shows the dropdown html properly (with correct data binding and selection) but the subsequent rows show only a textbox (input of type text). The text box has the correct enum value as fetched from the database. How can we make the dropdown html render in subsequent grid rows?

The only difference in this case from Devons case is that here it is a detail template and Devon has column template.

The clientDetailTemplate is attached to this post and the Kendo UI grid is given below with the .ClientDetailTemplateId("SOLEDetailsTemplate")  ---

@(Html.Kendo().Grid<BESOWebApi.Domain.OrderLineExtensionViewModel>()
.Name("listOfCustomerLineItemExtensions")
.ClientDetailTemplateId("SOLEDetailsTemplate")
.HtmlAttributes(new { style = "height:500px;" })
.Columns(columns =>
{
columns.Bound(e => e.PullId).Title("Pull ID").Filterable(true);
columns.Bound(e => e.OrderNumber).Title("SO#").Filterable(true);
columns.Bound(e => e.PurchaseOrderNumber).Title(("PO#")).Filterable(true);
columns.Bound(e => e.LineNumber).Title("Line#");
columns.Bound(e => e.QuantityOnLine).Title("Qty On Line");
columns.Command(command => command.Custom("Assign").Click("createAndAssignExtension"));
})
.DataSource(ds => ds.WebApi()
.PageSize(20)
.Model(model => { model.Id(lineExt => lineExt.PullId); model.Field(lineExt => lineExt.PullId).Editable(false); })
.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "SalesOrderLineExtension", action = "Get" }))
.Data("getSalesOrderLineExtensionParameter").Type(HttpVerbs.Get))
.ServerOperation(false)
)
.Filterable(fltr => fltr.Mode(GridFilterMode.Menu)
.Operators(op => op.ForString(str => str.Clear()
.Contains("Contains")
.DoesNotContain("Does not contain")
.StartsWith("Starts with")
.EndsWith("Ends with")
.IsEqualTo("Is equal to")
))
.Extra(false))
.Pageable()
.Sortable()
.Scrollable(s => s.Virtual(true))
//.AutoBind(false)
.Events(events => events.DataBound("onKendoGridDataBound"))
.Events(events => events.DetailExpand("detailExpand"))
)

 

 

The detail template <script> tag is in the attached img file here. The earlier attachment is not complete. Thanks

Swati I've had a similar problem when I had client templates with the same ID/Name.

 I noticed in your client template it says .Name("drpPrintOnInvoice"), Try to give each client template a unique name like: .Name.Name("drpPrintOnInvoice_#=ID#")

Hi Devon

Thanks for the reply. I tried adding the unique field to the dropdownlist id.

Here is what I noticed after this implementation -

The unique id for the kendo grid data is alphanumeric (PullId). So assigned that as id like this - .Name("drpPrintOnInvoice_#=PullId#")

Grid rows with characters as a part of PullId (like PullId='10007755-30' or PillId='test') are still showing textbox but grid rows with all numeric PullId (like PullId= '055055700850717' are rendering the dropdown.

Would you know a work around for this? I need id to be something from grid datasource like PullId to be able to read the dropdown value later, while saving.

Thanks

 I went through similar problems when I first did the Client Detail Template. I ended up using a tabstrip as the detail template and loading the "Details" from a new view. I found this works quite well so I stuck with it.

I don't think this is the way telerik/kendo envisioned it but it works for me.

 

Thanks Devon. Your previous solution worked

.Name("drpPrintOnInvoice_#=PullId#")

I was not trimming the PullIds earlier.

After trimming the PullId, the dropdown renders as dropdown.
Thanks again.