I'm building a grid based off of the popup editing demo: 
http://demos.kendoui.com/web/grid/editing-popup.html

However, the input elements of my grid are not styled/themed.

The date input is just a textbox, not a datepicker, and all the textboxes are offset from their horizontal center.

Here is the code for the grid

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.LastSupply).Editable(true);

        })
        .Create(update => update.Action("EditingPopup_Create", "Grid"))
        .Read(read => read.Action("EditingPopup_Read", "Grid"))
        .Update(update => update.Action("EditingPopup_Update", "Grid"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
    )
)


It looks like the appropriate classes are not being added to the elements.  When I check out the rendered markup for the input elements, a textbox is rendered as such.

<input name="Company" class="text-box single-line" id="Company" type="text" value="" data-val-required="The Company Name field is required." data-val="true" data-bind="value:Company">

The classes are incorrect as they should be "k-input k-textbox".

Also, you can see from the screen shot that the datetime is rendered as a textbox and not a calendar picker.

Here is the model.

    public partial class Opportunity
    {
        [ScaffoldColumn(false)]
        public int ID { get; set; }

        [Required]
        [DisplayName("Company Name")]
        public string Company { get; set; }
        public int? StatusID { get; set; }

        [DataType(DataType.Date)]
        public DateTime DateAdded { get; set; }

        public string PotentialAmount { get; set; }
        public double? PercentComplete { get; set; }
        public string CreatedBy { get; set; }
        public DateTime? DateClosed { get; set; }
    }



Thanks

Hi there

I've tried accessing the information via the documentation (and a Google search) but can't find a concise answer.

What are the differences between using Ajax VS Server binding / editing.

It appears as though they pretty much support the same feature set. Is it just that server binding forces a page reload? I note that there are some client-side events that are not raised when server binding is used.

Can you please clarify the pros and cons of Ajax VS Server binding / editing?

Thanks,

Paul.

This seems to work for me although Chrome and Firefox don't seem to scroll the grid to show the latest row when using virtual scrolling. IE10 on the other hand does work.

var ps_Fn = function () {
   var rIndex = 0,
      cIndex = 0,
      FOCUSED = "k-state-focused";
   return {
grid_key: function (gridId, AfterNewRow) {
   var grid = $(gridId).getKendoGrid();
   $(gridId).on('keydown', function (e) {
      if (e.keyCode == 9 || e.keyCode == 38 || e.keyCode == 40) {
         var curRow = grid.select();
         if (!curRow.length)
            return;
         var cell = grid.current()[0],
            newRow,
            model = grid._modelForContainer(cell),
            field = grid.columns[cIndex].field;
         cIndex = cell.cellIndex;
         if (e.keyCode == 9) {
            if (e.shiftKey) {
               if (cIndex == curRow[0].cells.length -1) {
                  newRow = curRow.prev();
               }
               else
                  return;
            }
            else {
               if (cIndex != 0)
                  return;
               newRow = curRow.next();
            }
         }
         else if (grid._editContainer && model.editable(field)) { //in edit mode don't want to muck around with combos, etc.
            return;
         }
         else if (e.keyCode == 38) {
            newRow = curRow.prev();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.prev();
            }
         }
         else if (e.keyCode == 40) {
            newRow = curRow.next();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.next();
            }
         }
         if (!newRow.length)
            return;
         rIndex = newRow[0].rowIndex,
         ps_Fn.grid_setcurrent(grid, AfterNewRow);
      }
   });
},
grid_savecurrent: function(grid) {
   var curRow = grid.select();
   if (!curRow.length)
      return;
   var cell = grid.current()[0];
   cIndex = cell.cellIndex,
   rIndex = curRow[0].rowIndex;
},
grid_setcurrent: function (grid, AfterNewRow) {
   var curRow = grid.tbody.find(">tr:eq(" + rIndex + ")");
   grid.select(curRow);
   var newCell = curRow.find(">td:eq(" + cIndex + ")");
   if (grid._editContainer) {
      grid.closeCell();
   }
   if (AfterNewRow) {
      var dataItem = grid.dataItem(curRow);
      if (dataItem)
         AfterNewRow(dataItem);
   }
   grid.current(newCell);
   newCell.focus();
   newCell.addClass(FOCUSED);
};
}();

I am using a ColorPicker as part of a new user form. The selected colour is intended to be used later in a Scheduler.
I have tried setting the Value to Model.Colour directly and, using a scrip via a hidden textbox but cannot get it to work; the Model.Colour field always returns null.
My views and script are shown below .

I would appreciate any ideas about what I am doing wrong.

The View;  some fields have been stripped out for clarity
The view is called from this grid
As stated, I have tried populating the model directly from the .Value field without success so I am now updating the HiddenFor<> text field using the following script:
After selection I can see that the text field has been updated with the colour as expected but when clicking submit the returned colour is always null.

Thanks in anticipation of your help

