I have a Kendo dropdown list in my project, data of which is dependent from some external conditions and can be changed while widget is already constructed.

When you have 1 item initially and you open dropdown - height for the suggestions popup is fine and covers this 1 item.

When you later change number of items to 6 for example and try to open it - height is still covers only one item and creates a scroll instead of just expand to all available area.

Here is a Dojo example of how it works: https://dojo.telerik.com/oGubaqiX

You should open dropdown, then hit "Change DS" button and the open dropdown again.

As you can see the behavior is absolutely wrong.

How can I change it or what am I doing wrong?

Hi,

I am working on a grid having inline edit functionality.  I am trying to create a dropdown which display a list of persons, however, I want to save the email id of the person in our backend SQL DB.

I am trying to implement this with editor template approach -

I have tried the below code -

Grid:

columns.Bound(mm => mm.Person).Title("Assigned To").EditorTemplateName("PersonList").HeaderHtmlAttributes(new { style = "white-space: normal" });

PersonList.chstml

@(Html.Kendo()
            .DropDownList()
            .Filter("contains")
            .Name("Person")
            .DataTextField("Name")
            .DataValueField("Email")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("GetPeopleByArea", "Common").Data("getPeopleByArea"))
                .ServerFiltering(true);
            })
            //.HtmlAttributes(new { required = "required", data_required_msg = "Select Person Name", style = "width: 100px" })
            .ValuePrimitive(true)
            .AutoWidth(true)
            .OptionLabel("-- Please Select --")            
    )

function getPeopleByArea() {
        var grid = $("#Grid").data("kendoGrid");
        var dataItem = grid.dataItem("tr.k-grid-edit-row");
        return {
            Area: dataItem.Area
        };
    }

When I edit the grid the dropdown work list works fine and it displays the filtered list of people as expected.  However, Instead of the email id the record is getting updated with Null or blanks in the backend table.

However, this approach works fine if I do not use getPeopleByArea function to filter the area based on certain conditions and use a different controller function to get the whole list.

Also, if I am using  .DataTextField("Name") and  .DataValueField("ID"), ID is getting stored and same is getting displayed on the grid instead of the Name.

What am I doing wrong here ? Can anyone please suggest.

Please let me know if you have any questions.

Thanks

Saurabh

Hi

Im struggling with figuring out what is wrong in my code. I have a DropdownList made like this:

@(Html.Kendo().DropDownListFor(model => model.CitizenAppartmentEnrollmentType)
		.Name("booking_CitizenAppartmentEnrollmentTypeDropdown")
		.DataSource(s => { s.Read(r => { r.Action("GetEnrollmentTypeList", "Booking"); }); })
		.DataTextField("EnrollName")
		.DataValueField("EnrollId")
		.Template("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.ValueTemplate("<span class=\"booking_EnrollmentTypeDropdownItem\"><span class=\"bookingColorBox\" style=\"background-color:#=data.EnrollColor#;\"></span><span>#=data.EnrollName#</span></span>")
		.Height(400)
		.Events(e => { e.Change("booking_Dialog_EnrollmentType_DropdownOnChangeEvent"); })
		.HtmlAttributes(new { style = "width:375px", data_bind = "value:CitizenAppartmentEnrollmentType" })
	)

When I comment out the Template and ValueTemplate lines, the result looks like in the attached image "without Template". And when its not commented out the result becomes like in the other screenshot.

Heres the c# controller being called:

public class BookingController : Controller {
         private GS gs = new GS();
         public ActionResult GetEnrollmentTypeList() {
		if (TempData.ContainsKey("GS")) {
			gs = (GS)TempData["GS"];
			TempData.Keep();
		}

		if (gs.EnrollementTypeDic.ContainsKey(gs.CurrentFloorId)) {
			var enrollTypes = gs.EnrollementTypeDic[gs.CurrentFloorId];

			var booking_CitizenAppartmentEnrollmentTypeDropdown = enrollTypes.Select(x => new {
				EnrollId = x.Id,
				EnrollName = x.Name,
				EnrollColor = x.Color.Remove(1, 2)
			});
			return Json(booking_CitizenAppartmentEnrollmentTypeDropdown, JsonRequestBehavior.AllowGet);
		} 

		return Json(null, JsonRequestBehavior.AllowGet);
	}
}
  
	

The Controller 100% surely doesnt call the return Json(null); part, and debugging shows that the data being fed to the return Json, is exactly what i want.

I need the EnrollColor variable for making a small colored box in front of the EnrollName. Thats what the template html is for in my case. 

