Hi,

When I expand a combobox and scroll through the options, when I reach the end of the list (can't scroll further) and I continue scrolling anyway, it will close the combobox and scroll the entire page instead. This makes it very difficult to scroll through the combobox, as it regularly closes by accident. This happens when either scrolling up or down.

Weird thing is, The demos on http://demos.telerik.com/aspnet-mvc/combobox/index don't have this issue for me. Clearly something is different for me, but I tried replicating the exact same combobox as on the Demo, and this still happens. I hope someone recognizes this issue and/or can give me some insight as to why this happens.

Thanks!

Tim

Hi,

Q: Is server validation possible with WebAPI as DataSource and Kendo UI grid?

Situation: First, the model for the gid contains an attributed field "required". But the grid doesn't do any validation for this field. The Web API POST request is happening when this field still empty (even the validation warning isn't displaying (DisplayMessage)).

Then, inside the WebAPI request at the server-side, the returned object is 'HttpResponseMessage'. So how can i trigger the grid that the validation is false (ModeState.IsValid == false). 

 I known the exiting of a returned object DataSourceResult with second parameter 'ModelStateDictionary', but this expect the ModelStateDirectory of a MVC controller and not from an API Controller.

So the goal is, how can I do a validation on grid inline edition submit with Web API?

Hi,

I would like to implement the following behavior:

When I click to expand a tree node, I would like the expanding node to scroll to the top of the treeview.  I did this once a long time ago with an ASP.NET treeview control, but that was before the days of MVC, etc.

 Please see the two attached before and after views.  That should explain what I need to do.

Thanks in advance.

 Ken.

 .HtmlAttributes(new { style = "height:100%;border:1" }) but it is not working the way it supposed to work
only 
 .HtmlAttributes(new { style = "height:850px;border:1" }) is working not the %

Can you please help me find out a better way to automatically resize the splitter panels

Thanks
Shaik

Hi, I would like to have an AGENDA view but as all my events are always all day events so I don't need the time column. But I do have a field that stores a person's name that a particular event is assigned to. Can this be displayed. The display I want would look something like attached file

Hi,

I have a kendo tabstrip in which I want to know if its content is loaded or not in event Select. The tabstrip is defined as

        <% Html.Kendo().TabStrip()
            .Name("TabStrip")
            .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text(OTP.Ring.Models.ViewModel.EvaluationsLocalization.EvaluationForm_Tab_Overall)
                    .Content(() =>
                    {
                        %>
                            <div style="height: 400px"></div>
                        <%  
                    });
            })
            .Items(tabstrip =>
            {
                tabstrip.Add()
                    .Text(OTP.Ring.Models.ViewModel.EvaluationsLocalization.EvaluationForm_Tab_Coaching)
                    .Content(() =>
                    {
                    });
            })
 ...
            .Events(e => e.Select("onTabSelect")
                          .Activate("onTabLoad")
                          )
            .SelectedIndex(Model.SelectedTabIndex)
            .Render();            %>       

        function onTabSelect(e) {
            var content = $(e.contentElement);

            var index = $(e.item).index();            

...
        }

I tried $(e.contentElement).html(), but it is undefined. I am not sure how to get the content. The intent is that if the selected tab is already loaded before, then it won't be loaded again. Thanks.

Anyone know why my MobileModalView form appears for a split second on my page load? It's a stripped down version with no style, but it appears and then goes away. I modified the ModalMobileView demo to test the basics of the MobileModalView feature and included a form and some a few other small changes. Could the addition of a form cause this some how?

Here's my cshtml:

 @{

    Layout = "~/Views/Shared/_LayoutMobile.cshtml";

}


@model MyProjectWeb.Models.LoginModel




@(Html.Kendo().MobileView()
        .Name("modalview-camera")
        .Title("MyProject")
        .Content(
        @<text>

            <img src="@Url.Content("~/Content/photos/NewLogoTrimmed.JPG")" class="camera-image" style="width: 100%; height: 100%;" />
<br/>
<br />
<br />
<br />
<br />
<br />
            @(Html.Kendo().MobileButton()
                        .Text("Login")
                        .Name("modalview-open-button")
                        .Rel(MobileButtonRel.ModalView)
                        .Url("#modalview-login")
            )
        </text>)
)

@(Html.Kendo().MobileModalView()
       .Name("modalview-login")
       .HtmlAttributes(new { style = "width: 95%; height: 18em;" })
       .Header(obj =>
           Html.Kendo().MobileNavBar()
                .Content(navbar =>
                    @<text>
                        <span>Login</span>
                        @(Html.Kendo().MobileButton()
                            .Text("Cancel")
                            .Align(MobileButtonAlign.Right)
                            .Events(events => events.Click("closeModalViewLogin"))
                        )
                    </text>)
        )
        .Content(
        @<text>
            @ModalViewContentTemplate()
        </text>)
)

