I am missing something important regarding this example grid

    http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html?mvc

I based my shopProductAdmin view/controller closely on this example, making use of the custom editor used in the example for CategoryViewModel, for my priceStrategyViewModel.

Other differences from the reference, 
I am using InLine editing instead of InCell.  
I am not using Batch mode.
The read function has additional data it sends to get the products.
The read/update/delete functions all have role requirement hints for security, but i tested without these security hints and the behavior is the same.

There is something not right about the data being passed around though.  Some binding somewhere must be amiss and I can't seem to spot it.
Bad behaviors I see..

a) the default priceStrategy, when no record exists in the database, the PriceStrategyViewData.priceStrategyID/name are populated with the 99_none and the proper index.  That part works.
b) when I edit a field, the customEditor comes up.. good
c) the value of the priceStrategy changes from 99_none to the first value in the priceStrategies list -- bad!. it should still be 99_none.  This is the first indication that some data is not being passed around properly.
d) when I update the record on the grid, the update function in the controller see's the new product and all fields are properly updated with the notable exception of the PriceStrategyViewModel.* fields.

One piece of code in the example that I haven't gleaned why it is there.. in the example that I found on the installation package.. (this isn't shown on the web version, as the entities are not part of the sample code there), the entity not only has a 
  public CategoryViewModel Category { get; set; }
member.. which I understand that.  But it also has this member right after it.. which seems to have no function anywhere in the grid.  Was this intentional?  I included it in my model also only to be consistent, but I haven't decided why it is there.  It seems like it isn't serving a purpose.

          public int? CategoryID { get; set; }