I followed this demo, where the first dropdown with the Categories is very similar to what i need, except I need simply some colored boxes, and not images. But should function just the same. And I also tried #: data.EnrollName # aswell as #= data.EnrollName # .. And if I dont put the .data there, the widget casts an error.

Any help please :)

Hello,

I am struggling with why my Save button on my Kendo Grid is not calling my update action (inline edit mode).  The edit column uses a dropdown list editor template.  The dropdown list editor fills fine with my values and I can select one.  But when I click the Save button (from toolbar) it does not call my add function in the controller.  I see no errors in F12 utility.  Any help is appreciated as I've been struggling with this all day.

Here is my relevant code:

Edit Grid:

<style>
    .k-grid-content td {
        position: relative;
    }

    .k-grid .k-grid-header .k-header .k-link {
        height: auto;
    }

    .k-grid .k-grid-header .k-header .k-column-title .k-header {
        white-space: normal;
    }
</style>
@{
    ViewData["Title"] = "Administration";
}

<div style="margin-left:10px; margin-top:10px">
<div>Manage Assignees</div>
<div class="row" style="margin-top:10px">
    <div class="col-auto">
            @(
                    Html.Kendo().Grid<Assignees>()
                    .Name("grid")
                    .Width("250px")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.SortName).Width(130).Title("Assignee").EditorTemplateName("AssigneesAdd");
                    })
                    .Sortable(true)
                    .Navigatable()
                    .Scrollable(scr => scr.Height(200))
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Selectable()
                    .AutoBind(true)
                    .ColumnMenu(false)
                    .ToolBar(tb =>
                    {
                        tb.Create().Text("New");
                        tb.Save().Text("Save").CancelText("Cancel");
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("GetAssigneesForAddGridDisplay", "Home").Type(HttpVerbs.Post))
                    .Update(update => update.Action("AddAssigneeRecord", "Home").Type(HttpVerbs.Post))
                    .Destroy(destroy => destroy.Action("DeleteAssigneeRecord", "Home").Type(HttpVerbs.Post))
                    .Events(e => e.Error("onError"))
                    .Batch(false)
                    .Model(model =>
                    {
                        model.Id(p => p.SortName);
                        model.Field(p => p.SortName);
            })
            )
            .Deferred()
            )
    </div>
</div>
</div>
@section Scripts{
    @Html.Kendo().DeferredScripts()

    <script>
        $(document).ready(function () {
        });

        function onError() {
        @*window.location='@Url.Action("Index", "Error")';*@
                }

    </script>

}

===============================================

Controller Add Function called by .Update event in grid

  [HttpPost]
        public async Task<ActionResult> AddAssigneeRecordAsync([DataSourceRequest] DataSourceRequest request, SelectListItem assigneeRecord)
        {

            try
            {
                await _dataService.AddAssigneeRecordAsync(assigneeRecord);

                return Json(await new[] { assigneeRecord }.ToDataSourceResultAsync(request, ModelState));
            }
            catch (Exception ex)
            {
                await _dataService.LogExceptionAsync("HomeController", "AddAssigneeRecordAsync", _username, ex);
                return BadRequest();
            }
        }

===============================================

DropDownList editor template("AssigneesAdd"):

@using Estimating_State_Licensing_Certification.Controllers
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@model string;

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Text")
        .DataTextField("Text")
        .Filter("startswith")
        .OptionLabel("Select an Employee")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                //this is the edit template used for the Admin assignee grid for adding NEW assignees
                read.Action("GetAssigneesForAdminAdd", "Home").Type(HttpVerbs.Post);
            });
        })
)

==============================================

"Assignees" class/entity used by the grid

   public class Assignees
    {
        public string? SortName { get; set; } = string.Empty;
    }

Thanks!

Acadia

Hello,

I need help for the following issue:

this is the dropdown list -

                @Html.Kendo().DropDownListFor(m => m.PoLine[nr].ActivityId).DataTextField("Value").DataValueField("Key").DataSource(source =>
           {
               source.Read(read =>
               {
                   read.Action(@MVC.Budget.Budget.ActionNames.GetActivity, MVC.Budget.Name)
                       .Type(HttpVerbs.Post)
                       .Data("function () { return filterSubCategory('" + categoryId.Replace("\\", "\\\\") + "','" + subCategoryId.Replace("\\", "\\\\") + "'," + @current.ActivityId + "," + @nr + "); }");
               })
               .ServerFiltering(true);
           }).Enable(true).AutoBind(false).CascadeFrom(subCategoryId).Events(ev => { ev.Change("function(e){ var item = this.dataItem(); return true; return onchangeDivFromItemText(item,'" + string.Format(idReplace, "activity") + "')}"); }).HtmlAttributes(new { @class = "combo_date", style = "width:170px;" })

