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

Greetings, 
We are using the kendo editor for asp.net MVC.     I need to apply some custom styling to tables created with the Add Table Wizard.   I see that the wizard provides the ability to add a css class to the table.  I am wondering if there is a way I could have a css class added automatically anytime a user creates a table with the wizard.   I am trying to avoid having the users type in that css class value every time they create a table.  It would be ideal if it could happen in the background, but populating the text box on the wizard with the class name would also work.  

Any help would be appreciated.  

Thanks,
Bob

I have an application with a Kendo MVC ToolBar including buttons with french text or including ampersands such as "R&D". 

This used to display correctly as "R&D" but since a recent update of the Telerik MVC controls, it displays encoded as "R&D".
If there is an apostrophe, a text like "En attente d'approbation" will show as "En attente d'approbation".

I can reproduce this problem in your demos, for example see:

Kendo UI demo
https://dojo.telerik.com/ErEXiBul

Telerik MVC demo
https://dojo.telerik.com/egulokat

Is there any way to get this to display as expected? I tried different things but it always show up with &amp text on the screen which is bad.

Thank you!

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

hi, I have created a grid that works 'fine' and display one line as supposed, 

        @(Html.Kendo().Grid<ESACatalog.Models.tb_Part>()
    .Name("gridPart")
    .Columns(columns => {
        columns.Bound(p => p.PartID).Width(150);
        columns.Bound(p => p.ClassID);
        columns.Bound(p => p.PartListPrice).Width(100).Title("List Price");
        columns.Bound(p => p.PartDesc).Title("Description");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Get_Part", "Home").Data("getParameter")))
        )

I need now to read the value of column ClassID to reuse it so i tried the following code

var grid = $("#gridPart").data("kendoGrid");

grid.bind("change", function(e) {
    var dataItem = grid.dataSource.view()[0];
    if (dataItem) {
        var value = dataItem.columnName;
        console.log(value);
    }
});

but got a message as unassigned

I would really appreciate any help

thanks
Ray

Have a common scenario - a Grid that has an MVC controller method for its DataSource read action.  Can someone confirm If Im understanding the capabilities correctly.  I dont supposed I realized that if I used the features on the Grid - I dont need to manually provide UI elements to filter the grid :)  

(1) Having Scrollable() enabled and using the DataSourceRequest with PageSize = N  (not explicitly setting Pageable), I will get the capability to fetch only N records at a time and if using an IQueryable and calling something like myData.ToDataSourceResult(request), where myData is an IQueryable and request is the passed in DataSourceRequest - the result will be a query that is already updated before its actually executed? This is what I normally refer to as paging, but without any page numbers etc.  Just fetching a limited number of records at a time, instead of the whole thing.

(2) If Filterable is ALSO enabled, I do not need seperate UI widgets to get values for filtering the data serverside by modifying a query before its executed, but rather the filters are embeded within the DataSourceRequest and just happens?  I tested this and this seems to be the case.   futher more, this all works with the above, eg getting only N records at a time.

Question
If I have 2 filters applied on my grid, one for a date and one for a name/string, along with PageSize = 50, how does this affect the actual query that gets executed?  Is it applying WHERE conditions first then doing a Take(N) records, or does the Take happen first?

I declare a radio button group on the page inside a list-type control (or a @foreach loop). Radio button group is bound to a model property and needs to have its name prefixed with an index like so: "Model[0].PropOne". When I use @Html.Name helper with other controls like a checkbox it works right, but with radio buttons it produces a name like this - Model_0__PropOne. So, looks like it replaces brackets and dots with an underscore. What do I need to do to get it to work?

Hello,

I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected. 

Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx

My TabStrip coding

@(Html.Kendo().TabStrip()
        .Name("ReimbusementDetails")
        .Items(x =>
        {                
        x.Add().Text("Submitted")
        .Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentSubmitted")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");
                    column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
                })
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement Submitted.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )               
                .DataSource(ds => ds
                    .Ajax()                    
                    .GroupPaging(true)
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);
                    })
                    .Aggregates(ag =>
                    {
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
                )
            )
            </text>
        );

        x.Add().Text("In Progress")            
        .Content(
            @<text>
            @(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
                .Name("ReimbursmentInProgress")
                .Columns(column =>
                {
                    column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
                    column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
                    column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
                        .ClientTemplate("#if (MultipleCategory == 0)"
                        + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}else"
                        + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
                        + "#}#");
                    column.Bound(c => c.VendorName).Title("Vendor name");
                    column.Bound(c => c.InvoiceNumber).Title("Invoice #");
                    column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
                    column.Bound(c => c.BudgetCategory).Title("Budget Category");                        
                    column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
                })                    
                .Pageable()
                .Sortable()
                .Scrollable(s => s.Height("auto"))
                .ColumnMenu()
                .Mobile()  
                .ToolBar(tool => tool.Excel())
                .Excel(ex => ex
                    .AllPages(true)
                    .Filterable(true)
                    .FileName("Reimbursement In Progress.xlsx")
                    .ProxyURL(Url.Action("ValidationErrorExport", "Application"))
                )
                .Events(ev => ev.DataBound("ExpandProgress"))
                .DataSource(ds => ds
                    .Ajax()                                    
                    .GroupPaging(true)                    
                    .Group(g =>
                    {
                        g.Add(x => x.GrantName);
                        g.Add(x => x.ProjectName);                                
                    }) 
                    .Aggregates(ag =>
                    {                            
                        ag.Add(x => x.GrantName).Count();
                        ag.Add(x => x.ProjectName).Count();
                    })
                    .Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
                )
            )
            </text>
        );
        })
    )

I have tried with Event DataBound("ExpandProgress") javascript but still not working.

Any advice to achieve this. Thank you.