Anyway, here is my grid in the Admin.cshtml


                @(Html.Kendo().Grid<EveTools.WebUI.Models.shopProductsAdminViewModel>()
                    .Name("productsGrid")
                    .Columns(columns =>
                    {
                        columns.Bound(product => product.typeName).Width(200).Title("Shop");
                        columns.Bound(product => product.forSale).Title("ForSale?");
                        columns.Bound(product => product.PriceStrategy).ClientTemplate("#=PriceStrategy.name#").Width(150);
                        columns.Bound(product => product.markup).Title("markup").Width(50);
                        columns.Bound(product => product.price).Title("Price");
                        columns.Command(command => { command.Edit();  command.Destroy().Text("Clear"); }).Width(100);
                    })
                    .DataSource(dataBinding => dataBinding
                        .Ajax()
                        .ServerOperation(false)                        
                        .Model(model => model.Id(p => p.typeID))
                        .Read(read => read.Action("ProductListAdmin", "Shop").Data("additionalProductListData"))
                        .Destroy(update => update.Action("EditingInline_DeleteProduct", "Shop"))
                                .Update(update => update.Action("EditingInline_UpdateProduct", "Shop"))
                        .Events(events => events.Error("error_handler"))
                        .Model(model =>
                        {
                            model.Id(p => p.typeID);
                            model.Field(p => p.typeName).Editable(false);
                            model.Field(p => p.price).Editable(false);
                            model.Field(p => p.PriceStrategy).DefaultValue(
                                ViewData["defaultPriceStrategy"] as EveTools.WebUI.Models.PriceStrategyViewModel);
                        })
                    )
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .HtmlAttributes(new { style = "height:480px;" })

And the critical controller functions.

This function returns the data to the grid when requested.. by means of another list control of categories.

        public ActionResult ProductListAdmin([Kendo.Mvc.UI.DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request, int? categoryID)
        {
            // if there is no category, there are also no products
            if (!categoryID.HasValue)
                return null;

            EveShop.Domain.Concrete.EFEveShopDbContext db = new EveShop.Domain.Concrete.EFEveShopDbContext();

            PriceStrategyViewModel defaultPriceStrategy = GetDefaultPriceStrategy();

            // extract data from db, and fill in shopProductsAdminViewModels
            var products = (from t in db.invTypes
                            join p in db.shopProducts
                            on t.invTypeID equals p.shopProductID into output
                            from o in output.DefaultIfEmpty()
                            select new shopProductsAdminViewModel
                            {
                                typeID = t.invTypeID,
                                groupID = t.groupID,
                                typeName = t.typeName,
                                volume = t.volume,
                                basePrice = t.basePrice,
                                published = t.published,
                                marketGroupID = t.marketGroupID,
                                iconID = t.iconID,
                                markup = (t.shopProduct == null) ? 0 : t.shopProduct.markup,
                                forSale = (t.shopProduct == null) ? false : t.shopProduct.forSale,
                                price = (t.shopProduct == null) ? 0 : t.shopProduct.shopProductPrice.price,
                                // not sure why i am filling this one in.. it was included in the original example though.. no binding to the grid?
                                priceStrategyID = (t.shopProduct == null) ? defaultPriceStrategy.priceStrategyID : t.shopProduct.shopPriceStrategy.shopPriceStrategyID,
                                // the actual price strategy data.. this one gets bound to the grid
                                PriceStrategy = new PriceStrategyViewModel
                                {
                                    priceStrategyID = (t.shopProduct == null) ? defaultPriceStrategy.priceStrategyID : t.shopProduct.shopPriceStrategy.shopPriceStrategyID,
                                    name = (t.shopProduct == null) ? defaultPriceStrategy.name : t.shopProduct.shopPriceStrategy.name
                                }
                            }).Where(e => e.marketGroupID == categoryID && e.published != false)
                    .OrderBy(e => e.typeName)

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


This function receives the update record callback

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingInline_UpdateProduct([DataSourceRequest] DataSourceRequest request, shopProductsAdminViewModel product)
        {
            // do something with updated product
            // product.priceStrategy.* is always the default value, not the edited value.

            return Json(new[] { product }.ToDataSourceResult(request, ModelState));
        }

The PriceStrategyViewModlEditor.cshtml

@model EveTools.WebUI.Models.PriceStrategyViewModel
       
@(Html.Kendo().DropDownListFor(m => m)
        .Name("PriceStrategyViewModel")
        .DataValueField("priceStrategyID")
        .DataTextField("name")
        .BindTo((System.Collections.IEnumerable)ViewData["priceStrategies"])
)

Using Win 7, IE 8 standards mode and IE 9, MVC 4, jQuery 2.0.3, Kendo UI w/ MVC Wrappers 2013.2.918.340
I have a relatively simple grid in a MVC View that renders perfectly OK on page load when containing no data (in all browsers).  But when the data source contains at least one row, the initialization script appears to be rendered twice in the DOM,which causes a sort of empty "phantom" grid to appear below the real one.  This also throws off all the remaining DOM elements in the page, as if there is an unclosed tag or invalid HTML somewhere. See attached screenshots.  Other grids in this app with a similar configuration also work fine.

Here is my grid config:

@(Html.Kendo().Grid(@Model.OrderViewModel.Parcels)
  .Name("OrderViewModel_OrderParcels")
  .ToolBar(tb => tb.Create().Text("Add"))
  .Columns(c =>   {
 c.Bound(model => model.OrderParcelId).Hidden();
 c.Bound(model => model.OrderId).Hidden();
 c.Bound(model => model.Number);
 c.Command(command =>  {
 command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
 command.Destroy().Text(" ");
}).Width(300);
  })
  .Editable(edit =>   {
 edit.Mode(GridEditMode.InLine);
 edit.DisplayDeleteConfirmation("Are you sure you want to remove this Parcel Number?");
  })
  .DataSource(ds => ds.Ajax()
 .Model(m => m.Id(x => x.OrderParcelId))
 .Create(x => x.Action("AddParcel", "Order"))
 .Update(x => x.Action("AddParcel", "Order"))
 .Destroy(x => x.Action("RemoveParcel", "Order"))
 .ServerOperation(false))
  .Scrollable(scroll => scroll.Height(50))
  )
</fieldset></div>

Here is the output (copied from IE Dev Tools > View Source > DOM (Page)):
<DIV class="row">
<FIELDSET>
<LEGEND>Parcels</LEGEND>
<DIV id="OrderViewModel_OrderParcels" class="k-widget k-grid k-secondary" data-role="grid" jQuery111002042388671417229="202">
<DIV class="k-toolbar k-grid-toolbar k-grid-top slvzr-first-child" jQuery111002042388671417229="213">
<A class="k-button k-button-icontext k-grid-add" href="http://localhost:54886/Order/Edit/1?OrderViewModel_OrderParcels-mode=insert"><SPAN class="k-icon k-add"></SPAN>Add</A>
</DIV>
<DIV style="PADDING-RIGHT: 17px" class="k-grid-header">
<DIV class="k-grid-header-wrap">
<TABLE role="grid">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<THEAD class="">
<TR class="">
<TH style="DISPLAY: none" class="k-header slvzr-first-child" scope="col" data-title="Order Parcel Id" data-field="OrderParcelId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Parcel Id</SPAN>
</TH>
<TH style="DISPLAY: none" class="k-header" scope="col" data-title="Order Id" data-field="OrderId">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Order Id</SPAN>
</TH>
<TH class="k-header" scope="col" data-title="Parcel Num" data-field="Number">
<SPAN class="k-link slvzr-not4046k-state-disabled41">Parcel Num</SPAN>
</TH>
<TH class="k-header" scope="col">
<SPAN class="k-link slvzr-not4046k-state-disabled41">&nbsp;</SPAN>
</TH>
</TR>
</THEAD>
</TABLE>
</DIV>
</DIV>
<DIV style="HEIGHT: 50px" class="k-grid-content" jQuery111002042388671417229="209">
<TABLE role="grid" jQuery111002042388671417229="211">
<COLGROUP><COL /><COL style="WIDTH: 300px" /></COLGROUP>
<TBODY>
<TR role="row" data-uid="aecb476a-cbda-4b2f-9465-92464cde82de">
<TD style="DISPLAY: none" role="gridcell">
11
</TD>
<TD style="DISPLAY: none" role="gridcell">
1
</TD>
<TD role="gridcell">
1
</TD>
<TD role="gridcell">
<A class="k-button k-button-icontext k-grid-edit" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-edit"></SPAN></A><A class="k-button k-button-icontext k-grid-delete" href="http://localhost:54886/Order/Edit/1#"><SPAN class="k-icon k-delete"></SPAN></A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
<SCRIPT>

jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>
</FIELDSET>

</DIV>
</FORM>
<SCRIPT>

jQuery(function(){jQuery("#OrderViewModel_OrderParcels").kendoGrid({"columns":[{"title":"Order Parcel Id","hidden":true,"field":"OrderParcelId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderParcelId must be a number.\" id=\"OrderParcelId\" name=\"OrderParcelId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderParcelId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Order Id","hidden":true,"field":"OrderId","filterable":{},"encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field OrderId must be a number.\" id=\"OrderId\" name=\"OrderId\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"OrderId\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Parcel Num","field":"Number","filterable":{},"encoded":true,"editor":"\r\n\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-length=\"The field Parcel Num must be a string with a maximum length of 50.\" data-val-length-max=\"50\" data-val-required=\"The Parcel Num field is required.\" id=\"Number\" maxlength=\"50\" name=\"Number\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"300px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]}],"editable":{"confirmation":"Are you sure you want to remove this Parcel Number?","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"prefix":"","read":{"url":""},"update":{"url":"/Order/AddParcel"},"create":{"url":"/Order/AddParcel"},"destroy":{"url":"/Order/RemoveParcel"}},"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"OrderParcelId","fields":{"OrderParcelId":{"type":"number"},"OrderId":{"type":"number"},"Number":{"type":"string"}}}},"data":{"Data":[{"OrderParcelId":11,"OrderId":1,"Number":"1"}],"Total":1}}});});
</SCRIPT>

