I have a very simple scenario and can't quite figure out how to manage it with Core and Telerik controls.

I have a DropDownList which I'm successfully filling from an action method. I have form fields below it that relate to the row selected in the DropDownList. What I would like to do is have the form fields change when the selected item in the dropdownlist changes. Simple parent-child relationship, but I can't figure out how to manage this with Core and Telerik. Any suggestions? Thanks.

Hi, 

I want to close the dropdown list as soon as the event (it creates the confirmation pop-up) is triggered from selecting an option from the list. 

How this can be achieved.

Thanks, 

Hi, 

I need to add a trash can against each option of the dynamic dropdown list. 

example:

How can this be achieved?

What I have achieved so far: 

Dynamically populating the list.

Thanks,

VM

I'm dealing with a situation specified here in the jQuery world: https://docs.telerik.com/kendo-ui/knowledge-base/combobox-invalid-form-control-is-not-focusable

I'm having a similar issue but am using a combination of tag-helpers and Html extension methods to render controls. Kendo Text boxes are getting client-validated properly, but DropDowns are not, and also some textboxes that are initially hidden are also facing the same issue.

I have a view setup the following way:

@for (var i = 0; i < Model.ApprovingRoles.Count; i++)
{
    <div class="col-lg-6">
        @(Html.Kendo().DropDownListFor(m => m.ApprovingRoles[i])
              .Size(ComponentSize.Medium)
              .Rounded(Rounded.Medium)
              .FillMode(FillMode.Outline)
              .OptionLabel("Select " + Model.ApprovingRoles[i].Name)
              .HtmlAttributes(new { style = "width: 100%", required = "required", validationmessage = "Value required" })
              .DataTextField(nameof(SystemUserModel.EmployeeName))
              .DataValueField(nameof(SystemUserModel.Id))
              .Filter(FilterType.Contains)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                    read.Action("GetUsersByRoleId", "Api").Data(Model.ApprovingRoles[i].Id.ToString());
                  }).ServerFiltering(true);
              })
              .Height(500)
            )
    </div>
}

1. Is this the correct way to display the drop-downs in a loop?
   
2. Each dropdown needs to apply a filter to the GetUsersByRoleId API, and the value is in m.ApprovingRoles[i].Id
   
3. Did I set up the read.Action().Data() correctly?
   

Currently:

• Four dropdowns appear which is correct
  
• They have the correct Option label
  
• They have no data, which should not be the case
  
• I have a breakpoint on the GetUsersByRoleId, and I'm just receiving a 0 for my int roleId parameter.

Hello,

what is the best TemplateString and ValueTemplateString for the dropdownlist that I have two columns where one is right aligned (see picture)

regards robert

Hello,

I have a kendo grid with the FundAge column with a dropdown list editor template. When I select the value from the dropdown and click update the value is showing as undefined. Can someone help with this?

///Editor template

@model Models.FedAge

@(Html.Kendo().DropDownListFor(x => x)
    .DataValueField("FedId")
    .DataTextField("FedDesc")
    .BindTo((System.Collections.IEnumerable)ViewData["FedAge"]))

//////// Grid column

 @(Html.Kendo().Grid<AgencyInformation>()
    .Name("AgencyInformationGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FundAge).ClientTemplate("#=FundAge.FedDesc#").Sortable(false).Width(175).HtmlAttributes(new { @class = "FundAgeClass" });        
    }) 

.ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:500px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(false)
        .Batch(false)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Events(events => events.RequestEnd("onAgeInfoRequestEnd"))
        .Model(model => {
            model.Id(p => p.AgeInfoId);
            model.Field(p => p.AgeInfoId).Editable(false);
            model.Field(p => p.FedAge.FedAgeDesc).Editable(false).DefaultValue(ViewData["FedAge"]);
        })
        .Create(update => update.Action("AddAgeInfo", "Cove").Type(HttpVerbs.Post))
        .Read(read => read.Action("GetAgeInfo", "Cove").Type(HttpVerbs.Get))
        .Update(update => update.Action("EditAgeInfo", "Cove").Type(HttpVerbs.Post))
        .Destroy(update => update.Action("DeleteAgeInfo", "Cove").Type(HttpVerbs.Post))
    )

//////Entity

public class AgeInfo
    {
        public string AgenfoId { get; set; }

        [UIHint("FedlAgeEditor")]
        [Required(ErrorMessage = "Required")]        
        public string FundAge{ get; set; }


        public FedAge FedAge{ get; set; }
    }


    public class FedAge
    {
        public int FedAgeId { get; set; }

        public string FedAgeDesc { get; set; }
    }
}

