How can I customize business hours range? and how can I hide that option ?

I have two modals. One modal opens on top of the other. If I click anywhere on the screen after the second modal opens, the first modal closes. This is very undesirable. Does anyone know a workaround?

Using Razor syntax with the Grid Data Source, I am trying to specify a valid URL.

I see the documentation recommends the syntax of   

.Read(read => read.Action("Orders_Read", "Grid"))

I want to use a url for an API that I use in the app that looks like "/Orders_read/Grid/id/1/office/2"

Do you have any razor examples of passing in the URL instead of the Action/Controller?  

If you have a View Model that has a property that is an array and you bind it via "kendo.bind", whenever you change any input bound to the array, it refreshes/rebinds the ENTIRE ARRAY.  Is this by design or a bug?  It is definitely a performance issue when you have a big array.  Below is a sample project I made to demonstrate.  If you type a character in any of the inputs, it will auto-tab to the next input.  However, due to performance issue, it takes a long time for it to do so.  I am logging the "get" event to the console, and you will see that after you type into one of the inputs, every property of every item in the array is gotten again; hence the horrible performance.

================================================================
@{
ViewBag.Title = "Test";
}

<div id="placeholder"></div>

<script type="text/x-kendo-template" id="template">
<table id="scorecard">
<caption>#= TeamName #</caption>
# for (var i = 0; i < Scores.length; i++) { #
<tr>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H1', i) #" value="#= Scores[i].H1 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H2', i) #" value="#= Scores[i].H2 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H3', i) #" value="#= Scores[i].H3 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H4', i) #" value="#= Scores[i].H4 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H5', i) #" value="#= Scores[i].H5 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H6', i) #" value="#= Scores[i].H6 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H7', i) #" value="#= Scores[i].H7 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H8', i) #" value="#= Scores[i].H8 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H9', i) #" value="#= Scores[i].H9 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H10', i) #" value="#= Scores[i].H10 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H11', i) #" value="#= Scores[i].H11 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H12', i) #" value="#= Scores[i].H12 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H13', i) #" value="#= Scores[i].H13 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H14', i) #" value="#= Scores[i].H14 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H15', i) #" value="#= Scores[i].H15 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H16', i) #" value="#= Scores[i].H16 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H17', i) #" value="#= Scores[i].H17 #" /></td>
<td><input data-bind="#= kendo.format('value: Scores[{0}].H18', i) #" value="#= Scores[i].H18 #" /></td>
</tr>
# } #
</table>
</script>

@section Scripts
{
<script>
$(function () {
var
score, template, placeholder,
randomScore = function () { return Math.floor((Math.random()*10)+1); },
model = { TeamName: 'John Doe', Scores: [] };

for (var i = 0; i < 500; i++) {
score = { Number: i };
for (var j = 1; j <= 18; j++)
score['H' + j] = randomScore();
model.Scores.push(score);
}

model = kendo.observable(model);
model
.bind('get', function (e) {
console.log('getting...' + e.field);
})
.bind('set', function (e) {
console.log('setting...' + e.field);
});

template = kendo.template($('#template').html());
placeholder = $('#placeholder');
placeholder.html(template(model));
kendo.bind(placeholder, model);

$('#scorecard')
.on('focus', 'input', function (e) {
setTimeout(function () {
$(e.target).select();
})
})
.on('input', 'input', function (e) {
var next = $(this).closest('td').next().find('input').focus();
if (!next.length)
$(this).closest('tr').next().find('input:first').focus();
});

});
</script>
}

@section Styles
{
<style>
#scorecard input { width: 2em; }
</style>
}

================================================================

