Hello,

I am wondering if there is any way to customize the DateRangePicker to allow for it to have the two calendar months stacked vertically when it is opened. I am looking to use the range picker in a sidebar on my page and it would fit much better vertically than the default horizontal. 

Thank you

Can someone advice how do I include anti forgery token and parent ID in the hierarchical grid?

    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<TransactionRevenue>()
        .Name("Grid_#=ITransactionId#")
        .Columns(columns =>
        {
            columns.Bound(o => o.InvoiceToName).Title("Receive From").Width(450);
            columns.Bound(o => o.Amount).Format("{0:c}").Width(200);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
        .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { TID = "#=ITransactionId#" }))  //****Need to include token here
        )
        .Sortable()
        .ToClientTemplate()
        )
    </script>

somehow my scheduler controller has a bad appearance  (see picture)

Do i need to apply a theme or css class ?

this is my cshtml code:

        @(Html.Kendo().Scheduler<SkyApp.Models.CosmosDB.ScheduleViewModel>()

            .Name("scheduler")
            .StartTime(new DateTime(2019, 1, 1, 6, 00, 00))
            .Height(600)
            .Width(800)
            
            .Views(views =>
           {
           views.MonthView(w => w.Selected(true));
           views.DayView();
           views.WeekView();
           views.WorkWeekView();
           })
           .Timezone("Etc/UTC")
           .DataSource(d => d
                .Events(e => e.Error("onError"))
                .Model(m =>
                {
                   m.Id(f => f.EventId);
                   m.RecurrenceId(f => f.RecurrenceId);
                })
                .Read(read => read.Action("Schedules_Read", "Crud"))
                .Create(create => create.Action("Schedules_Create", "Crud"))
                .Update(update => update.Action("Schedules_Update", "Crud"))
                .Destroy(destroy => destroy.Action("Schedules_Destroy", "Crud"))
           )


        )

hello,

I have 3    @(Html.Kendo().DropDownList()  

is there a telerik control i can use to arrange them  side by side?

Attached picture shows current placement, this is my cshtml 
    <div class="demo-section" style="width: 250px;">
 
                    <h4>Status</h4>
                    @(Html.Kendo().DropDownList()   etc etc

thanks,Peter

I would like the user to be able to add options, however I intend to handle adding the new items when the form is posted rather than dynamically.

Ideally I'd like to continue using the tag helper if possible for simplicity, and be able to hit enter to add the entry if it doesn't appear in the filtered list.

Is there any existing solution to this?

So I've been working with ASP.NET Core for the last few weeks now, and I've started running into multiple roadblocks with my project. I've been told that every single problem I've been running into could be solved if I started programming things server-side rather than client-side, which is the approach I've been taking thus far, as it's what I'm most familiar with. I believe some background is necessary as to what I've spent my last few weeks working on:

Basically, I've been building a Report Generator that has a user navigating through six grids built into the tabs of a Kendo TabStrip, where selections made in Grid 1 filter the options available for selection in Grid 2, etc. all the way down to the last grid. The data bound to the grids all comes from an SQL database. The extent of my server-side code has all been using the widgets that Kendo provides (TabStrip and Grid), and the controller that sends the data to the view. I haven't been utilizing model binding because I don't understand how to use it in my context, but I am semi-aware of what it is. 

As I stated, my application handles practically everything client-side, from filtering the grids based on selection, a search bar, client templates, progression logic for the TabStrip (as selections must be made for the next tab to be enabled), grabbing all the data that the user selects at the end, etc. Some of the difficulties I've been having that I've been told would be easy if I were doing things server-side are with displaying all the collected data on a confirmation screen, and nested filtering of a grid. I don't exactly understand how performing these operations server-side would make my life any easier, and I'm wondering if anyone here is able to explain to me these concepts.

For some background, I am a junior-level developer who has only recently started doing web development.

I'm interested in the asp .net core controls.

I particularly like the grid and scheduler controls and the demos are great.

In the grid demos, they seem to be focused on calling server side methods for CRUD. Are there demos where the controls update client side json?  For example, having a page that calls a web api to get a list of customers, shows them in a grid under which is a separate save button, where the customers are not saved until the save button is pressed.

I have a Kendo Grid on a Razor page and I am trying to understand the syntax for the bindings. Specifically,  t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post)); It seems the parameters are .Action(Folder,Page,Method) which is unusual for me. I was expecting .Action(action,controller). Any explanation on this would be greatly appreciated. Basically I am trying to call methods from the cshtml.cs page instead of going to a controller class.

