Hi,

I have a Kendo comboboxfor on my view and the datasource comes from my model as an IEnumerable<SelectListItem>.  But running the page crashes with the subject error message.  If I change the CombBoxFor to ComboBox and attach the datasource with the dataSource method, it seem to work.  What is wrong here: 

Here is my View (code is partial):

and here is my Model (code is partial):

What am I doing wrong here?

Babu.

Basically, I have a bulleted list inside the listview, and when a user selects and item, I want it to automatically fire the create action method. And when the user deselects I want it to fire the Destroy action method

Hi,

I have noticed that the "Ends with" filter does not always work when the entry matches an item in the column. I'm using client side filtering and paging.

An example of this behavior can be seen by going to the  Grid /Binding to local data online sample at http://demos.kendoui.com/web/grid/local-data.html 

In the City column set the filter "Ends with" then enter New York in the text field, 17 records are returned 4 with New York as the city, 3 with Redmond as the city and 10 with Seattle as the city.

Is there a fix and/or workaround for this issue?

Thank you,

I am using mvc4. On one of my page, it has Kendo Grid. I want to show 5 rows per page. I have no problem doing it using pure javascript, however, If I am using mvc helper. I got lost, couldn't find any samples online.

here's my javascript code.




$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
serverPaging: true,
pageSize: 5,
transport: { read: { url: "Products/GetAll", dataType: "json"} },
schema: { data: "Products", total: "TotalCount" }
},
height: 400,
pageable: true,
columns: [
{ field: "ProductId", title: "ProductId" },
{ field: "ProductType", title: "ProductType" },
{ field: "Name", title: "Name" },
{ field: "Created", title: "Created" }
],
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});
});



now if i am using mvc helper

@(Html.Kendo().Grid(Model) 
.Name("Grid")  // please help me to finish this

MVC3 
I use in Form.cshtml

    @Html.DropDownListFor(m => m.GroupID, ViewData["GroupNameDDL"] as SelectList, "-- Select one --")    

in Controller  
    ViewData["GroupNameDDL"] = _tbl68SpeciesgroupsRepository.Tbl68Speciesgroups.Select(b => new {
      Id = b.GroupID,
      Name = b.GroupName});

TELERIK MVC
in EditorTemplate Tbl68SpeciesgroupsForeignKey.cshtml
   @using System.Collections
   @using Telerik.Web.Mvc.UI
   @(Html.Telerik().DropDownList()
        .Name("GroupNameDDL")
        .BindTo(new SelectList((IEnumerable)ViewData["GroupNameDDL"], "ID", "Name"))) 


in GridViewmodel.cs
        [Required]
        [UIHint("Tbl68SpeciesgroupsForeignKey")]
        public int? GroupId { get; set; }

In Telerik I use in Form.cshtml
      columns.ForeignKey(b => b.GroupId, (IEnumerable)ViewData["GroupNameDDL"], "ID", "Name");



How to implement
"-- Select one --"


    

I'm trying to create a detail popup for each line in my grid (which uses Server Binding)
I've created a custom command as follows.

columns.Command(command =>
{command.Edit();
command.Custom(

"Details").Text("Line Details").Action("Product", "Home").DataRouteValues(v => v.Add(c => c.SKU).RouteKey("selectSID"));}
);

Corresponding Controller action

public ActionResult Product(string selectSID){
var result = IProductRepository.One(p => p.SID == selectSID);
if (result == null)
{return RedirectToAction("Error");}
else
return PartialView(result);
}

This all works but my Partial View is opened as a full page in the existing window, how can I open this as a popup?

I've tried using JS and kendowindow to open the popup and this does work but I can't see how to pass the SKU from the selected line in the grid so I see my error page loaded in the popup window.

This is my partial view

 @model TestKendo.Models.Product

 <fieldset>
<div class="display-field">
@Html.DisplayFor(model => model.Description)

</div> 
 <img src="..\120571.jpg" />
</fieldset> 
 <p> @Html.ActionLink("Back to List", "Order") </p>  

Any and all help appreciated, i've got this far from browsing the forums and sample apps.

Hi,

Is it possible to conditionally display the destroy button? I've messed with command.Destroy().HtmlAttributes... but it is not working.

Thanks!
David A.

Hi all, I hope someone can help on this odd problem I have.
I am performing binding against some objects called Instances.
Each Instance has a couple of strings, and another object called a Hosting Environment.
HostingEnvironment has the LocationName as a string.

So I'm using a ClientTemplate to display LocationName, while binding to the HostingEnvironment for that grid column.
I'm also using a PartialView for displaying the list of HostingEnvironment locations names in a dropdown during an edit.
That all works great, I can view and edit records.

The problem happens as soon as I click the "Create" button... it immediately throws an error:
0x800a1391 - JavaScript runtime error: 'HostingEnvironment' is undefined

When I break into the generated code, I can see that all the strings are blank (a good thing) except HostingEnvironment doesn't have a value (yes it's null)... so I guess the PartialView doesn't like that maybe?

