Questions on UI for ASP.NET Core Forum

1 answer

322 views

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

94 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

250 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

533 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

98 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

119 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

1 answer

310 views

Wizard - validation on every step

What is the best way to validate input on each wizard step before allowing user to go to next step? We are loading step content with ajax and not using forms inside the steps.

Wizard

answered on 26 Oct 2022

1 answer

471 views

Editor showing data as plain text instead of HTML. It is saving correct formatted test all the way to DB

I'm facing an issue where I can successfully save HTML text to DB using the Editor. Still, upon loading the exact text (with all the formatting tags), the Editor refuses to format it correctly and displays it as plain text:

@* Background *@
<div class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.BackgroundConcessionaireContract, "Background of Concessionaire/Contract *", new { @class = "col-12 control-label" })
		<kendo-editor   for="BackgroundConcessionaireContract" style="height:350px" aria-label="editor"
				placeholder="Background of Concessionaire/Contract">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

<hr class="cm-hr" />

@* Proposal Details *@
<div id="divProposalDetails" class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.CommercialTermsDetails, "Commercial Terms Details *", new { @class = "col-12 control-label" })
		<kendo-editor   for="CommercialTermsDetails" style="height:350px" aria-label="editor"
				placeholder="Commercial Terms Details">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

<hr class="cm-hr" />

@* Financial Analysis *@
<div class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.FinancialAnalysis, "Financial Analysis *", new { @class = "col-12 control-label" })
		<kendo-editor   for="FinancialAnalysis" style="height: 350px" aria-label="editor"
				placeholder="Financial Analysis">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

In the model, the fields are defined simply as:

public string BackgroundConcessionaireContract { get; set; }
public string CommercialTermsDetails { get; set; }
public string FinancialAnalysis { get; set; }

The output is like this:

I also noted that If I don't correct the unformatted plain text and save again, the editor saves even more obscured characters and this keeps happening:

A simple

Test

becomes

<strong>T</strong>est

and then becomes

&lt;strong&gt;T&lt;/strong&gt;est

and this process keeps on repeating

Editor

answered on 26 Oct 2022

1 answer

168 views

Kendo Calendar DataSource not getting data from controller

We are using Kendo-Scheduler in an Asp.net application.

We are having a problem getting events to display in the calendar.

When we use Server Binding, we can see the events display in the calendar as expected. We do the following in our ViewComponent:

public async Task<IViewComponentResult> InvokeAsync()

   {
   List<TaskViewModel> myTasks = GetItems();
   return View(myTasks);   //these events display on the calendar successfully
   }

However, we need to use Ajax Binding. When we do the following, no data is returned to the DataSource. When we look at scheduler_dataBound() for the data, we can see that no data is returned from the controller. Also the _total = 0

What am I doing wrong in the below? Why is the Server binding working but not the Ajax Binding?

 //my.cshtml
    @(Html.Kendo().Scheduler<MyApp.Core.ViewModels.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2022, 10, 01))
    .StartTime(new DateTime(2022, 10, 01, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.MonthView(m => {
            m.Selected(true);
            m.EventHeight(150);
        });
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .Model(m =>
        {
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.Description).DefaultValue("no desc");
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Read", "MyController")
    )
    .Events(e => {
        e.DataBound("scheduler_dataBound");
    })
)
 <script type="text/javascript">
  function scheduler_dataBound(e) {
        var data = $("#scheduler").data("kendoScheduler").dataSource;
        console.log(data);      //Here -> _total=0 and _data has no objects
    }
  </script>


  //My Controller method
  public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
 {
     //This is getting called from calendar datasource read
     return Json(GetItems().ToDataSourceResult(request));   //Here I am mocking up data
  }

  //My Mock data
  public List<TaskViewModel> GetItems()
  {
    List<TaskViewModel> list = new List<TaskViewModel>();
    list.Add(new TaskViewModel
     {
       Title = "Event 1",
       Start = new DateTime(2022, 10, 1),
       End = new DateTime(2022, 10, 1),
       Description = "Description 1",
       IsAllDay = false,
       OwnerID = 1,
       TaskID = 1
      });
       ......More data
      return list;
  }

Scheduler

answered on 26 Oct 2022