Dropdownlist client template using Razor MVC

12 posts, 0 answers
  1. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 21 Aug 2012 Link to this post

    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"))
            )
         )
  2. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2012 Link to this post

    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"))
         )
      )
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 24 Aug 2012 Link to this post

    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!
  4. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 29 Aug 2012 Link to this post

    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());
  5. Adam
    Adam avatar
    24 posts
    Member since:
    Nov 2011

    Posted 16 Oct 2013 Link to this post

    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.
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Oct 2013 Link to this post

    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!
  7. Swati
    Swati avatar
    9 posts
    Member since:
    Aug 2010

    Posted 12 Feb 2016 in reply to Petur Subev Link to this post

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

     

     

  8. Swati
    Swati avatar
    9 posts
    Member since:
    Aug 2010

    Posted 12 Feb 2016 in reply to Swati Link to this post

    The detail template <script> tag is in the attached img file here. The earlier attachment is not complete. Thanks
  9. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 12 Feb 2016 in reply to Swati Link to this post

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

  10. Swati
    Swati avatar
    9 posts
    Member since:
    Aug 2010

    Posted 12 Feb 2016 in reply to Devon Link to this post

    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

  11. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 12 Feb 2016 in reply to Swati Link to this post

     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>

  12. Swati
    Swati avatar
    9 posts
    Member since:
    Aug 2010

    Posted 12 Feb 2016 in reply to Devon Link to this post

    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.

Back to Top