I need to reset to the first page after sorting the grid. I was trying to use the change event like i was doing when changing page which works perfectly here is my example on how I keep track of my paging.
   var pageable = false;
          if (self.Pageable == true)
              pageable = {
                  refresh: false,
                  pageSizes: self.PageSizes,
                  change: function(e) {
                      if (typeof (Storage) !== "undefined") {
                          localStorage.setItem(self.PageStorageVariable, self.Grid().dataSource.page());
                      }
                  }
              };

and then apply pageable variable to my grid definition
   var g = {
              scrollable: false,
              pageable : pageable ,
              ...
  }

Every time I change a page it gets stored in my local storage and then I do some stuff with it.

I need the same functionality for sorting but only on the on change event:

  var sortable = false;
          if (self.Sortable == true)
              sortable = {
                  mode: "single",
                  allowUnsort: true,
                  change: function (e) {
                      console.log('here');
                  }
              };

          var g = {
              scrollable: false,
              pageable : pageable ,
              sortable : sortable,
             ...
         };

But in this case every time I apply a new sort its not firing my on change function, any ideas on how can I intercept the onSort event so I can reset to page 1 when sorting?

I'm really new at KendoUI.  Just learning it in fact.

I just got this exception (see title) and I really don't know what it means, or why I can't do it.
I'm using an MVC 4 framework in VS 2012

So... some questions.

1. I know what virtual scrolling is, What is Server binding?
2. How do I know if I'm doing Server binding?
3. Is there a way to work around this?

Hello,i did the example with listview editing and it's ok.But if i have also a foreign key to category for example,how cand i use a dropdown list filled with the categories,in that template that appear when i press edit button?
in razor if possible.

Thanks in advance

I am developing an MVC 4 website for a customer and have run into an issue with the dropdownlist. 

I have a Grid, bound to my model, and I can see all the data (correctly) in the grid.
The above code loads the grid fine, I can trigger all the actions correctly, and they all work great.

My problem comes in when I edit a row, and the field I need to change is a DropDownList. For this particular issue, it is a list of States. We are using popup edit mode, and have a custom editor template.

This is the Editor Template code.
The control successfully loads the states, and binds to the model, and shows the correct state value, if there is one provided. In our database, the StateId field is Nullable, and I think this is where the problems arise. 

For completeness, here is the controller function that populates the state list.
the client.GetStates() returns an IEnumerable<State> collection.

NOTE: This exact same code works in a non-grid view in our MVC project.

Now, when the StateId is populated on load, it will display the correct state in the DropDownList. If I change this state and click the Update button on my popup editor, the Update Action is triggered, model.StateId = NewIDSelected and the change gets saved to the database. Now if the StateId is NULL from the database, obviously no state is selected, but now, if I select a state from the DropDownList, and click the Update button on my editor, the Update Action is not triggered, and no change is saved to the database.

To add to that, if I change any other field on the editor (say change or add the street address)  in addition to the State change (from null to a state value), the Update Action is correctly triggered, but the model.StateId = null.

As I stated before, this exact same scenario works perfectly on a view that does not use a grid at all (as a matter of fact the popup editor is an exact duplicate of that view).

Can anyone help me figure out how to fix this? We have got around it by using a plain HTML DropDownList, but it is ugly ugly... but it works.

The dropdownlist does not seem to find a value when I have a repeating character.

For example, I'm looking for a last name of "Allen".  I start typing "al" and the first occurrence with of a name beginning with "Al" is highlighted.  When I type the next "l", it jumps to the first occurrence of a name that begins with "L".

A regular html dropdownlist does not seem to behave this way.

I've tried fiddling with the delay option but it doesn't seem to help.

thanks

I have grid with client detail template:

@(Html.Kendo().Grid<SalesOrderModel>()
      .Name("SalesOrders")
      .Columns(columns =>
          {
              columns.Bound(e => e.Number).Width(20).ClientTemplate(Html.ActionLink("#=Number#", "Edit", "SalesOrder", new { id = "#=Id#" }, null).ToHtmlString());
              columns.Bound(e => e.Status).Width(20);
              columns.Bound(e => e.ContractorName).Width(200);
              columns.Bound(e => e.CreatedDate).Width(40).Format("{0:d}");
          })            
      .ClientDetailTemplateId("itemsTemplate")
      .Pageable()
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Read(read => read.Action("LoadData", "SalesOrder"))
                                    .PageSize(40)
      )
      .Sortable()
      .Filterable())
