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)
)

Hi,

I've used the ASP.NET AJAX components for many years and am just starting to look at the UI for ASP.NET Core equivalents.

We have a large dataset (potentially hundreds of thousands of records) of historical data that we want to show in a paginated grid.The data retrieval is optimised for performance so we can retrieve any given page of data quickly, and aren't transferring large of amounts of data around unnecessarily.

In the ASP.NET AJAX grid we'd set the VirtualItemCount property which enabled the grid to initialise the pager correctly and show the total number of items and pages, and then respond to requests to retrieve the appropriate page of data in the NeedDataSource() event as the user navigated through the pages.

I can't see anything that would provide equivalent behaviour in the UI for ASP.NET Core grid though?

Thanks in advance,

Gary

Hi,

We have a grid where we set some datasource model defaultvalues. These then apply to hiddenfor fields on a popup editor template.

This works up to version 2018.3.1017 but does not work in 2019.2.619 and earlier.

Is there a different approach we can take which will work? Or is it a bug?

Grid

    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_AuthMembership"))

Grid DataSource

.DataSource(dataSource => dataSource
                        ...
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                            model.Field(p => p.cUsername).DefaultValue(ViewBag.Email);
                            model.Field(p => p.Id).Editable(false);
                        })

Editor Template contains

@Html.HiddenFor(model => model.cUsername)  ... but it is always null now with 2019.2.619.

Passing values around in ViewBag shows each page knows about value and it worked in 2018.3.1017.

We want to upgrade for newer controls - what can we do please?

Thanks,

Daniel.

     I am reviewing the .net core package for web app development and I am interested in the PDF viewer. I create PDF documents programmatically (C# / iText on the server) and was wondering if I could use a MemoryStream as a datasource for the PDF viewer without having to write the document to file first. Rendering from RAM would be much the preferred option.

Kind regards,

Paul S