Hello folks

I got this one nearly done. I can see that it is hitting my controller in the background but the refresh just keeps spinning :)

@model myHinkleyWebApp.Models.ItemInventory

<div id="table_data"><hr /><div class="row"><div class="col-12 padding-0"><h5>Check Product Availability</h5><div class="k-d-flex k-justify-content-left" style="padding-top: 54px;"><div class="k-w-100 text-left">
                    @{Html.RenderPartial("../Shared/EditorTemplates/Item_Search_Editor");}
                </div><div class="k-w-200 text-left"><input id="btnSubmit" type="submit" style="margin-left: 25px;" value="Submit" class="btn btn-outline-primary" name="submit" /></div></div>

                @(Html.Kendo().Grid<myHinkleyWebApp.Models.ItemInventory>()
    .Name("ItemInventory")
    .Columns(columns => {
        columns.Bound(p => p.Item_no);
        columns.Bound(p => p.Family);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.DNPrice);
        columns.Bound(p => p.MapPrice);
        columns.Bound(p => p.QuantityAvailable);
        columns.Bound(p => p.QuantityConfirmed);
        columns.Bound(p => p.ConfirmedPromiseDate);
        //columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>");
        //columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(tools => tools.Excel())
    //.Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    //.Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
    //.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); })
    //.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Read("SearchItems_ByNameOrFamily", "ItemInventory", new {search_phrase = ViewBag.SearchPhrase})
    //.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    )
)
            </div><br /><br /></div></div><script>
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    $("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });

</script>
 
After I click the button the grid is just spinning here is a view of that: 

    
       So really the help I need is with this javascript here: 

$("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });
To summarize I have a auto complete text box where I am entering an item. Then i want to push the button and refresh my grid which will pass the 
item number and search for it and bring it back down in the grid! 
Any help would be greatly appreciated! 
     
            
            
                
                
                    
                    
                
        
        
       

Anyways here is my front end code here

Good day,

i Just updated kendo ui mvc project to the latest version currently out yesterday. now its broken.

before upgrade

after upgrade

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?