Dropdownlist client template using Razor MVC

[Devon]

I am trying to display a dropdownlist in the grid but the dropdown does not appear when it is clicked. Instead of seeing the "text" of the dropdown that corresponds to the numeric "value" (an enumeration) I am only seeing a "textbox" where the dropdownlist should appear. Another odd behavior happens when I randomly click on the grid the dropdown will appear intermittently.

Any help would be greatly appreciated.

Here is my razor grid:

@(Html.Kendo().Grid<CollectLiveEntities.Sensor>()

        .Name("SensorGrid")

        

    .Columns(columns => {

        columns.Bound(s => s.ID).Visible(false);

        columns.Bound(s => s.Name);

        columns.Bound(s => s.Register);

        columns.Bound(s => s.DataType)

            .Width(200)

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

          .Name("Value")

          .DataTextField("Value")

          .DataValueField("Key")

          .DataSource(source => {

              source.Read(read =>

              {

                  read.Action("DataTypes", "Details");

              });

          }).ToClientTemplate()

                    .ToHtmlString()

           );

 

            

        columns.Bound(s => s.ReadWrite);

        columns.Bound(s => s.DataFormula);

        columns.Bound(s => s.DataSource);

    })

        .ToolBar(toolBar => toolBar.Save())

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

        .Pageable()

        .Sortable()

        .Scrollable()

        .DataSource(dataSource => dataSource

            .Ajax()

            .Batch(true)

            .ServerOperation(false)

            .Model(model =>

            {

                model.Id(s => s.ID);

                model.Field(s => s.ID).Editable(false);

            })

                .Read(read => read.Action("Sensors_Read", "Details", new { deviceID = @Model.ID } ))

                .Update(update => update.Action("Sensors_Update", "Details"))

        )

     )

[Devon]

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?

@(Html.Kendo().Grid<CollectLiveEntities.PollFunctionArgument>()

     .Name("PollFunctionArguments")

     

 .Columns(columns => {

     columns.Bound(s => s.ID);

     columns.Bound(s => s.PollOrder);

     columns.Bound(s => s.Sensor.Name).ClientTemplate((@Html.Kendo().DropDownList()

    .BindTo((System.Collections.IEnumerable)ViewData["Sensors"])

     .Name("Sensorname_#=ID#")

      .DataTextField("SensorName")

         .DataValueField("SensorID")

         .ToClientTemplate()).ToHtmlString());

      

    

 })

     .ToolBar(toolBar => toolBar.Save())

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

     .Pageable()

     .Sortable()

     .Scrollable()

     .DataSource(dataSource => dataSource

         .Ajax()

         .ServerOperation(false)

         .Batch(true)

         .Model(model =>

         {

             model.Id(s => s.ID);

             model.Field(s => s.ID).Editable(false);

         })

             .Read(read => read.Action("PollFunctionArguments_Read", "Details", new { pollFunctionID = @Model.ID } ))

                     .Update(update => update.Action("PollFunctionArguments_Update", "Details"))

     )

  )

[Petur Subev]

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.

function onGridDataBound(e) {
        $('#GridName script').appendTo(document.body);
}

All the best,
Petur Subev
the Telerik team

[Devon]

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

model.Field(s => s.SensorID).Editable(false);

and add an onchangeevent to the clienttemplatedropdown

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

function SensorDropDownChanged(e) {

              var item = $('#PollFunctionArguments').data().kendoGrid.dataItem($(this.element).closest('tr'));

              item.set('SensorID', this.value());

[Adam]

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.

[Petur Subev]

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

[Swati]

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"))
)

 

 

[Swati]

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

[Devon]

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#")

[Swati]

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

[Devon]

 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.

 

<script id="CallListUserTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=AlarmCalloutListID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("CallList Users")
          .LoadContentFrom("CalloutListUsersDetails", "Callout", new { AlarmCalloutListID = "#=AlarmCalloutListID#" });
            })
            .ToClientTemplate())
</script>

[Swati]

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.