and this is the field where I want to be updated - 

@Html.UbiLabelValues(Model.RefMarketList.Where(item => item.Key.HasValue && item.Key.Value == Model.PoLine[nr].MarketId).FirstOrDefault().Value, LabelFor: "MarketName", className: "MarketName")

where UbiLabelValues returns - 

            string s = "<label for='{1}' {1} >{0}</label>";
            s = string.Format(s, text, LabelFor, className);
            return new MvcHtmlString(s);

I want to know how to change ev.Change of dropdown in order to referentiate the field with the new value selcted from dropdown.

Hello everyone,

I have a little problem with editing my grid and I hope you can help me.

I am currently developing a grid (Telerik UI for ASP.NET MVC Grid) in which you can open another grid using a button at the end of the row. In this second grid it is possible to select one or more employees (Inline Editing with a DropDown) for the previous entry. In addition to the actual employee, there is another column where you can set a checkbox to "true" or "false". You can create a new entry with the button on the top left and you can edit or delete it with the two buttons on the right in the line.

Now to my question: My plan is that the name of the employee can only be changed when creating the entry. If you click on Edit, the name should no longer be editable, only the checkbox should be.

How exactly do I do this?

I had the idea to set the field "UserId" to .Editable(false) under .Model. But if I do that, I can neither change the value when creating nor when editing. When creating the entry, the drop-down menu for selecting an employee should be available, but not when editing.

In the attachments I have pictures showing the grid exactly.

Thanks in advance
Lars

@(Html.Kendo().Grid(Model)
    .Name("AssignmentsGrid")
    .Columns(c =>
    {
        c.ForeignKey(m => m.UserId, (IEnumerable) ViewData["users"], "Id", "Name").EditorTemplateName("ProjectUserDropdown");
        c.Bound(m => m.Resigned).ClientTemplate("<input type='checkbox' #= Resigned ? checked='checked' :'' # disabled='disabled' />");
        c.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(t => t.Create())
    .Events(events =>
    {
        events.Edit(@<text>function(e) { if(e.model.isNew()) { e.model.set('ProductionOrderId', @ViewData["productionOrderId"]); } else { $('[name="ProjectManagerId"]').attr("readonly", true); }} </text>);
    })
    .DataSource(s => s
        .Ajax()
        .Create(c => c.Action("UserAssignmentAdd", "ProductionOrder", new {area = "Sktcrm"}))
        .Read(r => r.Action("UserAssignmentRead", "ProductionOrder", new {area = "Sktcrm"}).Data(@<text>function(e) { return { productionOrderId: @ViewData["productionOrderId"] }; }</text>))
        .Update(u => u.Action("UserAssignmentUpdate", "ProductionOrder", new {area = "Sktcrm"}))
        .Destroy(d => d.Action("UserAssignmentDelete", "ProductionOrder", new {area = "Sktcrm"}))
        .Model(m =>
        {
            m.Id(model => model.UserId);
            //m.Field(t => t.UserId).Editable(false);
        })
        .ServerOperation(false))
    .Scrollable()
    .Sortable()
    .Filterable())

I have had to admit defeat after much googling and trial and error I have been unable to recreat what I want.

I have a view model that can be simplified as follows;

    public class HeadsOfClaim
    {
        public HeadsOfClaim()
        {

        }

        public int? ClaimId { get; set; }
        public int? ClaimDetailId { get; set; }
        public string ClaimType { get; set; }
        public string Description { get; set; }
        public bool Rejected { get; set; }
    }

A controller which returns the json

    public ActionResult ReturnHeads([DataSourceRequest]DataSourceRequest request, int? id)
    {
        Claim c = db.Claims.Find(id);
        IEnumerable<HeadsOfClaim> details = ViewModels.HeadsOfClaim.GetList(c);
        return Json(details.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

and a view that includes the following

    @(Html.Kendo().Grid<ClaimRegister.ViewModels.HeadsOfClaim>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ClaimType).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
            columns.Bound(p => p.Description).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(225);
            columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell", id = "#=id#" }).ClientTemplate(
                Html.Kendo().DropDownButton()
                    .Name("menu_TEST_#=id#")
                    .Text("Action")
                    .Size(ComponentSize.Large)
                    .Items(its =>
                    {
                        its.Add().Text("Reverse Rejection").Hidden("#=Rejected#" == "true").HtmlAttributes(new { data_id = "#=id#" }).Click("ConfirmUnReject");
                        its.Add().Text("--Set").Hidden("#=Rejected#" != "true").Enabled(false);
                        its.Add().Text("Reserve").Hidden("#=Rejected#" != "true").HtmlAttributes(new { data_title = "Set Reserve", data_url = Url.Action("Individual", "Reserve", new { type = type, id = "#=id#" }) }).Click("LaunchModal");
                        its.Add().Text("Settlement").Hidden("#=Rejected#" != "true").HtmlAttributes(new { data_title = "Set Settlement", data_url = Url.Action("Individual", "Settlement", new { type = type, id = "#=id#" }) }).Click("LaunchModal");
                        its.Add().Text("--View").Enabled(false);
                        its.Add().Text("Allocation").HtmlAttributes(new { data_title = "Review Allocation", data_url = Url.Action("Review", "Allocation", new { id = "#=id#" }) }).Click("LaunchModal");
                    })
                    .ToClientTemplate().ToHtmlString()
            );
        })
        .Pageable()
        .Sortable()
        .Groupable()
        .Events(ev => ev.DataBound("initMenu"))
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(m => {
                m.Id(d => d.ClaimDetailId);
                m.Field(d => d.Rejected);
            })
            .Group(groups => groups.Add(p => p.ClaimType))
            .Read(read => read.Action("ReturnHeads", "ClaimDetails", new { id = id }))
        )
    )

