I am trying very hard to get styling to work for the DropDownList. I need to do some VERY specific styles that the Theme Builder does not let me edit.

I already did this fine with the "Menu" widget, but with the "DropDownList" widget, it just ignores styles unless I declare them to be page wide (I cannot put them underneath another tag)

For example, consider the following ...

The select list is nested under the div with a class "skinName", so in my CSS, I do the following...



This should style it fine, but Kendo forcefully creates the extra HTML for the widget outside of the bounds of the original DOM element that I intended for it to be in, so these styles never get applied. Is there any way to force kendo to adhere to the toplevel class I specify?

Hello, I would like to set other content to my splitter pane after i configured it by usig RAZOR syntax, The idea is that i have a treeview and onSelect event where I set the right pane content to a grid or calendar or some other stuff. How can I add thosse widgets to my right-pane using javascript? I can set the text of the field but i can't find a Content option. If you have other ideas how to implement this please feel free to suggest.

@Code
  Html.Kendo().Splitter() _
        .Name("Splitter") _
        .HtmlAttributes(New With {.id = "pekasz"}) _
        .Orientation(SplitterOrientation.Horizontal) _
        .Panes(Sub(panes)
        ...
                panes.Add().Scrollable(True) _
                                  .Collapsible(False) _
                                  .HtmlAttributes(New With {.id = "right-pane"}) _
                                  .Content("<div id = 'estifeny'>" & Html.Kendo().Calendar().Name("bar").HtmlAttributes(New With {.id = "kicsicsicsiman"}).ToHtmlString & "</div>")
END Code

<script>
    function onSelect(e) {
       $("#right-pane").text(this.text(e.node)) ;     
       $("#right-pane").Content???
        };
</script>

Hello,
in my new project I've defined an Area called Admin,I've added a View and started coping the code from another view it's on the main View folder.... I can' access to the Kendo namespace when doing @(Html.Kendo() ... if I copy the same view on the main View folder it's ok...any suggestion?
Thanks
Paolo

@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