@helper ModalViewContentTemplate()
{
    using (Html.BeginForm("LogOn", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" })) {

        
        
    @(Html.Kendo().MobileListView().Style("inset")
                .Items(items =>
                {
                    items.Add().Content(
                        @<text>
                            @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
                            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
                        </text>);
                    items.Add().Content(
                        @<text>
                            @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                        </text>);
                    items.Add().Content(
                        @<text>
                            <input class="k-checkbox" data-val="true" data-val-required="The Remember Me field is required." id="IsPersistent" name="IsPersistent" type="checkbox" value="true">
                            <label class="k-checkbox-label" for="IsPersistent">Remember Me</label>
                            <input name="IsPersistent" type="hidden" value="false">
                        </text>);
                })
        )
    
        @(Html.Kendo().MobileButton()
                    .Text("Login")
                    .Name("modalview-login-button")
                    .Events(events => events.Click("closeModalViewLogin"))
        )
        @*@(Html.Kendo().MobileButton()
                    .Text("Register")
                    .Name("modalview-reg-button")
                    .Events(events => events.Click("closeModalViewLogin"))
        )*@
        
    }
}
<style>


    #modalview-login-button,
    #modalview-reg-button,
    #modalview-open-button {
        display: block;
        text-align: center;
        margin: .6em .8em 0;
        font-size: 1.2em;
    }

    #modalview-open-button {
        margin: 0 3em;
        padding: .5em;
    }

    .km-flat #modalview-open-button {
        color: #fff;
    }

    #modalview-camera {
        text-align: center;
    }

        #modalview-camera img {
            display: block;
            margin: 30px auto;
        }

        #modalview-camera .km-content,
        .km-ios #modalview-login .km-content {
            /*background: url(../../content/shared/images/patterns/pattern1.png) repeat 0 0;*/
        }

    .km-ios #modalview-camera .km-button,
    .km-ios #modalview-login .km-button,
    .km-ios #modalview-camera .km-navbar,
    .km-ios #modalview-login .km-header {
        background-color: #000;
    }

        .km-ios #modalview-camera .km-button:active,
        .km-ios #modalview-camera .km-state-active,
        .km-ios #modalview-login .km-button:active,
        .km-ios #modalview-login .km-state-active {
            background-color: #2e2e2e;
        }

    .km-ios #modalview-login #modalview-login-button,
    .km-flat #modalview-login #modalview-login-button {
        background-color: Green;
        color: #fff;
    }

    .km-tablet .km-ios #modalview-camera .km-view-title, .km-tablet .km-ios #modalview-login .km-view-title {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
</style>

<script>
    function closeModalViewLogin() {
        $("#modalview-login").kendoMobileModalView("close");
    }
</script>

The _LayoutMobile is here:

<!DOCTYPE html>

<html>
<head>


    <title>@ViewBag.Title</title>


    <link href="~/Content/kendo/2015.2.805/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.2.805/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2015.2.805/kendo.default.min.css" rel="stylesheet" />
    
    

    @*<link href="~/Content/kendo/2015.2.805/kendo.mobile.ios.min.css" rel="stylesheet" />*@

    @*<link href="~/Content/kendo/2015.2.805/kendo.mobile.android.light.min.css" rel="stylesheet" />*@
    @*<link href="~/Content/kendo/2015.2.805/kendo.mobile.flat.min.css" rel="stylesheet" />*@

    @*<link href="~/Content/kendo/2015.2.805/kendo.mobile.ios.min.css" rel="stylesheet" />*@

    <script src="~/Scripts/kendo/2015.2.805/jquery.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.aspnetmvc.min.js")"></script>

    <script type="text/javascript" src="@Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("http://ajax.aspnetcdn.com/ajax/mvc/5.1/jquery.validate.unobtrusive.min.js")"></script>


    @*<script src="~/Scripts/jquery.timeago.js" type="text/javascript"></script>*@
    <script src="~/Scripts/moment-with-locales.js" type="text/javascript"></script>
    @*<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2015.2.805/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/kendo/2015.2.805/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2015.2.805/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>*@
    @RenderSection("HeadContent", false)

    @*using the bundles instead*@
    @*@Styles.Render("~/Content/test.css")*@

    @*@Scripts.Render("~/bundles/bootstrap")
    @Styles.Render("~/Content/css")*@

    @(Html.Kendo().MobileApplication()
        //.PushState(true)
        .ServerNavigation(true)
        //.Root("/mobile/")
        //.StatusBarStyle("black")
    )
</head>
<body>
  

    
    @RenderBody()

</body>
</html>

I have implemented a hierarchy grid, and I would like to implement an event to launch a kendowindow on doubleclick of the subgrid.

Since the grid is named dynamically "grid_[ID OF ITEM]" I am not sure how to grab the row in script like I would if I knew the grid name.

$('#grid_#=CustomerCode# table tr').live('dblclick', function () {
           // code
  }); 

does not work,and I assume because I cant shove that type of name into JS as it is an asp element. How would I write that query correctly?

Hello,

I need to set stroke color of individual connections between shapes depending on Model data from Controller.

 Is that possible with Html.Kendo() helper?

.DataSource(d => d
        .Read(read => read.Action("_SomeDiagram", "Diagram"))
        .Model(m => {
            m.Children("Entities");
            m.Id("Name"); }))  
.ConnectionDefaults(c => c.Stroke(s => s.Color("#979797").Width(2)))

ViewModel structure is simple with one root entity and three children.