...

<script>
    function initMenu(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }
</script>

My problem is setting the visibility of the dropdown options.  Effectively dependent on whether the claim is Rejected (true or false) I want different options to be available to the user. 

I had a look at the template script before initMenu runs but the evaluation is already made by that stage so it is unclear how it is doing the checking.

Irrelevant of whether rejected is true or false I get "Reverse Rejection", "--View" and "Allocation" as the only visible option.

Any help or insights gratefully received.

In CSP we were using script-src 'self' 'unsafe-inline' 

but for security purpose need to remove 'unsafe-inline' , we added  'nonce-a9f04fd1-06cf-4948-9d66-ea306e581896' for inline script.

applied nonce for inline script 

<script type="text/javascript" nonce="a9f04fd1-06cf-4948-9d66-ea306e581896">

</script>

but after applying these change kendo  controls not working. Our assumption is there are dynamic inline scripts generated  for kendo controls which not contains nonce. so it may cause an issue.

we also tried DeferredScripts but no success. after applying 'unsafe-inline'  it works.

<script type="text/javascript" nonce="a9f04fd1-06cf-4948-9d66-ea306e581896">

    @Html.Kendo().DeferredScripts()

</script>

Please suggest as we want to remove 'unsafe-inline' with kendo controls need to work.

Dears

I'm facing this problem: in an MVC Grid, setted with InCell editing, I have a Foreign Key column. When I edit the FK cell the DDL is not showed.

I checked the documentation and for me it is all ok. 

Here some details:

