Telerik Forums
UI for ASP.NET Core Forum
7 answers
1.4K+ views
Are there any plans to create a kanban component?
Jonh
Top achievements
Rank 1
 answered on 23 Sep 2019
1 answer
60 views

Hello,

How to select an item by Id or datasorce value?

 

robert

Preslav
Telerik team
 answered on 23 Sep 2019
1 answer
154 views

Hello,

Is it possible to have scrolling in the Vertical Timeline?

(I have fix heigh of my views)

robert

Preslav
Telerik team
 answered on 23 Sep 2019
1 answer
359 views

Hello,

is there a way to overwrite the browsers (chrome and firefox) default behavior for middle or right click on custom buttons in a grid?

We are trying to get the middle mouse click on a custom command button in a grid.

With this line we only get the left mouse click, the middle and right are ignored/use the default browser commands 

command.Custom("Details").Text(" ").Click("showDetails").IconClass("fas fa-eye");

Middle - new tab

Right - context menu

We tryed using JS on the mousedown event but it didn't work and in the "showDetails" method we only get the left mouse button

$('.k-grid-Details').on('mousedown', function (e) {
    debugger
     if (e.which == 1) {
       e.preventDefault();
       alert("middle button");
});

 

 

Eyup
Telerik team
 answered on 20 Sep 2019
1 answer
1.4K+ views
How do I call my MVC Core Controller Actions for Create, Update, and Delete from the Grid and Grid Rows.  My previous version used the following code, but the new Core version does not work:

c.Bound(m => m.DeliveryDocumentNumber).ClientTemplate(Html.ActionLink("Edit", "Edit", "Orders", new { id = "#=Id#" },     null).ToString()).Title("").Filterable(false).IncludeInMenu(false);
c.Bound(m => m.DeliveryDocumentNumber).ClientTemplate(Html.ActionLink("Details", "Details", "Orders", new { id = "#=Id#" }, null).ToString()).Title("").Filterable(false).IncludeInMenu(false);

c.Bound(m => m.DeliveryDocumentNumber).ClientTemplate(Html.ActionLink("Delete", "Delete", "Orders", new { id = "#=Id#" }, null).ToString()).Title("").Filterable(false).IncludeInMenu(false);

I want to use the Controller Views for CRUD operations and not the Grid since the Grid only shows a subset of the data.

Thanks.
Eyup
Telerik team
 answered on 20 Sep 2019
2 answers
124 views

I am getting complains from our customers that they cannot right click and paste into the Editor tool. I tested this in IE11, Chrome, and Firefox. The only one that could do a right-click and paste was Chrome. The other browsers, you have to Ctrl+V.

 

Is there a fix for this?

 

Here is my code for the editor:

@(Html.Kendo().EditorFor(o => o.Content)
.Encoded(false)
.Resizable(true)
.Tools(tools => tools
.Clear()
.Bold()
.Italic()
.Underline()
.Strikethrough()
.JustifyCenter()
.JustifyFull()
.JustifyLeft()
.JustifyRight()
.InsertUnorderedList()
.InsertOrderedList()
.Indent()
.Outdent()
.CreateLink()
.Unlink()
.TableEditing()
.Formatting()
.CleanFormatting()
.FontName()
.FontSize()
.ForeColor()
.BackColor()))
Joshua
Top achievements
Rank 2
 answered on 19 Sep 2019
3 answers
305 views

My kingdom for a good sample.

I am trying to use a custom popup template with a couple of dropdownlists and have them cascade. This is in asp.net core (NOT MVC).

My big questions are how to do the cascade and pass forgeryToken with it and how to receive the cascade call (i.e. the function signature). Below is what I have now and it doesn't work.

Another question I have is, what should the signature of the c# function be for the second (traits) dropdown be on the server.

Currently, I have:

public ActionResult OnPostCropsReadAsync([DataSourceRequest] DataSourceRequest request)

How do I get the id of the first dropdownlist to know how to filter?

THanks … Ed

Here's the popup template and below that is the calling grid.

01.@model TCWP.Pages.IndexModel.CertificateModel
02.@{
03.    ViewData["Title"] = "Certificate";
04.}
05.<container>
06.    <div class="row">
07.        <div class="col-md-6">
08.            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
09.            <div class="form-group">
10.                <label>Crop</label>
11.                @(Html.Kendo().DropDownListFor(m => m.CropId)
12.                                                        .DataValueField("CropId")
13.                                                        .DataTextField("CommonName")
14.                                                        .AutoBind(true)
15.                                                        .HtmlAttributes(new { style = "width:100%" })
16.                                                         .AutoWidth(true)
17.                                                         .Filter(FilterType.Contains)
18.                                                         .DataSource(source =>
19.                                                         {
20.                                                                source
21.                                                                .Ajax()
22.                                                                .PageSize(40)
23.                                                                .Read(r => r.Url("?handler=CropsRead")
24.                                                                .Type(HttpVerbs.Post).Data("forgeryToken")
25.                                                                );
26.                                                         }).SelectedIndex(0)
27.                )
28. 
29.            </div>
30.            <div class="form-group">
31.                <label>Trait</label>
32.                @(Html.Kendo().DropDownListFor(m => m.TraitId)
33.                                                        .DataValueField("TraitId")
34.                                                        .DataTextField("TraitDesc")
35.                                                        .AutoBind(true)
36.                                                        .HtmlAttributes(new { style = "width:100%" })
37.                                                         .AutoWidth(true)
38.                                                         .Filter(FilterType.Contains)
39.                                                         .DataSource(source =>
40.                                                         {
41.                                                                source
42.                                                                .Ajax()
43.                                                                .PageSize(40)
44.                                                                .Read(r => r.Url("?handler=TraitsRead")
45.                                                                .Type(HttpVerbs.Post).Data("GetCascadeData")
46.                                                                );
47.                                                         }).SelectedIndex(0)
48.                )
49. 
50.            </div>
51.        </div>
52.    </div>
53.</container>
54. 
55.<script type="text/javascript" >
56.  function GetCascadeData()
57.    {
58.        debugger;
59.        var tmp =  $.extend(true, {}, forgeryToken(),
60.            {
61.                CropId = $("#Input_CropId").Input.val();
62.            });
63.        return tmp;
64. 
65.    }
66.</script>

 

 

 

01.    @(Html.Kendo().Grid<IndexModel.CertificateModel>()
02..Name("grid")
03..ToolBar(t =>
04.{
05.    t.Create().Text("Add New");
06.})
07..HtmlAttributes(new { style = "height: 850px;" })
08..Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CertificateEditTemplate")
09.    .Window(w => w.Title("Certificate").Width(650)))
10..Events(evt => { evt.Edit("OnEdit"); })
11.            .Columns(columns =>
12.            {
13.                columns.Bound(c => c.CertId).Width(100).Visible(false);
14.                columns.Bound(c => c.CropName).Width(150);
15.                columns.Bound(c => c.TraitName).Width(150);
16.                columns.Bound(c => c.UserFullName).ClientTemplate("#=UserFullName#").Width(150).Visible(false);
17.                columns.Bound(c => c.OriginCountryName).Width(150);
18.                columns.Bound(c => c.IssuingCountryName).Width(150);
19.                columns.Bound(c => c.YearIssued).Width(110)
20.                    .HtmlAttributes(new { style = "text-align:right; " });
21.                //   .HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
22.                columns.Bound(c => c.ExpirationDate).Width(150).Format("{0:d}").HtmlAttributes(new { style = "text-align:right; " });
23.                //.HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }); ;
24.                columns.Command(c =>
25.                {
26.                    //    c.Destroy().Text("Delete");
27.                    c.Edit();
28.                }).Visible(User.IsInRole("Admin")).Width(85);
29.                                    columns.Command(c => c.Custom("Print").Click("OnRunReport").HtmlAttributes(new { style = "height:25px" })).Width(70);
30.                                })
31.            .Resizable(resize => resize.Columns(true))
32.            .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
33.            .Scrollable()
34.            .Groupable()
35.            .Filterable()
36.            .Sortable()
37.            .Pageable() //p => { p.PageSizes(true); })
38.            .DataSource(ds =>
39.                                ds.Ajax()
40.                         .Batch(true)
41.                                .Events(ev => ev.Error("errorHandler"))
42.                                .ServerOperation(false)
43.                                .Read(r => r.Url("?handler=CertsRead").Data("forgeryToken"))
44.                                .Update(u => u.Url("?handler=CertsUpdate").Data("forgeryToken"))
45.                                .Create(c => c.Url("?handler=CertsCreate").Data("forgeryToken"))
46.                                .Model(m =>
47.                                {
48.                                    m.Id(c => c.CertId);
49. 
50.                                })
51.                .PageSize(20)
52. 
53.                )
Tsvetomir
Telerik team
 answered on 19 Sep 2019
1 answer
472 views
If you look at the demo https://demos.telerik.com/aspnet-core/drawer/tag-helper, you can expand the drawer but as soon as you click one of the drawer items it auto-collapses. How can we avoid this behavior and keep the drawer expanded?
Tsvetomir
Telerik team
 answered on 18 Sep 2019
4 answers
258 views

MVC Telerik 2019.2.619;  Windows 10; Visual Studio 2017

I have a grid on a view and as long as I don't scroll horizontally I can resize the columns.  Once I move the horizontal scrollbar just a little the resize handle moves also.  Instead of finding it on the line between the columns it is found over in the column header area.  Any idea what I am missing here?

Rich

 

My controller code for the read:

[HttpPost]
        public IActionResult IssuesGrid_Read([DataSourceRequest]DataSourceRequest request)
        {
            List<IssuesForGrid> myData = new List<IssuesForGrid>();
            myData.Add( new IssuesForGrid
            {
                IssueNumber = 1,
                NonIngallsIssueNumber = "ABC-1",
                Project = "PROJ1",
                ShortDescription = "This is a test",
                DetectionDate = DateTime.Now,
                DetectedBy = "George",
                Severity = "Low",
                Status = "Open",
                AssignedTo = "Mike",
                ActionNeeded = true,
                ActionNeededText = "Fix it",
                Ecd = DateTime.Now,
                DecisionNeeded = true,
                DecisionDetails = "What is wrong",
                Comments = "Not again lol"
            });
            IQueryable<IssuesForGrid> myIssues = myData.AsQueryable();
            DataSourceResult result = myData.ToDataSourceResult(request);
            return Json(result);
        }

 

My View:

@{
    ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
    @Html.AntiForgeryToken()
    <div class="BordSolThinBlk MT50">
        @(Html.Kendo().Grid<IssuesForGrid>()
                            .Name(componentName: "IssuesGrid")
                            .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model => model.Id(p => p.IssueNumber))
                            .Read(read => read.Action(actionName: "IssuesGrid_Read", controllerName: "Home"))
                            .PageSize(pageSize: 100)
                            )
                            .Columns(columns =>
                            {
                                columns.Group(g0 => g0.Title("Issue General Information").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
                      .Columns(si =>
                      {
                                      si.Bound(p => p.IssueNumber).Title(text: "Issue #").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      si.Bound(p => p.NonIngallsIssueNumber).Title(text: "Non-Ingall Issue #").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
                                      si.Bound(p => p.Project).Title(text: "Project").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      si.Bound(p => p.ShortDescription).Title(text: "Short Description").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
                                      si.Bound(p => p.DetectionDate).Title(text: "Detection Date").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
                                      si.Bound(p => p.DetectedBy).Title(text: "Detected By").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                  }));
                                columns.Group(g1 => g1.Title("Issue Disposition").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
                      .Columns(ci =>
                      {
                                      ci.Bound(p => p.Severity).Title(text: "Severity").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      ci.Bound(p => p.Status).Title(text: "Status").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      ci.Bound(p => p.AssignedTo).Title(text: "Assigned To").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      ci.Bound(p => p.ActionNeeded).Title(text: "Need Action").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
                                      ci.Bound(p => p.ActionNeededText).Title(text: "Action Needed Comment").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
                                      ci.Bound(p => p.Ecd).Title(text: "ECD").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
                                  }));
                                columns.Group(g2 => g2.Title("Decision Info").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
                      .Columns(di =>
                      {
                                      di.Bound(p => p.DecisionNeeded).Title(text: "Need Decision").Width(pixelWidth: 110).Filterable(value: true).Visible(true);
                                      di.Bound(p => p.DecisionDetails).Title(text: "Decision Details").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
                                  }));
                                columns.Group(g3 => g3.Title("Issue Details").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
                      .Columns(ai =>
                      {
                                      ai.Bound(p => p.Comments).Title(text: "Comments").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
                                  }));
                            })
                            .HtmlAttributes(new { @class = "H750 BordSolThinBlk" })
                            .Pageable(pageable => pageable.Input(enabled: true).Numeric(enabled: false).Refresh(enabled: true))
                            .Sortable()
                            .Resizable(resize => resize.Columns(true))
                            .Reorderable(reorder => reorder.Columns(false))
                            .Scrollable()
                            .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
                            .Filterable()
                            .ColumnMenu()
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
        )
    </div>
    <style>
        .k-grid .k-alt {
            background-color: lightgray; /* specify the alternate background-color */
        }
    </style>
}

 

My Layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <script src="~/js/site.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
    <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" />
    <link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />      
    </div>
    @RenderSection("Scripts", required: false)
</body>
</html>

Alex Hajigeorgieva
Telerik team
 answered on 18 Sep 2019
6 answers
245 views

If I add several rows to my grid which is not bound to any data source, upon clicking the edit button of the first row and then clicking then edit of any other row. The first row of the grid is lost/deleted if the update button is not clicked.

This only happens a single time and never again after the first time it occurs on any action combination.

Would be helpful to know if there is a way to send only new items through the create transport instead of the entire grid also.

I've tried setting the model id, this doesn't fix the problem either problem.

 

<datasource>
        <schema>
            <model id="PrimaryId">
                <fields>
                    <field name="PrimaryId" default-value="1"></field>
                    <field name="PayDate" type="date" editable="true" nullable="false"></field>
                    <field name="ActivityStartDate" type="date" editable="true" nullable="false"></field>
                    <field name="ActivityEndDate" type="date" editable="true" nullable="false"></field>
                    <field name="ApprovalDeadlineDateTime" type="date" editable="true" nullable="false"></field>
                </fields>
            </model>
        </schema>
    </datasource>

 

logic to get around incorrect rows sent to controller through create transport

if (grid.dataSource.data().length == 0) {
            //defaulted today
            grid.addRow();
        }
        else {
            var newStartDate = AddDays(grid.dataSource.data()[grid.dataSource.data().length - 1].ActivityEndDate,1);
            var newEndDate = AddDays(newStartDate, 30);
            var newDeadline = AddDays(newEndDate, 5);
            var newPayDate = AddDays(newDeadline, 2);
 
            $("#PayrollPayRunGrid").data("kendoGrid").dataSource.pushInsert(grid.dataSource.data().length, {
                PrimaryId: currId,
                ActivityStartDate:newStartDate,
                ActivityEndDate: newEndDate,
                ApprovalDeadlineDateTime: newDeadline,
                PayDate: newPayDate,
            });
            currId++;
            grid.editRow($("#PayrollPayRunGrid tr:eq(" + (grid.dataSource.data().length) + ")"));
        }

 

jovaughn
Top achievements
Rank 1
Iron
 answered on 17 Sep 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?