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

Dropdownlist client template using Razor MVC

11 Answers 2906 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Devon
Top achievements
Rank 1
Devon asked on 21 Aug 2012, 05:11 PM

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

11 Answers, 1 is accepted

Sort by
0
Devon
Top achievements
Rank 1
answered on 23 Aug 2012, 04:18 PM
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"))
     )
  )
0
Petur Subev
Telerik team
answered on 24 Aug 2012, 04:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Devon
Top achievements
Rank 1
answered on 29 Aug 2012, 08:24 PM
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());
0
Adam
Top achievements
Rank 1
answered on 16 Oct 2013, 10:32 PM
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.
0
Petur Subev
Telerik team
answered on 22 Oct 2013, 07:35 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Swati
Top achievements
Rank 1
answered on 12 Feb 2016, 01:43 PM

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

 

 

0
Swati
Top achievements
Rank 1
answered on 12 Feb 2016, 01:48 PM
The detail template <script> tag is in the attached img file here. The earlier attachment is not complete. Thanks
0
Devon
Top achievements
Rank 1
answered on 12 Feb 2016, 04:04 PM

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

0
Swati
Top achievements
Rank 1
answered on 12 Feb 2016, 04:46 PM

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

0
Devon
Top achievements
Rank 1
answered on 12 Feb 2016, 04:59 PM

 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>

0
Swati
Top achievements
Rank 1
answered on 12 Feb 2016, 05:13 PM

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.

Tags
Grid
Asked by
Devon
Top achievements
Rank 1
Answers by
Devon
Top achievements
Rank 1
Petur Subev
Telerik team
Adam
Top achievements
Rank 1
Swati
Top achievements
Rank 1
Share this question
or