@using Kendo.Mvc.UI;
@{
    ViewBag.Title = "MyAccount";
}
<div class="top_link_bar1">   
    @using (Html.BeginForm("LogOff", "MyAccount", FormMethod.Post, new { id = "logoutForm" }))
    {
       
           <a>Welcome @HttpContext.Current.Session["UserName"]</a>
        
            <a href="javascript:document.getElementById('logoutForm').submit()">Sign Out</a>
        }         
                    
        </div>
<div id="forecast">
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Schedular")
                  .Selected(true)
                  .Content(@<text>
    <div class="weather1">

        <div id="people">
            <input checked type="checkbox" id="alex" value="1">
            <input checked type="checkbox" id="bob" value="2">
            <input type="checkbox" id="charlie" value="3">
        </div>
        @(Html.Kendo().Scheduler<Joydip.Models.MyAccountModel>()
            .Name("scheduler")
            .Date(new DateTime(2013, 6, 13))
            .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
            .Height(500)
            .Views(views =>
            {
                views.DayView();
                views.WeekView(weekView => weekView.Selected(true));
                views.MonthView();
                views.AgendaView();
            })
            .Timezone("Etc/UTC")
            .Resources(resource =>
            {
                resource.Add(m => m.OwnerID)
                    .Title("Owner")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataColorField("Color")
                    .BindTo(new[] { 
                        new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                        new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                        new { Text = "Charlie", Value = 3, Color = "#56ca85" } 
                    });
            })
            .DataSource(d => d
                .Model(m =>
                {
                    m.Id(f => f.TaskID);
                    m.Field(f => f.OwnerID).DefaultValue(1);
                })
                .Read("Read", "Scheduler")
                .Create("Create", "Scheduler")
                .Destroy("Destroy", "Scheduler")
                .Update("Update", "Scheduler")
                .Filter(filters =>
                {
                    filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
                })
            )
        )

    </div>
   
    </text>);
        tabstrip.Add().Text("TaskManagement")
                  
                  .Content(@<text>
            <div class="weather1">        
        
            </div>
  
    </text>);
          })
)
</div>

<script type="text/javascript">
    $(function () {
        $("#people :checkbox").change(function (e) {
            var checked = $.map($("#people :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });

            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq",
                        field: "OwnerID",
                        value: value
                    };
                })
            };

            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.dataSource.filter(filter);
        });
    })
</script>
<style scoped>
    #forecast {
        width: 770px;
        height: 750px;
        margin: 30px auto;
        //padding: 80px 15px 0 15px;        
    }

    .sunny, .cloudy, .rainy {
        display: inline-block;
        margin: 20px 0 20px 10px;
        width: 128px;
        height: 128px;
        background: url('@Url.Content("~/Content/web/tabstrip/weather.png")') transparent no-repeat 0 0;
    }

    .cloudy{
        background-position: -128px 0;
    }

    .rainy{
        background-position: -256px 0;
    }

    .weather {
        width: 160px;
        padding: 40px 0 0 0;
        float: right;
    }
    .weather1 {  
        width:auto;
        height:auto;      
        padding: 40px 0 0 0; 
        overflow:scroll !important;
    }
    #forecast h2 {
        font-weight: lighter;
        font-size: 5em;
        padding: 0;
        margin: 0;
    }

    #forecast h2 span {
        background: none;
        padding-left: 5px;
        font-size: .5em;
        vertical-align: top;
    }

    #forecast p {
        margin: 0;
        padding: 0;
    }
     #people 
    {
        background: url('@Url.Content("~/Content/web/scheduler/")team-schedule.png') transparent no-repeat;
        height: 115px;
        position: relative;
    }
    #alex {
        position: absolute;
        left: 404px;
        top: 81px;
    }
    #bob {
        position: absolute;
        left: 519px;
        top: 81px;
    }
    #charlie {
        position: absolute;
        left: 634px;
        top: 81px;
    }
</style>


i'm doing this in vs2012 mvc4
what should be the problem....??
show the output in attached file
one is output from my code another is website Output...

Is RTL supported for complex languages such as Arabic and Hebrew?

Hello,

I'm using KENDO UI Web controls in HTML5/MVVM framework. And i'm using Hierarchy grid with with multiple tabs in the detail section. I have used 'detailsTemplate' to show Texbox and button in one of the tabs in the detail section of the hierarchy grid.
<script type="text/x-kendo-template" id="template">
            <div class="tabstrip" style="height:100%">
                 <ul>
                    <li class="k-state-active">Tab1</li>
                    <li>Tab2</li>
                    <li>Tab3</li>
                </ul>
                <div class="tab1">                </div>
                <div>
                    <div class="tab2" style="height:130%;overflow:auto" ></div>
                </div>
                <div class="tab3">
                <table>
                <tr>
                <td>
                <textarea id="txtUserText" rows="5" cols="20" style="width:99%" tabindex="3" data-bind="value:userTxt"></textarea>    
                </td>
                </tr>
                 <tr>
                 <td>
                 <button class="k-button" id="btnAddText" data-bind="click: addText_click"  style="float:right"> <span class="k-icon k-i-save"></span><span>Add Note</span> </button>
                 </td>
                </tr>
                </table>
                </div>
            </div>   
           </script>