///controller

 [HttpGet]
        public IActionResult AgeInfo()
        {
            //if (coveDetails!= null && coveDetails.AgeInfo!= null)
            //{
            //    return View("AgeInfo", coveDetails.AgeInfo);
            //}
            ViewData["FedAge"] = lookupsDetails.FedAge;
            ViewBag.FedAge= lookupsDetails.FedAge;
            return View();
        }   

Can some one please help??

Hey all,

Using Telerik UI for ASP.NET Core, I've added a TreeList widget. I'm trying to get it to display a DropDownList for what amounts to, in "Grid-speak", a Foreign Key column.

The method I found somewhere in my searches appears to be "working", in that when I enter inline edit mode on the row, the column is showing as a DropDownList and is rendering correctly showing the DataTextField (as shown in the attached Edit.png), but when in display mode on the row, it is only showing the DataValueField (as shown in the attached Display.png).

How do I get the display mode on the row to show the DataTextField from the drop down for the column?

Widget code in /Pages/ProposalVersions/details.cshtml Razor page (removed fields irrelevant to the question for conciseness):

@(Html.Kendo().TreeList<ProposalVersionLineItem>()
  .Name("proposalVersionLineItemTreeList")
  .Columns(columns => {
    columns.Add().Field(column => column.name).Width(200);
    columns.Add().Field(column => column.ProductID).Template("#=ProductID#").Sortable(false).Width(100);              
    columns.Add().Width(300).Command(c =>
    {
      c.CreateChild().Text("Add child");
      c.Edit();
      c.Destroy();
    });            
  })
  .Editable(e => e.Move(move => move.Reorderable(true)))
  .Filterable()
  .Sortable()
  .DataSource(ds => ds
    .Read(r => r.Url("/ProposalVersions/Details?handler=ReadProposalVersionLineItemForTreeList").Data("forgeryToken"))
    .Model(m =>
    {
      m.Id(f => f.ProposalVersionLineItemID);
      m.ParentId(f => f.ParentProposalVersionLineItemID).Nullable(true);
      m.Field(f => f.name);
      m.Field(f => f.ProductID);
    })
  )
)

Editor Template at /Shared/EditorTemplates/ProductID.cshtml:

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("ProductID") 
    .DataTextField("name") 
    .BindTo((System.Collections.IEnumerable)ViewData["products"]) 
)

Code Behind populating ViewData in /Pages/ProposalVersions/details.cshtml.cs:

ViewData["products"] = _context.Products
  .Select(s => new {
    s.ProductID,
    s.name
});

From /Models/ProposalVersionLineItem.cs Class:

[Display(Name = "Product")]
[UIHint("ProductID")]
public int ProductID { get; set; }

I feel like this is working "as expected" as it is effectively rendering a custom Editor Template, but I can't figure out how to get it to render a custom "Display Template" for the field... any insight would be appreciated!

Thanks!

Nick

I've tried several iterations, and something isn't right. If I type the endpoint in a browser, I get a Json result. Swagger shows the API returning stuff. No luck with the DropDownList yet.

Here is my current markup on the client:

    <div>
        <kendo-datasource name="data" type="DataSourceTagHelperType.WebApi" server-operation="true">
            <transport>
                <read url="https://localhost:7225/api/SievePack" action="get" datatype="jsonp"/>
            </transport>
            <schema>
                <model id="SieveSetId">
                    <fields>
                        <field name="SieveSetId" type="number" />
                        <field name="SieveSetName" type="number" />
                    </fields>
                </model>
            </schema>
        </kendo-datasource>

        <script>
            data.read();
        </script>
        
        <kendo-dropdownlist name="sets"
                            datatextfield="SieveSetName"
                            datavaluefield="SieveSetId"
                            datasource="data">
        </kendo-dropdownlist>

    </div>

I have the API solution running when I launch the client.

Do I need to do something in another part of my application? From what I've been reading, this should work..

Thanks!

Hi, I have a Kendo Dropdownlist with ajax datasource, ServerFiltering and a contains filter.

<select id="multiselect" multiple="multiple"></select>

$("#multiselect").kendoDropDownList({
    name: "dataSelect",
    filter: "contains", 
    dataSource: {
        type: "aspnetmvc-ajax",
        serverFiltering: true,
        transport: {
            read: {
                type: "POST",
                url: "@Url.Page("Data", "ReadData")",
                data: function() {
                    //var text = $('#dataSelect').data("kendoDropDownList").filterInput; not working
                    //var data = { text: text }; 
                    //return $.extend(kendo.antiForgeryTokens(), data);
                    
                    return kendo.antiForgeryTokens();
                }
            }
        }
});
public ActionResult OnPostReadData([DataSourceRequest] DataSourceRequest request, string text)
{
}