Hi there,

I am using DatePicker in my web page as this.
<td class="td-header-input">
@(Html.Kendo().DatePickerFor(p => p.MyDate).Format("MM/dd/yyyy").ParseFormats(new String[] { "MM/dd/yyyy" })
                                              .HtmlAttributes(new { id = "date_1", data_bind = "value: MyDate", @class = "header-input header-dropdownlist heasder-datepicker", style = "width:100px" })
                                             )
</td>

Instead of the default calendar image shown to the right side of datepicker, I would like to use my own version of image. I tried to set .k-i-calendar like this
.k-i-calendar {
  background: url(../images/myCalendaricon.png) no-repeat center;
  display: inline-block;
}

But nothing shows. not even the default calendar image. Can someone tell me how to use my own image in datePicker?

Thanks.

I've been having alot of problems getting the MVC extensions working. I finally resorted to starting up a brand new "c# Kendo UI for MVC Web Application". I start it up and straight away in the Chrome developer tools I see the following errors:

Uncaught SyntaxError: Invalid regular expression: missing / kendo.all.min.js:10
Uncaught TypeError: Cannot read property 'jQuery' of undefined kendo.aspnetmvc.min.js:10

I checked all the FQAs about these errors and confirmed that everything (web.config, Single JQuery reference, etc...) and everything looks good. Moreover, I tried to add a grid and I'm seeing :

Uncaught TypeError: Object [object Object] has no method 'kendoGrid'

I've attached the sample project that I created.

Hi,

I have two series of type

Series 1: {Date:1/1/2011,Hitcount:3,Date:1/12/13,Hitcount 4}

Series 2:{Date :1/1/2011,Hitcount 5,Date:1/12/13:Hitcount 5}

How do I generate Multiple series using dynamic binding

my kendo chart currently looks liek this 

  @(Html.Kendo().Chart<kendoNet.Models.ChartSeries>() // The chart will be bound to the Model which is the InternetUsers lis
                      .Name("Chart3")
                      .Title("Test")


                // The name of the chart is mandatory. It specifies the "id" attribute of the widget.
                       .DataSource(dataSource =>
                                dataSource.Read(read => read.Action("Series", "Home", new  { plname=ViewBag.Pl,test="VCS"})) // Specify the action method and controller name
                                )
                                .Legend(legend => legend
                                    .Position(ChartLegendPosition.Bottom)
                                ).ChartArea(chartArea => chartArea
                                    .Background("transparent")
                                ).SeriesDefaults(seriesDefaults =>
                                    seriesDefaults.Line().Style(ChartLineStyle.Smooth)
                                )
                                .Series(series =>
                                {
                                       //MODEL IS DICTIONARY CONTAINING THE TWO SERIES 1 AND SERIES 2 ,HOW DO WE DISPLAY MULTIPLE SERIES HERE
                                      series.Line(model => model.Values).Name("HitCount").Labels(labels => labels.Visible(true).Color("Red")).Color("Blue");                                                

                                })

                                .CategoryAxis(axis => axis
                                //.Categories(model => model.Date)
                                .Labels(labels => labels.Rotation(-65)

                                )

                                )
                       
                        .ValueAxis(axis => axis
                            .Numeric().Labels(labels => labels.Format("{0}"))
                            .Line(line => line.Visible(false))
                            .AxisCrossingValue(-10)
                        )
                        .Tooltip(tooltip => tooltip
                            .Visible(true)
                            .Format("{0}")
                        )
        )

Hi 
How to add check box in panelbar item and binding data from entity framework.  

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.