My grid shows as empty with the following code.

<!-- jQuery JavaScript -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<h2>Country Grid</h2>
@(Html.Kendo().Grid<MACore.Models.Configuration.Geographic.Location.Country>()
    .Name("gridname")
    .Columns(columns => {
        columns.Bound(p => p.CountryID);
        columns.Bound(p => p.Description);
        columns.Bound(p => p.LongDescription);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Countries_Read", "Country"))
            .PageSize(20)
     )
)

The "Countries_Read" does supply a list of Countries when used with other code....any suggestions? 

I'm generating a grid using ToDataSourceResult(), and I pass an IQueryable to that. LINQ to Entities doesn't support anything like ToLocalTime(), so how can I perform that conversion?

The property is a DateTime type in MVC, and it displays in the grid accordingly. If I specify to use a time in addition to the date, it uses the raw UTC value pulled from the DB (as expected). How can I convert it to local time, either server-side with the DataSourceResult or client-side with the grid itself or manipulating it using jQuery?

Approved is a DateTime in my model. approvedDate is a Datetime variable in my Razor view.

I want to test Approved to see if it is before approvedDate and replace it with a empty string "" if it is inside the x-kendo-template detail-template.

 @{ var approvedDate = DateTime.Parse("01-01-2016"); }

 <script id="detail-template" type="text/x-kendo-template">

    <ul>

        < li>#if (# #= Approved # # < @approvedDate) {# ""#}else{# #= kendo.toString(Approved, "MM-dd-yyyy") # #}#</li>

     </ul>

</script>

 The above syntax causes the detail-template script to fail.

What is the syntax to make this if statement work?

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>