I am apparently missing something in setting up a combo box, can someone help me out?

I followed the examples, and got to here:

------

        public JsonResult GetItems(string filter)
        {
            List<Item> Items = new List<Item>();
            if (!string.IsNullOrEmpty(filter))
                using (ScratchDBClassesDataContext DB = new ScratchDBClassesDataContext())
                    Items = DB.Items.Where(itm => itm.Name.Contains(filter)).ToList();
            return Json(Items, JsonRequestBehavior.AllowGet);
        }

------

@(Html.Kendo().ComboBox()
        .Name("ItemCombo")
        .DataSource(ds =>
        {
            ds.Read(read =>
            {
                read.Action("GetItems", "Home").Data("FilterValue");
            });
            ds.ServerFiltering(true);
        })
        .DataTextField("Name")
        .DataValueField("ItemID")
        .AutoBind(false)
        .MinLength(3)
        .ClearButton(true)

)
<script>
    function FilterValue() {       
        var ItemCombo = $("#ItemCombo").data("kendoComboBox");
        return { filter: ItemCombo.text() };
    }
</script>

------

It works initially - once I type 3 characters, the read action runs and my initial results are shown in the popup.  However, after that, the read action never fires again when I continue typing, so the box never further filters my results. 

I put a breakpoint in my controller code as well as an alert in the "FilterValue" function, and I can confirm that the action is not firing.

I discovered that if I add ".Filter(FilterType.Contains)" to the combobox configuration, the action fires every time I type after the 3rd character but my controller receives a null value for the filter string. An alert in "FilterValue" shows that ItemCombo.text() has the value I want, but it isn't being sent to the controller.

What have I missed here?

Hello

I had a look at the ComboBox demo and saw that there is no add new item feature for the MVC version. Is there any way to accomplish adding a new item to the database in MVC with the ComboBox?

I tried creating an API in MVC and using the Kendo UI for jQuery version but that only stores in localstorage and does not add to the database either.

If anybody knows of a way to add a new item to the database from the ComboBox in MVC could you please shed some light on how to accomplish that. Code first would be preferred if possible.

Thank You

Hi there,

I'm experiencing issues with the media player; it's breaking when used at low-resolutions such as on a mobile. I'm embedding YouTube, for what it's worth.

By way of sample code, the example on https://demos.telerik.com/aspnet-mvc/mediaplayer exhibits the same issue. When under ~970 pixels in width, the Media player refuses to render, and the JavaScript console outputs and error, both in Chrome and Edge (attachments 1 and 2).

When resized a couple of hundred pixels larger, the player immediately renders [after a refresh] and the JavaScript error goes away.

Any assistance in getting this working at lower resolutions would be much appreciated.

Hi ,

i am in learning phase of asp.net mvc charts. i am able to see data in controller but it is not displayed in view. can you please help. thanks in advance

controller code

 [HttpPost]
        public ActionResult DisplayChart([DataSourceRequest]DataSourceRequest request, string item)
        {
            var result = Enumerable.Range(0, 50).Select(i => new Chart
            {
                bytes = i.ToString(),
                OS = "Android" + i.ToString(),
                protocol = "SMTP" + i.ToString(),
                Device = i.ToString(),
                IP = "10.97.216." + i.ToString(),
                Location = "Location" + i.ToString(),
                Network = "Telstra " + i,
                VLAN = "VLAN " + i.ToString(),
                ChartNumber1 = 10 + i,
                ChartNumber2 = 20 + i.ToString(),
                ChartNumber3 = 30 + i,
                Year = "201"+ i.ToString()
            });

            if (item != null)
            {
                var children = result
                    .Where(p => p.Location == item)
                    .ToList();

                return Json(children.ToDataSourceResult(request));
            }
            else
            {
                var children = result
                    .ToList();

                return Json(children.ToDataSourceResult(request));
            }
        }

and cshtml code is 