Lets say I have a grid, in which I reference ClientDetailTemplateId("historyTemplate").
Then in my script template I have another grid. In that grid I have
columns.Bound(t => t.Id)
                .Title(Jengo.Resources.Master.OperationsMsg)
                .Width(100)
                .ClientTemplate(
                    Html
                    .Kendo()
                    .Menu()
                    .Name("themenu\\#=Id\\#")
                    .Items(menu => menu.Add()
                        .Text("sometext")
                        .Items(sub =>
                        {
                            sub.Add()
                                .Url(Url.Action("Show", "Damage") + "/#= data.Id #")
                                .Text("anothertext");
                          })
                            )
                      .Orientation(MenuOrientation.Horizontal)
                            .HighlightPath(true)
                            .OpenOnClick(true)
                            .ToClientTemplate()
                            .ToHtmlString()
                        )
             .HeaderHtmlAttributes(new { style = "text-align:center;width:100px;" });
        }
Error I get on Chrome Console is 'Uncaught SyntaxError: Unexpected token ILLEGAL' Problem dissapears when I remove content of ClientTemplate (Html.Kendo.Menu...).

My question is - how can I make menu inside ClientTemplate inside Detail Template work? Did I miss some escape character?

Description: Setting an event to recur every x (days, months etc.) AND having a, "end after y occurrences" fails.

Expected behaviour: I set an event to occur every 3 days, for 5 occurrences. I see 5 occurrences and then it stops.

Actual behaviour: The recurrence will occur until 5 days have passed, not 5 events, then stop. (So in the case above, I would see 2 events, not 5). If I set every 2 weeks for 10 occurrences, They'll stop after 10 weeks instead of after 10 events.

Steps to reproduce: Add a new event, set the recurrence to every 3 days, and the event to end after 3 occurrences.



Secondly, is it possible to set an event to occur every x WORK days?
e.g. I want to set up a rolling shift with every 6 work days a day off. (Monday the first week then Tuesday, etc until Friday, then Monday again).

Thanks.

Sean.

I have a Kendo grid that I'm using to display search results on an MVC page. I'm using a function called "getSearchCriteria" to gather the search criteria from the page so it can all be sent to the controller's search method.

Everything works great when search criteria is supplied. However, I can't find a way to cancel the request from the client side if no search criteria was supplied. Returning either "false" or "null" from the "getSearchCriteria" function has no effect.

Is there any way to tell the Kendo grid not to invoke the controller's action at this point in time?

I am using the MVC wrapper and I'm able to get all working except the Destroy option, it never fires the AJAX post like the example.  The only difference between my setup and the example  is that I am using Azure Blob as my image storage.  Read, Upload and Thumbnails work great.  Below is my current code.

Also, I am not able to have the 2 scripts listed below included on the same page.  This creates problem number 2 for me. I canot get the grid to sort and filter without the "kendo.aspnetmvc.min.js" script. When I do included this feature work for the grid but then it breaks my editor.

Please remember that this page is a test page only.  Thanks in advance for your help.  - Shawn


@using Kendo.Mvc.UI;
@{
    Layout = "";
    ViewBag.Title = "Test_KendoUI";
    AcctInfo acctInfo = (AcctInfo)Session["AcctInfo"];
}
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.common.min.css")" />
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.default.min.css")" />

<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/jquery.min.js")"></script>
@* Need below script for Editor ImageBrowser to work properly *@
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.web.min.js")"></script>    
@* Need below script for GRID to Work properly BUT CANNOT have both scripts. When the below script is included the imagebrowser loads "Undefined" folders as the images when opened.
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.aspnetmvc.min.js")"></script>
*@

<h2>Test_KendoUI</h2>


@(
    Html.Kendo().Editor()
        .Name("EmailMessage")
        .HtmlAttributes(new { style = "width: 740px;height:440px" })
        .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
            .InsertUnorderedList().InsertOrderedList()
            .Outdent().Indent()
            .CreateLink().Unlink()
            .InsertImage()
            .SubScript()
            .SuperScript()
            .TableEditing()
            .ViewHtml()
            .Formatting()
            .FontName()
            .FontSize()
            .FontColor().BackColor()
        )
        .Value("")
        .ImageBrowser(imageBrowser => imageBrowser
        .Image("http://pas.blob.core.windows.net/users/" + @acctInfo.accountOwnerUserID + "/files/Images/{0}") // image location URL              
        .Read("_getImages", "Common") // get files
        .Create("_createDir", "Common") // create folder/directory
        .Destroy("_deleteImage", "Common") // delete file or folder
        .Upload("_uploadImage", "Common")  // add new file
        .Thumbnail("_getThumbnailImages", "Common")  
        .FileTypes("*.jpg,*.png,*.gif,*.jpeg,*.bmp")               
        )
)

Hello,
is it possible to align time horizontally?
Something like here in aspnet-ajax?
http://www.telerik.com/community/forums/aspnet-ajax/scheduler/align-time-horizontally-in-week-view.aspx
thanks it would help me a lot...

I have found numerous Google threads on this, but absolutely nothing works.  I just want to open a window to a maximum 80% the browser height.  That's it.  I don't want to specify a size in pixels.  That doesn't do any good for multiple devices.

So the height should be auto sized, but up to a max size of 80% the browser window at the time of when the kendo window opened.  Is this not possible?