Questions on UI for ASP.NET Core Forum

1 answer

288 views

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

441 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

157 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

234 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

133 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

answered on 25 Oct 2022

1 answer

126 views

How to display a kendo-chart in a kendo-schedule

Is it possible to display a kendo-chart inside of a kendo-schedule for each day in a monthview?

I am attempting to use the template "<script id="event-template" type="text/html"></script>" and setting ".EventTemplateId("event-template")".

Inside the template, I only want to dynamically change the series data of the kendo-chart for each day.

So far, only the first event displays a chart successfully even though there are other days with event data.

Are there any examples of something like this?

Calendar

Scheduler

answered on 25 Oct 2022

1 answer

112 views

Upload size (Height) fill

Hello,

how to use CSS to set the height of the Upload to fill the parent (see picture)

Robert

Upload

answered on 25 Oct 2022

1 answer

146 views

How to get tasks to render in calendar using AJAX binding

We are trying to use the @(Html.Kendo().Scheduler<myModel>() in Asp.net.

When I use Server Binding, and when my calendar page first displays, the tasks display in the calendar as expected.
Here is my Invoke method:
public async Task<IViewComponentResult> InvokeAsync()
List<myModel> myTasks = GetTasksfortheMonth();
return View(myTasks); //These display on calendar as expected

But when I switch months, I want to call the Read() method again to get that months data.
So I switched to using AJAX Binding.
Now when my calendar first displays or whenever I change months, my controller methods is called(below). But the tasks don't display in the calendar.

How do I get my tasks to display in the calendar when using AJAX binding?

My .cshtml
@Html.Kendo().Scheduler<myModel>()
....
.EventTemplate(
"<div class='movie-template'>" +
"<p>" +
"<h3> Title: #= title #</h3>" +
"</p>" +
"</div>")
.DataSource(d => d
.Model(m =>
{
m.Field(f => f.Title).DefaultValue("No title");
m.Field(f => f.Description).DefaultValue("no desc");
})
.Read("Read", "MyController") //this calls my controller method but no tasks appear in calendar
)
//.BindTo(Model) //Works for Server Binding, tasks appear in calendar when page renders first time

My Controller method:
public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
List<myModel> myTasks = GetTasksfortheMonth();
return Json(myTasks.ToDataSourceResult(request));
}

Calendar

Scheduler

answered on 25 Oct 2022

1 answer

101 views

Integration between Telerik Document Processing and Web UI (for JQuery, ASP.NET Core...)

Hi all,

I'm trying to understand if it is possible to create a Spreadsheet with the RadSpreadProcessing library and work with it in a web environment. I saw from older posts that there was a Telerik.Web.Spreadsheet library that supported this integration, but it seems that it is not directly supported now with .NET 6.

I need to show a spreadsheet to the user on a browser, with support for formulas, macros, excel graphs, workbook/worksheet protection, autofit of columns, basically everything that can be done with excel. From the documentation it seems that many of the features that I need are not supported by Telerik UI Web, but are supported by the RadSpreadProcessing. Is it correct? Is there a way to implement all this with the Web UI libraries?

Thank you everyone in advance!

Tommaso

Spreadsheet

answered on 25 Oct 2022

1 answer

480 views

How to get kendo-scheduler working with a event-template

We have a Asp.net core 6 application and we are trying to use the kendo-scheduler to display data in a month view.

I am following the "Basic Usage" example.

My calendar renders but there are no events displaying. And there are no errors.

My controller is getting called and it is passing back a list of events based on my model below.

I'm also trying to use an event-template. But this doesn't displaying anything in the calendar.

My ultimate goal would be to display a kendo-chart in each day of a month using the template.
But for now I'd like to get something like the below to work.

How can I get the events returned from my controller to display using the template?

//This is my model:
public class TaskViewModel : ISchedulerEvent
{
	public int TaskID { get; set; }
	public string Title { get; set; }
	public string Description { get; set; }
	private DateTime start;
	private DateTime end;
    public bool IsAllDay { get; set; }
    public int? OwnerID { get; set; }
}

//My controller:
public virtual JsonResult Basic_Usage_Read([DataSourceRequest] DataSourceRequest request)
{
	List<TaskViewModel> list = GetItems();
	return Json(list);
}

//Here is my Index.cshtml:
@{
    var resources = new[]
    {
        new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
        new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
        new { Text = "Charlie", Value = 3, Color = "#56ca85" }
    };
    string defaultTitle = "No Title";
}
<script id="event-template" type="text/x-kendo-template">
    <div class="template-container">
        <h3>Hello World  #: Title # </h3>
    </div>
</script>

<kendo-scheduler name="scheduler" 
    date="new DateTime(2022, 10, 01)" 
    start-time="new DateTime(2022, 10, 01, 7, 00, 00)"
    height="600"
    event-template-id="event-template"
    timezone="Etc/UTC">
    <views>
        <view type="month"></view>
    </views>
    <resources>
        <resource field="OwnerID" title="Owner" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@resources">
        </resource>
    </resources>
    <schema data="Data" total="Total" errors="Errors">
            <scheduler-model id="TaskID">
                <fields>
                    <field name="TaskID" type="number"></field>
                    <field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="description" from="Description" type="string"></field>
                    <field name="OwnerID" type="number" default-value="1"></field>
                    <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                </fields>
            </scheduler-model>
        </schema>
    </scheduler-datasource>
</kendo-scheduler>

Scheduler

answered on 24 Oct 2022