Questions on UI for ASP.NET Core Forum

1 answer

569 views

Delete item from kendo dropdownlist leaves empty item in list

Hi, I have a kendo dropdownlist which offers the option to remove items with a link. I used Template/ValueTemplate to achieve this.

@(Html.Kendo().DropDownList()
      .HtmlAttributes(new { @class = "form-control" })
      .Name("dataSelect")
      .DataTextField("Text")
      .DataValueField("Value")
      .Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>")
      .DataSource(ds => ds
         .Read(read => read
         .Url("/Data?handler=ReadData").Data("getForgeryToken")
)))
function deleteItem(itemId) {    
            var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
            $.ajax({
                type: "POST",
                url: "/Data?handler=DeleteItem",
                headers:
                {
                    "RequestVerificationToken": data.__RequestVerificationToken
                },
                data: {
                    itemId: itemId,
                },
                success: function (response) {
                    $('#dataSelect').data("kendoDropDownList").dataSource.read();
                },
                failure: function (response) {
                }
            });
        }

This basically works, but the problem is that an empty item (which has neither a text nor a value) remains in the dropdown list, even though I reload the datasource of the control. Is there a way to get rid of this item? Is something wrong with my configuration of the control?

DropDownList

answered on 31 Oct 2022

1 answer

1.5K+ views

Was the Grid k-state-selected Css class name removed for selected rows?

For selected rows, the grid use to add a "k-state-selected" to the row, with the updated selection functionality in the grid, it now only adds a "k-selected" . Is this the correct behavior? I have some custom css style that are tied to tr.k-state-selected. Before I update styles, want to make sure I am understanding the behavior correctly.

Grid

Styling

answered on 29 Oct 2022

1 answer

110 views

Using Kendo-Scheduler inside a kendo-tabstrip

We are using Kendo-Scheduler in an Asp.net core app.

The problem we are having is that our events don't display on the calendar.

It looks like the issue is due to having the calendar inside of a "kendo-tabstrip". Our calendar tab is the second of 4. It looks like this is keeping the events from display.

When I try using the kendo-scheduler in a separate "test" app with no "kendo-tabstrip", it works as expected.

Has anyone else had a problem using kendo-scheduler inside of a kendo-tabstrip?

If so, is there a solution?

Scheduler

TabStrip

answered on 28 Oct 2022

1 answer

311 views

Grid not binding in Ajax mode

My grid is not binding whenever a read is made. I programmed it so that when the user presses a button, it gathers search parameters and calls the read() method. It fetches the data and I get results successfully, but it doesn't update in the UI, no loading graphic or anything. I can see the grid but it has no data. I simplified the fields and columns to only one to see if there was an error in the naming but no luck. No console errors. I used tag helper and HTML helper, none work. Below is my code, simplified for this post.

Razor Page

<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="~/lib/kendo-ui/js/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</head>

<body>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<button type="button" id="btnSearch" onclick="SearchPosInfo()">Search</button>
    <kendo-grid name="grdResults" auto-bind="false">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="25">
            <schema>
                <model id="piid">
                    <fields>
                        <field name="piid" type="number"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="Index?handler=Read" data="SearchParams" />
            </transport>
        </datasource>
        <columns>
            <column field="piid"></column>
        </columns>
        <sortable enabled="true" />
        <pageable button-count="5" page-sizes="new int[] { 10, 25, 50, 100 }">
        </pageable>
    </kendo-grid>
.
.
.
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

JS

function SearchParams() {
    var searchParams = {
        pd: $("#txtNumber").val()
    }
    var ext = $.extend(true, {}, kendo.antiForgeryTokens(), searchParams);

    return ext;
}

function SearchPosInfo() {
    $("#grdResults").data("kendoGrid").dataSource.read();
}

Response

{"data":[{"piid":37133},{"piid":37525},{"piid":48314},{"piid":56042}],"total":4,"aggregateResults":null,"errors":null}

Grid

answered on 28 Oct 2022

1 answer

93 views