The issue i'm facing is that click event on the button is not firing?

Could you please let me know what i'm missing?

Thanks

Hello,

When you hover above the "View HTML" button, the background color changes as for the other buttons but the icon symbol doesn't become white. It remains gray. Is that intended because for all other buttons the icon becomes white in hover case - at least for the default and metro theme?

Philip

I know that something similar was posted and that this may not be supported currently but just want to make sure I've exhausted all options within the Grid API.

I've persisted a scheduled DateTime in UTC. Due to issues with clients in various time zones I'm doing the conversion from UTC on the server (ASP.NET MVC) and casting this value to a string. I would like to re-cast this back to a DateTime instance so that I can make use of the Date filter operators in the appropriate column.
Even if I use Template() the bound property was originally a string and the filter exposes string comparison operators, which I can understand. If I try setting this using Model.Field() the result is the same. Is there a way to override this before the filter renders? Do I need to attach to a DataSource event?

My code:
(Model.ScheduledDelivery is the field in question. We want to allow the user to set a date range for filtering)
    @(Html.Kendo().Grid<ScheduledEmailSender.Web.Models.ViewModels.SubmissionViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(x => x.SubmissionId).Hidden();
            columns.Command(command => command.Edit().Text("Edit"));
            columns.Command(command => command.Destroy().Text("Delete")).Width(100);
            columns.Template(@<text>@GetSummary(item)</text>).ClientTemplate("<div class='email-summary'>#= EmailSubject #</div>").Title("Message Info");
            columns.Bound(x => x.ScheduledDelivery).Template(a => a.ScheduledDelivery.AsDateTime())
                .Filterable(f => f.Operators(o => o.ForDate(d => d.IsGreaterThanOrEqualTo("Is After").IsEqualTo("Equal To")
                    .IsLessThanOrEqualTo("Is Before"))));
            columns.Bound(x => x.EmailTo).Width(100).Filterable(f => f.Operators(o => o.ForString(s => s.Clear().Contains("Contains"))));

        })
        .DataSource(dataSource => dataSource
            .Ajax()
                            .Model(model => { 
                                model.Id(p => p.SubmissionId);
                            })
            .Read(read => read.Action("Submissions_AjaxRead", "Home"))
            .Destroy(update => update.Action("Submissions_AjaxDelete", "Home"))
            .Update(update => update.Action("Submissions_AjaxUpdate", "Home"))
            .PageSize(10)
            .Events(e => {
                e.Sync("refreshGrid");
            })

        )
        .Events(e =>
            {
                
                e.DataBound("Grid_dataBound").Remove("Grid_itemRemoved");

            })
        .Pageable()
        .Filterable()
        .Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("MailEditor"))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Sortable()

    ) 

on click of button to Clone the row and add the unique id to it.



as of now its not working correctly. whenever i click on the cloned combo box it will open the orginal combo - box. can you give me a sample to do clone with jquery with unique id. and getting value from it.

Hi all

I have just installed the latest versions of the kendo scripts and run into something strange.

I have created a grid of five columns which I fill dynamically.
Four of the five columns are filled with text.
All of these four colums have a header.
The fifth column contains an icon with a hyperlink.
This column does not need a header text.

In the previous version of Kendo this worked fine: the fifth column was nicely filled with the icon.
However in the newest version the empty columnheader disables the icons on the screen.
They are visible in "View Source" but not on the screen.

If I fill the header with a text (containing digits or alphabetical characters) the icons show up.
If I fill the header with a few dots, or with a colon, they disappear again.

Did anyone had the same experience, and how can i solve this?
I do not want any text in the header.

KR

Henk Jelt

What is the deal with this error message when I try to use the "attr" binding in an MVVM situation on a KendoDropDownList?

Uncaught Error: The attr binding is not supported by the DropDownList widget

is this serious? What is the point of even having these bindings, I have found that almost nothing in the entire suite supports most of them, and there isn't even a "css" binding? 

The "style" binding also seems unsupported - in fact, none of the widgets support any of the bindings. What is the issue here?

 just need a little help here about displaying KendoUI window. My situation is I have a button that will call the window. At first click of button, the window dialog will appear but after closing the window by clicking the 'x' button I can't make it appear again by pressing the same button. I don't know where's my error.Here's my code:

<script type="text/javascript">

$(document).ready(function() {
$(".test").click(function (){
$("#window").kendoWindow({
actions: ["Refresh","Maximize","Minimize","Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px"
});
});
});
</script>

<div id="window" style="visibility: hidden;"></div>
<input type="button" class="test" value="test" />

We have a DropDownList that pulls in options via Ajax. We have this working great in our Web project, but when we copied it over to use in a Mobile project, we found that when tapping on the DropDownList, it would take a good 2 seconds or so to actually open the list. Granted, the list has about 150 options in it, but this 2 second pause would be confusing to users, since they wouldn't know if the pause was because their tap didn't register or what.

Have you all run into this, where a DropDownList on Mobile with lots of options took 2+ seconds to appear once tapped? Is there a way to make it faster, or are we going to have to use a simple select menu instead?

(don't know if this is relevant information, but the DropDownList is in a form in a ModalView that appears over a View)