I'm not really sure what to do...

Here's my main view.

@model IEnumerable<Core.Domain.Entities.Instance>

@(Html.Kendo().Grid(Model)
    .Name("Instances")
    .Columns(columns =>
    {
        columns.Bound(p => p.InstanceName).Title("Instance Name");
        columns.Bound(p => p.InstanceFullName).Title("Instance Full Name");
        columns.Bound(p => p.HostingEnvironment);//.Title("Hosting Environment").ClientTemplate("#: HostingEnvironment.LocationName #");
        columns.Bound(p => p.SysId);
        columns.Command(command => {command.Edit(); command.Destroy(); });
    })
    .Pageable()
    .Sortable()
    .Scrollable() 
    .Filterable()
    .ToolBar(commands => commands.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource        
        .Ajax()
        .Model(model => model.Id(p => p.SysId))
        // Configure CRUD -->
        .Create(create => create.Action("CreateNew", "Instance"))
        .Read(read => read.Action("Read", "Instance"))
        .Update(update => update.Action("Update", "Instance"))
        .Destroy(destroy => destroy.Action("Destroy", "Instance"))
        // <-- Configure CRUD        
     )
)

Thought this might help, a client has a requirement for a grid to be placed in a splitter with grid in line editing at the same time in another splitter pane they want an editable version of the record shown.
The problem I had was getting kendo data binding on to the partial view this is my solution for a general binding function where the container is an html form bound to a POCO class, the model is the dataItem of a selected grid row.

function databind (container, model) {
   if (container) {
      container.find(":input:not(:button, [" + kendo.attr("role") + "=upload], [" + kendo.attr("skip") + "]), select").each(function () {
         var bindAttr = kendo.attr("bind"),
               binding = this.getAttribute(bindAttr) || "",
               bindingName = this.type === "checkbox" ? "checked:" : "value:",
               fieldName = this.name;

         if (binding.indexOf(bindingName) === -1 && fieldName) {
            binding += (binding.length ? "," : "") + bindingName + fieldName;

            $(this).attr(bindAttr, binding);
         }
      });
      kendo.bind(container, model);
   }
}

function grid_change (e) {
   var pid = this.select();
   var dataItem = this.dataItem(pid);
   var details = $('#your container for form');
   var frm = $("#your form");
   if (frm[0]) {
      databind(details, dataItem);
   }
   else {
      $.post('@Url.Action("GetPartialViewForForm","Controller")', {
         ID: dataItem.ID
      }, function (data) {
         details.empty().append(data);
         databind(details, dataItem);
         var frm = $("#your form");
         frm.submit(function (e) {
            var data = $(this).serialize();
            $.post(this.action, data, function () { });
            e.preventDefault();
         });
      });
   }
}

//Controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetPartialViewForForm(int ID)
{
   //get the data
   return PartialView();
}