Thanks

The folder structure is

Pages

--Customer 

------Index.cshtml

Index.cshtml

@page
@model RazorPageGridTest.Pages.Customer.IndexModel
@{
    ViewData["Title"] = "Index";
}

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

@using Kendo.Mvc.UI

<h2>Index</h2>

<div id="grid">

</div>

@(Html.Kendo().Grid<RazorPageGridTest.Customer>().Name("grid")
    .AutoBind(false)
    .Columns(x=> {
        x.Bound("address");
        x.Bound("name");
        x.Command(c => c.Edit());
    })
    .DataSource(d=> d.Custom()
        .Transport(t=> {
            t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post));
            t.Update(r => r.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post));

        })
        .Schema(s=> s.Model(m=> m.Id(i=>i.CustomerId)))
        .PageSize(10)
    )
    .Pageable()
    )

<script>
    $(function() {
        var grid = $("#grid").data("kendoGrid");

        grid.dataSource.transport.options.read.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.transport.options.update.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.read();
    });
</script>

Index.cshtml.cs

using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

namespace RazorPageGridTest.Pages.Customer
{
    public class IndexModel : PageModel
    {
        public List<RazorPageGridTest.Customer> Data { get; set; }

        public void OnGet()
        {
       
        }

        

        public JsonResult OnPostReadRecords()
        {
            List<RazorPageGridTest.Customer> data = new List<RazorPageGridTest.Customer>();

            for (int i = 1; i <= 100; i++)
            {
                data.Add(new RazorPageGridTest.Customer()
                {
                    CustomerId = i,
                    Name = "Name2 "+ i.ToString(),
                    Address = "Address2 " + i.ToString()                    
                });
            }

            return new JsonResult(data);
        }

        public JsonResult OnPostUpdateRecord([DataSourceRequest] DataSourceRequest request, RazorPageGridTest.Customer customer)
        {
            System.Diagnostics.Debug.WriteLine("Updating");

            return new JsonResult(customer);
        }
        
    }
}

I have a tabbed page with grids in each of the tabs, using view components for the content of each tab.  Now I'm re-factoring to use Kendo grids. I can clearly see the grid when I inspect the page, but the grid is not rendering.

I've tried all sorts of combinations of "Deferred" with no success.
I've tried including / not including the _Layout page in the Index page that renders the component...
TIA

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - InvoiceReconciliation</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <link href="~/font-awesome/css/fontawesome.css" rel="stylesheet" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        <link href="~/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
    </environment>
</head>
<body>
    @RenderSection("Scripts", required: false)
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Invoice Reconciliation</a>
            </div>
            @*<div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a asp-area="" asp-controller="Home" asp-action="Index">Landed Files</a></li>
                    </ul>
                </div>*@
        </div>
    </nav>

    <partial name="_CookieConsentPartial" />

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2019 - Invoices</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
        <script src="https://kit.fontawesome.com/44816a424f.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
        <script src="https://kit.fontawesome.com/44816a424f.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

</body>
</html>

[ViewComponent] Default.cshtml:

@model IEnumerable<MemberInvoiceRecord>
@using Kendo.Mvc.UI;

@{
    ViewData["Title"] = "MatchedMemberRecordsView";
}

<p>
    <a asp-action="Create">Create New</a>
</p>

@(Html.Kendo().Grid(Model)
    .Name("MemberGrid")
    .Columns(columns =>
    {
        columns.Bound(model => model.EUID);
        columns.Bound(model => model.SSN).Width(130);
        columns.Bound(model => model.Product).Width(130);
        columns.Bound(model => model.FirstName).Width(130);
        columns.Bound(model => model.LastName).Width(130);
    })
    .NoRecords(e => e.Template("No Matched Members."))
    .Pageable()
    .Sortable()
    .Scrollable(scr => scr.Height(430))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
     )
    .Deferred(true)
)