<div class="row">
            <div class="col-xs-18 col-md-12">
                <div class="demo-section k-content wide">
                    @(Html.Kendo().Chart<TelerikMvcApp1.Models.Chart>()
                            .Name("chart2")
                            .Title(" Sample Chart")
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Top)
                            )
                            .ChartArea(chartArea => chartArea
                                .Background("transparent")
                            )
                            .DataSource(ds => ds.Read(read => read.Action("DisplayChart", "Chart")))
                            .Series(series =>
                            {

                                series.Column(model => model.ChartNumber1).Name("ChartNumber1").CategoryField("Year");
                                series.Column(model => model.ChartNumber2).Name("ChartNumber2").CategoryField("Year");
                                series.Column(model => model.ChartNumber3).Name("ChartNumber3").CategoryField("Year");
                            })
                              .CategoryAxis(axis => axis
                              .Categories(model => model.Year)
                              )
                              .AutoBind(true)
                            .ValueAxis(axis => axis.Numeric()
                            .Labels(labels => labels.Format("{0:N0}"))
                            .MajorUnit(10)
                            )
                            .Tooltip(tooltip => tooltip
                                .Visible(true)
                                .Template("#= series.name #: #= value #")
                            )
                            .Events(events => events
                            .SeriesClick("onSeriesClick")
                            .SeriesHover("onSeriesHover")
                            .DataBound("onDataBound")
                            .AxisLabelClick("onAxisLabelClick")
                            .PlotAreaClick("onPlotAreaClick")
                            .PlotAreaHover("onPlotAreaHover")
                            .Render("onRender")
                            .LegendItemClick("onLegendItemClick")
                            .LegendItemHover("onLegendItemHover")
                            .DragStart("onDragStart")
                            .Drag("onDrag")
                            .DragEnd("onDragEnd")
                            .ZoomStart("onZoomStart")
                            .Zoom("onZoom")
                            .ZoomEnd("onZoomEnd")
                              )
                    )
                </div>
            </div>
        </div>

<script>
    function onSeriesClick(e) {
        console.log(kendo.format("Series click :: {0} ({1}): {2}",
            e.series.name, e.category, e.value));
    }

    function onSeriesHover(e) {
        console.log(kendo.format("Series hover :: {0} ({1}): {2}",
            e.series.name, e.category, e.value));
    }

    function onDataBound(e) {
        console.log("Data bound");
    }

    function onAxisLabelClick(e) {
        console.log(kendo.format("Axis label click :: {0} axis : {1}",
            e.axis.type, e.text));
    }

    function onPlotAreaClick(e) {
        console.log(kendo.format("Plot area click :: {0} : {1:N0}",
            e.category, e.value
        ));
    }

    function onPlotAreaHover(e) {
        console.log(kendo.format("Plot area hover :: {0} : {1:N0}",
            e.category, e.value
        ));
    }

    function onRender(e) {
        console.log("Render");
    }

    function onLegendItemClick(e) {
        console.log(kendo.format("Legend item click :: {0}",
            e.text));
    }

    function onLegendItemHover(e) {
        console.log(kendo.format("Legend item hover :: {0}",
            e.text));
    }

    function onDragStart(e) {
        console.log("Drag start");
    }

    function onDrag(e) {
        console.log("Drag");
    }

    function onDragEnd(e) {
        console.log("Drag end");
    }

    function onZoomStart(e) {
        console.log("Zoom start");
    }

    function onZoom(e) {
        console.log(kendo.format("Zoom :: {0}", e.delta));

        // Prevent scrolling
        e.originalEvent.preventDefault();
    }

    function onZoomEnd(e) {
        console.log("Zoom end");
    }

    //$(function () {
    //    $(document).bind("kendo:skinChange", updateTheme);
    //});

    //function updateTheme() {
    //    $("#chart2").getKendoChart().setOptions({ theme: kendoTheme });
    //}
</script>

   is there a way to use the grid hierarchy to edit nested collections when you need the database generated ID to apply to the nested collection?  I have the grids and controllers set up, but i don't know how to send the ID to the nested collection.

cshtml

parent grid read and create controller

child grid read and create controller

I feel like i'm close but can't quite get it working