The italicized </FORM> tag above should not appear until way further down the page.  With the empty datasource grid, the <SCRIPT> tag is not rendered twice and the resulting HTML is valid.  I was thinking this is some kind of string escaping issue in the script template, but I can't spot anything wrong....

Please help, as this is blocking a critical part of our application for all IE8 and IE9 users


 

 have a MVC 5. project installed kendo mvc (Telerik MVC). I installed the components by hand as your installer didn't work for 5.1. However this is not the issue for this post.
I installed the components in the Content and js scripts folder like this Content-kendo-2013.3.1414 folder.
Everything worked in debug mode. As soon I used release mode the application couldn't find the theme sprite image in the folder. It was referenced to the Content-kendo-theme folder instead. (Same result latest release 1503).
I moved all the files to be direct under kendo folder and all worked again in debug and release mode.

So my question: Is this a bug or have I done something terrible...  :) 

I am calling LoadContentFrom for the panel content, but this function strips out the HTML markup on that content, and just shows the text.  How do I work around that?

Hi all,

I am trying to update the text of a node without having to refresh the whole tree. 
Is this possible?

I have tried unsuccessfully with the following:
var treeview = $("#ProcessTree").data("kendoTreeView");
var node = treeview.dataItem(treeview.select());
node.Name = "Updated Text";
treeview.collapse(node);
node.loaded(false);
node.load();
treeview.expand(node);

Thanks,
Keith. 

Hi all,

In Chrome, I am getting a scrollbar to the right of the Treeview (see attached image). 
When I expand the lowest child - the scrollbar disappears. This issue does not happen in IE

Thanks,
Keith. 

Hi
I am looking for  the solution
for changing content of header on select event of child of previous header. I have attached file in that country and plant is there on select of country (Paris) 
plant(of paris) should load accordingly.

Hi Guys, 
I'm trying to insert a treeview in my application so i checked your online examples..

My scenario would fall into "Binding to a remote data" but it's a little more complex.

I have 3 different objects that I need to put in my tree (they came from EF and they are not linked automatically - ef and oracle doesn't work with FK on unic constraints):

Object A

ObjectA is the main-level object...it will occurs only on the root level of the tree.
Each Object A always have a list of object B

ObjectB

each ObjectB always have a list of object C

ObjectC

Here's a tricky part...
Each objectC may have a list of objectC...

now..In your example the read method of the tree call always the same action and whether or not has a parameter load a different node.

In my case I have different object...Is there a way to Implement your example in my scenario?
I guess that, if there's not, I'll have to load all root-nodes and with js load every node's children on click.
I already tried this one and my tree doesn't have to icon to expand a node. I also tried adding to objecta a bool property (like HasChild) and also to fullfill the child list in the first call.
Same appens if I try to replicate your example..I load the root-level but no node is expandable..so it never call the action with the id param.

What Am I doing wrong?
Thanks
Fabio

I have an AutoComplete that is context dependent on other fields of the View screen.  For example, if a work order number is null, the autocomplete should function normally, however, if the workorder is present, then the autocomplete should not accept any changes because the value is then dictated by the work order and would only change if the work order changed.  I don't want to make the field read-only because then it won't post it's data to the server.  That would make things complicated and I adore simple.

I don't find an onBeforeChange event for the widget... is it possible to hook one up, and if so how?  If not, please suggest a solution.

Thanks!

When entering Edit mode (either In Line or Batch) the columns of the grid are automatically resizing.  Is there any way to get them to stay at the static width they appear in when in read only mode?