Ive just started using AutoComplete and Im having a few problems, basically nothing shows up when I start typing in the box, hopefully someone might be able to give me a few pointers.

in my controller (AccountController)  I have this method

[HttpGet]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public JsonResult GetCountries()
        {
            RegisterModel model = new RegisterModel();
            return Json(model.Countries, JsonRequestBehavior.AllowGet);
        }

in my model (AccountModel)  I have this property and method

public IEnumerable<EbsData.TimeZone> Countries { get {return GetCountries();} set{value = GetCountries();} }


/// <summary>
        /// get all the current countries from cache or repository
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EbsData.TimeZone> GetCountries()
        {
            Service.InMemoryCache cacheProvider = new Service.InMemoryCache();
            using (var context = new EbsData.EBSEntities())
            {
                var countries = cacheProvider.Get("countries", () => (from c in context.TimeZones select c).ToList());
                return countries;
            }

        }

and in my view, I have this markup


<li>
                @Html.LabelFor(m => m.Country)
                @Html.Kendo().AutoCompleteFor(m => m.Country).Name("countriesAutoComplete").Animation(true).IgnoreCase(true).DataTextField("Country").DataSource(source =>
                                                                                                                                                         {
                                                                                                                                                                source.Read(read =>
                                                                                                                                                                {
                                                                                                                                                                    read.Action("GetCountries", "AccountController").Data("onAdditionalData"); //Set the Action and Controller name
                                                                                                                                                                })
                                                                                                                                                                .ServerFiltering(true); //If true the DataSource will not filter the data on the client.
                                                                                                                                                         })                                                                                                                                                     

            </li>


which creates this hmtl