Wrong processing french letters on .Net Core Kendo.Mvc, Version=2022.3.913.0

Cannot create grid with french title 'Détail'

var res = html
            .Kendo()
            .Grid<object>()
            .Name("Test")
            .Columns(x =>
            {
                var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
                var strCreated = new string(arr); //"Détail" - get from localization from french
                x.Template(string.Empty)
                .HtmlAttributes(new {title = strCreated});
            });

        var ws = res.ToClientTemplate().ToString();

        //Détail => D\u0026#xE9;tail
        //<div id="Test" name="Test"></div><script>kendo.syncReady(function(){jQuery("\#Test").kendoGrid({"columns":[{"attributes":{"title":"D\u0026#xE9;tail"}}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}});});<\/script>

That's why cannot parse template on client side.

Code

res.ToComponent().VisibleColumns[0].ToJson()

returns 'Détail' when Framework returns 'Détail'.

Some investigations give me that on Core your code is like

        HtmlEncoder encoder = HtmlEncoder.Default;

        var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
        var strCreated = new string(arr); //Détail
        var encoded2 = encoder.Encode(strCreated);
        //endoded == "D&#xE9;tail"

When old code is like

var arr = new char[] { (char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
string s = HttpUtility.HtmlAttributeEncode(strCreated).Replace("&#32;", " ").Replace("&#39;", "'");
s = HttpUtility.HtmlDecode(s);
//s == "Détail"

Grid

answered on 28 Oct 2022

1 answer

246 views

Problem showing data for Scheduler on .Net 6

Hi,

I have been working with the Scheduler and I can't make it to work.

I have an object that extends ISchedulerEvent with the start and end dates, apart from all the needed parameters:

public class BsScheduleMeeting : ISchedulerEvent
    {
        private DateTime start;
        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }

        private DateTime end;
        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }

    }

With this we created a scheduler on a Razor view with a custom datasource, defining the model and the transport functionality (is only a read):

    @(Html.Kendo().Scheduler<BsScheduleMeeting>()
        .Name("scheduler")
        .Date(DateTime.Now.Date)
        .StartTime(DateTime.Now.Date.AddHours(7))
        .EndTime(DateTime.Now.Date.AddHours(22))
        .Editable(false)
        .Height(700)
        .Views(views =>
        {
            views.DayView(day => day.Selected(true));
        })
        .Timezone("Etc/UTC")
        .DataSource(datasource => datasource
            .Custom()
            .Schema(schema => schema    
                .Model(m => {
                    m.Id(f => f.MeetingID);
                    m.Field("title", typeof(string)).DefaultValue("No title").From("title");
                    m.Field("start", typeof(DateTime)).From("start");
                    m.Field("end", typeof(DateTime)).From("end");
                    m.Field("description", typeof(string)).From("description");
                    m.Field("recurrenceID", typeof(int)).From("recurrenceID");
                    m.Field("recurrenceRule", typeof(string)).From("recurrenceRule");
                    m.Field("recurrenceException", typeof(string)).From("recurrenceException");
                    m.Field("isAllDay", typeof(bool)).From("isAllDay");
                    m.Field("startTimezone", typeof(string)).From("startTimezone");
                    m.Field("endTimezone", typeof(string)).From("endTimezone");
                })
            )
            .ServerPaging(false)
            .ServerFiltering(true)
            .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("GetJson", "BSSchedule");
                })
            )
        )
    )

The controller call that returns the data is the next one:

