Questions on UI for ASP.NET Core Forum

1 answer

496 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

96 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.5K+ 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

108 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

268 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

422 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

155 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

3 answers

228 views

Model's binded property holds valid HTML but the editor show it as raw instead of formatted

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:

Editor

answered on 25 Oct 2022

1 answer

131 views

Foreign Key Column - Display For

Greetings,

I am new to Telerik syntax and was curious on how I can display a foreign key field in a table but I do not want to display it as a drop down list. Which is the default behavior in the editor templates. I basically just want to show a field from a table where the foreign key ID match with source table.

Thanks,

Tracie

Grid