<li>
<label for="Country">Country</label>
<span class="k-widget k-autocomplete k-header k-state-default" tabindex="-1" role="presentation" style="">
<input id="countriesAutoComplete" class="k-input" type="text" name="countriesAutoComplete" data-val-required="The Country field is required." data-val="true" data-role="autocomplete" style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-owns="countriesAutoComplete_listbox" aria-autocomplete="list">
</span>
<script>
jQuery(function(){jQuery("#countriesAutoComplete").kendoAutoComplete({"dataSource":{"transport":{"read":{"url":"/AccountController/GetCountries","data":onAdditionalData}},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"Country","ignoreCase":true});});
</script>
</li>


there is data available for the autocomplete to use, and the javascript function is there, but none of the server code is being executed.  Can anyone see where Im going wrong ?

Hi,
I'm  a newbie and trying to get a pair of cascading comboboxes to work from a grid custom editor popup.
The first combobox appears to work fine, but the second one does not appear to be getting the value of the selected item from the first combobox. Accordingly, the 2nd datasource is being called without a paramater

Here is my code. Thanks for assistance.


 

I recently had cause to configure a kendo mobile listview with a headerTemplate for grouped data. The reason was that I wanted to group by one field but use another for the displayed label since the former had the correct sort order. The template looked like this:
<script type="text/x-kendo-templ" id="header-template">
${data.items[0].section}
</script>

Where 'section' was a defined field in my data source.

When I try the same approach with a kendo web grid then an error 'undefined' is thrown. I've googled and checked the docs and apart from references to 'value', 'max', 'sum' I can't seem to find anything that clarifies what is available to the template at this point. Ideally I want to make the same type of reference as works for the mobile listview.

Thanks,

Mark.

Hello,
We're currently evaluating Kendo UI and we've jumped on a strange issue. When using fields with dropdown widgets, the grid sends a not serialized JavasSript object, which basically the string "[object Object]". I've tried to serialize this data by myself, using `parameterMap(options)`, but even there the values were already two "[object Object]" string. Checkout the screenshot I've attached.
 
I've created a static example in order to present you the issue more easily. This my data store:
I initialize the grid in an empty div
I use jQuery 1.8.3, the latest version of KendoUI Web and this is how the external resources are loaded.:
Cheers,
Kiril Vladimirov

Hi, I have tried my best but could not resolve one issue. I am using kendo grid in mobile application. Because project requirements are to use grid as starting point (let say list of people with their demographic info) then click on grid row or button to navigate to the details. I am using button and in its click event I want to navigate to kendo mobile view.

   function buttonClick(e) {
                    $('a').prop('href', '#tabstripprofile');
                                        
                    }
tabstripprofile is the id for the view. That code does work in Chrome or Firefox and also works with Windows emulator. But it does not work for android emulator or android device. I have tested an alert by adding in the code and the click event is being called and each time the popup generates twice, but the navigation part does not work. However if I keep pressing the button then it navigates at random times but not every time. Please help. 

I am trying to bind the view() function on the DataSource to a select element then apply a filter to restrict the results however it is not working.

My expected result in the demo is that by changing the Package to "Application" the Module values would change.
http://jsfiddle.net/v6PBz/3/

Thanks, Justin

I'm new to Kendo UI and struggling to get menus declared using "straight" HTML to work.  However I can get the menus to work if I use code like the following in an MVC view:

   @(Html.Kendo().Menu()
          .Name("Menu")
          .Items(items =>
          {
              items.Add()
                .Text("Menu Option 1")
                .Items(children =>
                    {
                        children.Add().Text("Submenu 1-1")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-1 Option 1");
                                        innerChildren.Add().Text("Submenu 1-1 Option 2");
                                        innerChildren.Add().Text("Submenu 1-1 Option 3");
                                    });

                        children.Add().Text("Submenu 1-2")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-2 Option 1");
                                        innerChildren.Add().Text("Submenu 1-2 Option 2");
                                    });
                        children.Add().Text("Submenu 1-3")
                                .Items(innerChildren =>
                                    {
                                        innerChildren.Add().Text("Submenu 1-3 Option 1");
                                        innerChildren.Add().Text("Submenu 1-3 Option 2");
                                    });
                    });
              items.Add()
                .Text("Menu Option 2")
                .Items(children =>
                {
                    children.Add().Text("Submenu 2-1")
                            .Items(innerChildren =>

I'd like to individually style each top level button ("Menu Option 1" and "Menu Option 2") to have a different colour, but cannot see a way to add a CSS style tag to the individual Item (I was hoping for a property similar to "Text" called "Id" or "CssClassId").

In the code example above how could I style "Menu Option 1" to be green, and "Menu Option 2" to be red?

There are two things I would like to accomplish:

1. I want to be able to use a Kendo Numeric Textbox in my Kendo Grid without binding it to a field.
2. I want to be able to retrieve this value.

My grid looks as follows:

@(Html.Kendo().Grid<ProofData>()
        .Name("ProofDataGrid")
        .AutoBind(true)
        .HtmlAttributes(new { style = "height: 500px; font-size: 12px;" })
        .Columns(columns =>
        {
            columns.Bound(c => c.Number).Groupable(false);
            columns.Bound(c => c.ProofAmount).Groupable(false);
            columns.Bound(c => c.ProofAssignmentID).Groupable(false);
            columns.Bound(c => c.PrimaryAmount).Groupable(true);
            columns.Bound(c => c.PrimaryAssignmentID).Groupable(true);
            columns.Template(@<textarea></textarea>).Title("FinalData");
        }
        )
            .ToolBar(toolbar =>
            {
                toolbar.Save();
            })
                .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(pageable => pageable
            .Enabled(true)
            .PageSizes(new int[4] { 5, 10, 25, 50 })
            .Refresh(true))
            .Navigatable(n => n.Enabled(true))
        .Sortable()
        .Scrollable()
        .Selectable()
        .DataSource(datasource => datasource
                .Ajax()
                .Batch(true)
                .Update("Editing_Update", "Grid")
                .Model(model => model.Id(c => c.ID))
                .ServerOperation(false))
                        .Events(ev => ev.SaveChanges("debugData"))
    )

When I click a button, I format the Grid as follows:

function formatProofGridData(id) {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Proofing/GetInconsistentData/",
                    dataType: "json",
                    data: { id: id }
                }
            },
            // determines if changes will be send to the server individually or as batch
            batch: true,
                model: {
                    id: "ID",
                    fields: {
                        ID: { validation: { required: true} },
                        Number: { editable: false },
                        ProofAmount: { editable: false },
                        PrimaryAmount: { editable: false },
                        ProofAssignmentID: { editable: false },
                        PrimaryAssignmentID: { editable: false },
                    }
                }
            }
            //...
        });
        $("#ProofDataGrid").kendoGrid({
            dataSource: dataSource,
            toolbar: ["save", "cancel"],
            editable: { update: true },
            scrollable: true,
            sortable: true,
            pageable: true,
            columns: [
                    {
                        field: "Number",
                        title: "Number"
                    },
                      {
                          field: "ProofAmount",
                          title: "ProofAmount"
                      },
                      {
                          field: "PrimaryBidAmount",
                          title: "PrimaryBidAmount"
                      },
                      {
                          field: "ProofAssignmentID",
                          title: "ProofAssignmentID"
                      },
                      {
                          field: "PrimaryAssignmentID",
                          title: "PrimaryAssignmentID"
                      },
                      {
                          title: "FinalData",
                          template: '<input id="numeric" type="number" value="" min="0" max="100" step="1" />'
                      }]

        });
              }

Basically, I'm loading two sets of data side by side to compare the values to determine which has the correct values. The extra non field bound column is for me to input a value. When I click "Save", I am going to use this value to place the corrected value in another table.

I am currently loading the data this way so I can format the data before it hits the grid. So far I have been unsuccessful in converting the textbox into a numeric textbox. And secondly, I also have been unable to figure out how to retrieve the data in the textbox.

I have checked the data in $('#ProofDataGrid').data('kendoGrid').dataSource.data(); but have not seen the data I input into the textbox fields.

Any help for either issue would be appreciated.

Cascading works great when a person does the item selection.  The key is that the _focus method of the List widget ( I guess an ancestor of ComboBox and DropDownList ) has this kernel:

that._select(li);
that._triggerCascade();

For the case of a programmatic selection via invocation of

.select(index)
.value(data-value)
.search(data-text)

In DropDownList

.select() will perform a ._select followed by a _triggerCascade
.value() will perform a .select(index) which will eventually do a _triggerCascade
.search() will perform a ._select only and not have a _triggerCascade

In v2012.3.1304 dropdownlist.js at line 272 there should probably needs to be a


Now suppose that you have three remote datasourced drop down lists to be populated and initialized based on text.
The search method could then be used in the databound callback to ensure DDL has its data before making the selection of the desired item.

p.s. Autogenerated cascading DDLs could be an alternate viewer for Hierarchical Data Source

Will there be a Fullscreen-Support so that the address-bar of mobile browsers will disapear?