<script id="itemsTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<SalesOrderItem>()
            .Name("Items_#=Id#")
            .Columns(columns =>
            {
                columns.Bound(o => o.Position).Width(20);
                columns.Bound(o => o.Index).Width(100);
                columns.Bound(o => o.Name).Width(200);
                columns.Bound(o => o.Quantity).Width(20);
                columns.Bound(e => e.UnitOfMeasure).Width(20);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("LoadItems", "SalesOrder", new { salesOrderId = "#=Id#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>

i was looking here
http://docs.kendoui.com/api/web/tooltip
after some posibilities to customize the tootip,but i did not find.
i would like to setup the dimensions of the container where is the text,also the color,and maybe the position or even the form of that poiting arrow.i noticed that by default is a gray color,and a perfect triangle as an arrow.

How can i customize the style for the tooltip?

Regards,
Daniel

Hi !

I've recently downloaded trial version of Kendo UI with wrappers for MVC. I'm developing simple application to test Kendo out and I'm stuck. What I want is for user to get text from Kendo Autocomplete, and when he clicks save button that text is added to database (so value is sent back to server - mvc controller ; I'm using EF 5.0 as ORM) and also that text is automatically showed on page without reloading it ! 
I've done the first part, but I'm stuck at showing text without reloading webpage.  I'm new in Javascript and jQuery but I believe this could be done using MVVM pattern. So my question is can I accomplish this using Kendo MVVM, and if I can, how ?

Hi My code below works fine in IE 10 , however it doesn't appear to work on page load event when using IE 8 or IE9. In brief I have a ListView that I bind manually upon page load and everytime something changes in the AutoComplete control. In IE9 and 8 the only thing that's's not working is being able to populating the ListView upon page load. I'm attempting to read the datasource of ListView to populate it. Look at my comment below in the Java Script section. As soon as I type something  in the AutoComplete text. then the listview populates and everything else works just fine. Maybe the sequence of where I have the .read() command should be moved to somewhere else to be able to refresh the ListView. But I'm not sure where. Any Ideas?

@model IEnumerable<HeatSeekerWeb.Models.Document>

<script type="text/x-kendo-tmpl" id="template">
    <div class="Document" id="template">
        <h3>#:Title#</h3>
        <a href="@Url.Content("~/Document/Download?url=#:Path#&fileName=#:FileName#")"><small>#:FileName#</small></a>        
        <p>#:Description#</p>
        <hr />
    </div>
</script>
<div id="divSearchDoc">
            @(Html.Kendo().AutoComplete()
        .Name("acDocuments")
        .Filter("startswith")
        .HtmlAttributes(new { style = "width:500px" })
        .Placeholder("Search Title...")
        .DataTextField("Title")
        .DataSource(source =>
                    {
                        source.Read(
                            read =>
                            {
                                read.Action("Get_Documents", "Document")
                                    .Data("onAdditionalData");
                            }
                            )
                            .ServerFiltering(true);
                    })
        .Events(events => events.DataBound("onDataBound").Select("onSelect").Change("onChange"))
        )
        @Html.ActionLink("Upload Document", "Create", "Document")
</div>
<div class="documents-sections">
    @(Html.Kendo().ListView<HeatSeekerWeb.Models.Document>()
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Documents_Read", "Document").Data("getSelectedItems"));
        dataSource.PageSize(4);
    })
    .AutoBind(false)
    .Pageable()
)
</div>
<script>
    $(function () {
        // THIS LINE DOESN'T WORK on IE 8 and IE 9. No Problem in IE10
        $("#listView").data("kendoListView").dataSource.read();
    });

    function onAdditionalData() {
        return {
            text: $("#acDocuments").val()
        };
    }

    function getSelectedItems(e) {
        return { text: $("#acDocuments").val() };
    }

    function onDataBound(e) {
        $("#listView").data("kendoListView").dataSource.read();
    };
    function onChange() {
        $("#listView").data("kendoListView").dataSource.read();
    }

    function onSelect(e) {
        //var dataItem = this.dataItem(e.item.index());
        $("#listView").data("kendoListView").dataSource.read();
    }

</script>

Drop down list is continously showing the loading sign

I have the following model deliverable type

public partial class t_deliverable_type_mst
    {
        public t_deliverable_type_mst()
        {
            this.t_deliverable_item_mst = new HashSet<t_deliverable_item_mst>();
        }
    
        public int pk_d_type_id { get; set; }
        public string type { get; set; }
        public string logo { get; set; }
    
        public virtual ICollection<t_deliverable_item_mst> t_deliverable_item_mst { get; set; }
    }
I have create a kendo drop downlist as
@(Html.Kendo().DropDownList()
               .Name("dtype")
              .HtmlAttributes(new { style = "width: 200px" })
              
              .OptionLabel("Not working")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetTypes", "deliverable");
                  })
                  .ServerFiltering(true);
                  
              })
             .DataTextField("type")
             .DataValueField("pk_d_type_id")
             .SelectedIndex(0)
             .Template("<img src=\"" + Url.Content("~/images/dtype_logo/") + "${data.logo}\" alt=\"${data.type}\" />" +
                         "<dl>" +
                          "<dt>Type:</dt><dd>${data.type}</dd>" +
                         "</dl>")
            )

this is the method in my controller
 public JsonResult GetTypes()
        {
            deliverableEntities deliv_ent = new deliverableEntities();
            JsonResult types = new JsonResult();

            var type_list = deliv_ent.t_deliverable_type_mst.ToList();

            types= Json(type_list, JsonRequestBehavior.AllowGet);
           
            return types;
        }