public virtual JsonResult GetJson([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetTasks().ToDataSourceResult(request));
        }

        private IList<BsScheduleMeeting> GetTasks()
        {
            IList<BsScheduleMeeting> schedulerTasks = new List<BsScheduleMeeting>()
            {
                new BsScheduleMeeting {
                    Description = "",
                    StartTimezone = "UTC",
                    MeetingID = 1,
                    Title = "AP Physics",
                    Start = new DateTime(2022,10,24,8,00,00),
                    End= new DateTime(2022,10,24,9,00,00),
                    EndTimezone = "UTC",
                    RecurrenceRule = null,
                    RecurrenceID = 1,
                    RecurrenceException = null,
                    IsAllDay = false
                },
                new BsScheduleMeeting {
                    Description = "",
                    StartTimezone = "UTC",
                    MeetingID = 2,
                    Title = "History",
                    Start = new DateTime(2022,10,24,9,00,00),
                    End= new DateTime(2022,10,24,10,00,00),
                    EndTimezone = "UTC",
                    RecurrenceRule = null,
                    RecurrenceID = 2,
                    RecurrenceException = null,
                    IsAllDay = false
                },
                new BsScheduleMeeting {
                    Description = "",
                    StartTimezone = "UTC",
                    MeetingID = 3,
                    Title = "Art",
                    Start = new DateTime(2021,10,24,9,00,00),
                    End= new DateTime(2022,10,24,10,00,00),
                    EndTimezone = "UTC",
                    RecurrenceRule = null,
                    RecurrenceID = 3,
                    RecurrenceException = null,
                    IsAllDay = false
                },
            };

            return schedulerTasks.ToList();
        }

With this, I tryed everything but couldn't make it work. The most common error that I get is this one on Javascript:

and the data is being returned correctly, as shown in the next image:

What can I do so the Scheduler gets the info that I send?

Thank you in advance,

Diego.

Scheduler

answered on 27 Oct 2022

1 answer

516 views

Binding Form data to selected item in DropDownList

I have a very simple scenario and can't quite figure out how to manage it with Core and Telerik controls.

I have a DropDownList which I'm successfully filling from an action method. I have form fields below it that relate to the row selected in the DropDownList. What I would like to do is have the form fields change when the selected item in the dropdownlist changes. Simple parent-child relationship, but I can't figure out how to manage this with Core and Telerik. Any suggestions? Thanks.

DropDownList

answered on 27 Oct 2022

1 answer

97 views

Edit in Grid Hierarchy - ASP CORE

Hi .. how can I edit the rows of the top and children rows in a Grid Hierarchy?

Also .. have can I as expand ALL and collapse all

Grid

answered on 27 Oct 2022

2 answers

3.6K+ views

JQuery validation not working for some controls on 2022.1.119

Hello,

I am using JQuery validation to validate a form containing many controls in addition to 2 kendo controls. The checkboxgroup and a radiogroup.

After updating the project to 2022.1.119 from 2021.1.330 the validation on the form gets the following error:

Upon inspecting the error (this is inside of the jquery.validate.js file) i see that for only the two kendo controls, the $(element).rules() is evaluating to undefined and then when line 754 runs it errors because "rules" is nothing

My question is what changed to cause this? I only see very small tweaks to the HTML output of the core wrapped controls, im not seeing anything that would cause rules() to evaluate undefined.