Hi I have a kendo grid which works well in firefox and internet explorer. 2013.2.716 is the version of the kendo I am currently using . When I call the grid edit in  the popup mode the popup window does not appear in Chrome. The google chrome version is   31.0.1650.57 m. I am running a windows 8 64 bit machine.
The kendo Grid Code is as below

 @(Html.Kendo().Grid<MyAssembly>()
     .Name("ListGrid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Method1", "ControllerName").Type(HttpVerbs.Post))
          .Update(update => update.Action("Method2", "ControllerName"))  // Action invoked when the user saves an updated data item
          .Destroy( delete => delete.Action("Method3" ,"ControllerName"))
                  .Model(model =>
                  {
                      model.Id(item => item.ID);  
                      model.Field(item => item.ID).Editable(false);  
                  })
       )
      .Columns(columns =>
      {
          columns.Bound(o => o.ID)
                    .HeaderTemplate(@<text>
                      <input type="checkbox" title="check all records" id="checkAllRecords" onclick = "checkAssemblyRows()"/> </text>)
                    .ClientTemplate("<input type='checkbox' title='check record'  name='checkedRecords' onclick= 'checkRecords(this)' value='#=ID#' />")
                    .Sortable(false)
                    .Width("2%");
            columns.Bound(o => o.No).Width("15%");
            columns.Bound(o => o.ShortDesc).Width("15%");
            
            columns.Command(commands =>
            {
               // commands.Edit();
                    
                 
                //commands.Destroy(); // The "destroy" command removes data items
                
            }).Title("Commands").Width(200);
      })
      .Events(e => e.Edit("AssemblyListGrid_OnEdit_Kendo")
              
              )
        .Filterable()
        .Sortable()
        .Pageable(p => p.Refresh(true))
        .Scrollable()
        .ColumnMenu(col => col.Sortable(false))
        .Groupable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Editable(edit => edit.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).DisplayDeleteConfirmation(false))   
      
      
      )

I have attached the error screen shot and the screen shot I took while I do the inspect element in chrome. It looks like it is working partly and the modal edit window fails to display.
Works perfectly in firefox and IE.
 This project has both the telerik and kendo controls.
Thanks

The above code will not append the window to the my-form element. This can be fixed in the source by setting a default value for the appendTo option of the window, or in the user's own code using the below line (be sure to set this before binding your model):
This was tested in v2013.3.1119

how do i listen to a  selected date when pre-selected

Hi everyone.  I just started using the Kendo UI, and so far it's awesome.

I was previously using highcharts, but kendo is great, because it's a combo of highcharts and jquery UI. So I only need to load one set of scripts! 

Anyway, I'm having some issues with formatting my charts. 

I'm trying to create a small thumbnail chart for several instances on one page. The chart is supposed to track progress as a percent over a period of a quarter. 

You can view what I've got so far here: 
http://jmillspaysbills.com/clients/radolo/rockhabits/daily-huddle.html

Obviously right now each chart is loading the same data. 

So, I'm having some problems with styling this chart. I have the category axis set up to have 65 points, wich would be the average business days in a quarter (it doesn't need to be exact). And I have the value axis as the points that will be recorded daily as a percentage. This works fine. 

First thing I can't get right is trying to skip the major grid lines by 10. Currently it has all 65 lines, but as you can see that looks terrible. 
Second, I have this huge padding on the top, left and bottom that I can't seem to get rid of. 

Here is my code: 


Regarding the Major Grid lines, I've tried majorunit: 10 with no luck. Any ideas what I'm doing wrong?

As for the padding issue, I've tried adding margin of 0 to the plotarea, but that didn't seem to do anything. 

Thanks in advance for any help you can give. I certainly appreciate it.

Please take a look at the below jsbin example

http://jsbin.com/oGaZukih/1/edit?html,css,js,output

You can see that I have told the menu to open below the menu bar (data-direction="bottom") but because the resulting menu item will be taller than the remaining height of the page it opens above the menu instead.

Is there a way to force the menu to open below the menu bar and force the page to show a scroll bar. We're trying to use the menu like the kendo tabstrip but use the popover / absolute position of the menu.

Neil

Hello. I would like to implement a stacked bar chart inside a PhoneGap app. I want to keep the app as small as possible, therefore I only want to import what is absolutely necessary only for the stacked bar chart. Your example for the stacked bar chart suggests that I link and load the following css and js files:

 <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>

But, when I download the library, I see some files that look like they may contain only the requirements for the chart instead of the whole dataviz library. For example, I see a javascript file called kendo.dataviz.chart.min. Is it possible to only import what is necessary for the chart so that I can keep my app size down?

Thank you!