[GRID DEFINITION]

        @(Html.Kendo().Grid<MCP310.Models.MCP_Detail>()
            .Name("Grid_MCP_Detail_" + Model.id)
            .ToolBar(toolbar =>
            {
                toolbar.Create();
                toolbar.Save();
            })
            .Columns(columns =>
            {
                columns.Bound(c => c.id).Hidden(true);
                columns.Command(command => command.Destroy().IconClass("k-icon k-i-delete").Text(" ")).Width(56).MinResizableWidth(56);
                columns.Bound(c => c.codiceInterno).Width(200).Sticky(true);
                columns.Group(g => g
                    .Title("A cura del personale Marketing o dei Service Specialist Supervisor")
                    .Columns(mkss =>
                    {
                        mkss.Bound(c => c.descrizione).Width(300);
                        mkss.ForeignKey(c => c.UMBase, ds => ds.Read(r => r.Action("unitaMisura", "MCPDetailGrid")), "idMSEHI", "descrMSEHL").Width(300);
                        //mkss.Bound(c => c.UMBase).Width(300);
                        mkss.Bound(c => c.gruppoMerci).Width(300);
                        mkss.Bound(c => c.lineaProdotto).Width(300);
                        mkss.Bound(c => c.codiceTipo).Width(300);
                        mkss.Bound(c => c.voceCE).Width(300);
                        mkss.Bound(c => c.codiceValore).Width(300);
                        mkss.Bound(c => c.gestLottiMatricola).Width(300);
                        mkss.Bound(c => c.codiceEDMA).Width(150);
                        mkss.Bound(c => c.nomeFornitore).Width(150);
                        mkss.Bound(c => c.codiceProdottoFornitore).Width(150);
                        mkss.Bound(c => c.codiceCategoriaFornitore).Width(150);
                        mkss.Bound(c => c.pezziConf).Width(150);
                        mkss.Bound(c => c.infiammabile).Width(150);
                        mkss.Bound(c => c.ghiaccioSecco).Width(150);
                        mkss.Bound(c => c.ggMinEntrata).Width(150);
                        mkss.Bound(c => c.ggMinUscita).Width(150);
                        mkss.Bound(c => c.UMVendita).Width(150);
                        mkss.Bound(c => c.rapportoUMBV).Width(150);
                        mkss.Bound(c => c.royalty).Width(150);
                    }));
                columns.Group(g => g
                    .Title("A cura del Controllo di Gestione")
                    .Columns(ctgs =>
                    {
                        ctgs.Bound(c => c.costoAcquisto).Title("Costo acquisto").Width(150);
                        ctgs.Bound(c => c.valutaFatturazione).Title("Valuta di fatturazione").Width(150);
                        ctgs.Bound(c => c.codValuta).Title("Cod. Valuta").Width(150);
                        ctgs.Bound(c => c.prezzoMinimo).Title("Prezzo Minimo").Width(150);
                        ctgs.Bound(c => c.percProvvMinima).Title("% Provv minima").Width(150);
                        ctgs.Bound(c => c.prezzoSuggerito).Title("Prezzo Suggerito").Width(150);
                    }));

                columns.Group(g => g
                    .Title("A cura del MKTG o dei SSS")
                    .Columns(mkss =>
                    {
                        mkss.Bound(c => c.costoAcquisto).Title("Costo acquisto").Width(150);
                        mkss.Bound(c => c.valutaFatturazione).Title("Valuta di fatturazione").Width(150);
                        mkss.Bound(c => c.codValuta).Title("Cod. Valuta").Width(150);
                        mkss.Bound(c => c.prezzoMinimo).Title("Prezzo Minimo").Width(150);
                        mkss.Bound(c => c.percProvvMinima).Title("% Provv minima").Width(150);
                        mkss.Bound(c => c.prezzoListino).Title("Prezzo Listino").Width(150);
                        mkss.Bound(c => c.percProvvMassima).Title("% Provv max").Width(150);
                    }));

                columns.Group(g => g
                    .Title("A cura di AAT")
                    .Columns(aat =>
                    {
                        aat.Bound(c => c.codiceWindSat).Title("Cod. Winsat").Width(150);
                    }));
                columns.Bound(c => c.idStato).Title("Stato").Width(150);
                })
            .Editable(editable => {
                editable.Mode(GridEditMode.InCell);
                editable.CreateAt(GridInsertRowPosition.Bottom);
            })
            .Sortable()
            .Scrollable()
            .Resizable(resizable => resizable.Columns(true))
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.id))
                .Read(action => action.Action("Read", "MCPDetailGrid", new { idHeader = Model.id }))
                .Create(action => action.Action("Create", "MCPDetailGrid", new { idHeader = Model.id }))
                .Update(action => action.Action("Update", "MCPDetailGrid"))
                .Destroy(action => action.Action("Destroy", "MCPDetailGrid"))
            )
            .NoRecords("Nessun prodotto presente")
            .Navigatable()
        )}

[~/Views/Shared/EditorTemplates/GridForeignKey.cshtml]

@(
 Html.Kendo().DropDownListFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .ValuePrimitive(true)
)

I tried with/without  ValuePrimitive and with/without @model object

[Models]

Where the data are used:

Hello,

I have declared a column in a kendo grid as foreignkey,  data to be selected is set with as follows:

 columns.ForeignKey(mo => mo.CodKit, (System.Collections.IEnumerable)ViewBag.listKitMuestra, "idKit", "Descripcion").Title("Fabricante de Kit").Width(120);

where idKit is an integer and Descripcion is a string var.

The objects presented in kendoGrid have the CodKit field defined as int? and when I Create a row (inline edition used) when save button clicked, the value for CodKit is not sent in the objetct to controller.  If is an edition of a row with no value for this field and it´s setted to an option of the dropdownlist, kendoGrid acts as it was not changes in row an even not call to controller.  Ignores that column.

Only works if row has yet value  for this column when load items from database and you change the value selecting from dropdownlist another value, in this case is sent to controller in the objetct when update button is clicked.

I use incell dropdownlist with int values in several kendoGrids and no problem.  But this case with int? is not working correctly or i´m doing something wrong.

Thanks

Best regards,.