Here is my JS for the validation setup:

        var validateValue = $("#frmAdditem").validate({
            errorClass: "error fail-alert",
            validClass: "valid success-alert",
            errorPlacement: function (error, element) {
                //Custom position: first name

                if ($(element).attr("name") == "chkAIWork") {
                    $("#lblChkAIWork").text(error[0].innerText);
                }
                else if ($(element).attr("name") == "rdoMatchType") {
                    $("#lblRdoMatchType").text(error[0].innerText);
                }
                else if ($(element).attr("name") == "dpAIReleaseBy") {
                    $("#lbldpAIReleaseBy").text(error[0].innerText);
                }
                else {
                    error.insertAfter(element);
                }
            },
            rules: {
                txtAIPart: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
                txtAIRev: {
                    required: true,
                    maxlength: 10
                },
                chkAIWork: {
                    required: {
                        depends: function (element) {
                            return !$("#chkAIWork").getKendoCheckBoxGroup().value() == '';
                        }
                    }
                },
                rdoMatchType: {
                    required: {
                        depends: function (element) {
                            return $("#rdoMatchType").getKendoRadioGroup().value() == undefined;
                        }
                    }
                },
                ddlAIProjectType: {
                    required: true
                },
                txtAIProj: {
                    required: true,
                    maxlength: 30
                },
                dpAIReleaseBy: {
                    required: true
                }
            },
            messages: {
                txtAIPart: {
                    required: "Part is required",
                    minlength: "Part should be at least 3 characters"
                },
                txtAIRev: {
                    required: "Rev is required"
                },
                chkAIWork: {
                    required: "Work selection is required"
                },
                rdoMatchType: {
                    required: "Match type is required"
                },
                ddlAIProjectType: {
                    required: "Type is required"
                },
                txtAIProj: {
                    required: "Project name required"
                },
                dpAIReleaseBy: {
                    required: "Release by required"
                }
            },
            success: function (label, element) {

                if ($(element).attr("name") == "chkAIWork") {
                    $("#lblChkAIWork").text('');
                }
                else if ($(element).attr("name") == "rdoMatchType") {
                    $("#lblRdoMatchType").text('');
                }
                else if ($(element).attr("name") == "ddlAIProjectType") {
                    $("#lblddlAIProjectType").text('');
                }
                else if ($(element).attr("name") == "dpAIReleaseBy") {
                    $("#lbldpAIReleaseBy").text('');

                }
            }
        });

I'm aware there is a kendo validate but have never used it because JQuery validate was working fine before the upgrade

Can anyone help with this?

Thanks

CheckBoxGroup

RadioGroup

answered on 26 Oct 2022

1 answer

114 views

ASP.NET Core Grid Save Rows to Session

My application has an empty grid at the start of the application; however the user will be adding rows. I am migrating this application from ASP.NET Web Forms where I solved this situation by using Session variables.

Here is my grid:

<panel>
<h3>DETAIL</h3>

@(Html.Kendo().Grid<EDPortalCoreRider.Models.WebForm850Item>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.PO101);
columns.Bound(p => p.PO102).Width(140);
columns.Bound(p => p.PO103).Width(140);
columns.Bound(p => p.PO104).Width(100);
columns.Bound(p => p.PO105).Width(100);
columns.Bound(p => p.PO107).Width(100);
columns.Bound(p => p.PO109).Width(100);
columns.Bound(p => p.PO111).Width(100);
columns.Bound(p => p.PID05).Width(100);
columns.Bound(p => p.PO401).Width(100);
columns.Bound(p => p.PO414).Width(100);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.PageSize(20)
.Transport(transport =>
{
transport.Read(read =>
read.Action("GetItems","WebForm")
);
transport.Create(create =>
create.Action("AddItems","WebForm").Type(HttpVerbs.Post)
);
transport.Update(update =>
update.Action("SaveItems","WebForm").Type(HttpVerbs.Post)
);/*
transport.Destroy(destroy =>
destroy.Url("https://demos.telerik.com/kendo-ui/service/products/destroy")
.DataType("jsonp")
);*/
transport.ParameterMap("parameterMap");
})
)
)
<script>
function parameterMap(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
</script>
</panel>

Here is my Controller code:

[HttpPost]
public ActionResult AddItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix="models")] IEnumerable<WebForm850Item> web850Items)
{
var results = new List<WebForm850Item>();

if (web850Items != null && ModelState.IsValid)
{
HttpContext.Session.SetObjectAsJson("850Items", web850Items);

//foreach (var product in web850Items)
//{

//_form850Items.Add(product);
//results.Add(product);
//}
}

return Json(results.ToDataSourceResult(request, ModelState));
}

[HttpPost]
public ActionResult SaveItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WebForm850Item> web850Items)
{
HttpContext.Session.SetObjectAsJson("850Items",web850Items);

foreach (var web850Item in web850Items)
{
ViewBag.POItems.Add(web850Item);
}

return Json(web850Items.ToDataSourceResult(request, ModelState));
}

While the method is being called, I am not getting web850Items variable being populated. What am I missing?

Grid

answered on 26 Oct 2022