Questions on UI for ASP.NET Core Forum

3 answers

243 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

135 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

131 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

114 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

151 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

109 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

499 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

1 answer

104 views

How to close the dropdown list

Hi,

I want to close the dropdown list as soon as the event (it creates the confirmation pop-up) is triggered from selecting an option from the list.

How this can be achieved.

Thanks,

Button

DropDownList

Grid

answered on 24 Oct 2022

1 answer

161 views

Extract chart from telerik web spreadsheet

Hello, I would like to know if there is any way to extract the graphs from an excel sheet. I have managed to export the content of the excel sheet but I have not been able to export the graph that is generated there

So far this is the code I handle

 byte[] bytes = System.IO.File.ReadAllBytes(@"path");
                Stream stream2 = new MemoryStream(bytes);

                Workbook workbook = Workbook.Load(stream2, ".xlsx");


                Telerik.Windows.Documents.Spreadsheet.Model.Workbook document = workbook.ToDocument();

                document.ActiveSheet = document.Worksheets.First(sheet => sheet.Name == "Rep.F3");
                foreach (Telerik.Windows.Documents.Spreadsheet.Model.Worksheet sheet in document.Worksheets)
                {

                    if (sheet.Name != "Rep.F3")
                    {
                        sheet.Visibility = Telerik.Windows.Documents.Spreadsheet.Model.SheetVisibility.Hidden;
                        //document.Worksheets.Remove(sheet);
                    }
                    else
                    {
                        var shapes = sheet.Shapes;
                        var img= sheet.Images;
                        sheet.WorksheetPageSetup.PaperType = Telerik.Windows.Documents.Model.PaperTypes.A4;
                        sheet.WorksheetPageSetup.PageOrientation = Telerik.Windows.Documents.Model.PageOrientation.Portrait;
                        sheet.WorksheetPageSetup.CenterHorizontally = true;
                        sheet.WorksheetPageSetup.PrintOptions.PrintGridlines = false;
                        sheet.WorksheetPageSetup.ScaleFactor = new Telerik.Documents.Primitives.Size(0.9, 1);
                        sheet.WorksheetPageSetup.Margins =
                            new Telerik.Windows.Documents.Spreadsheet.Model.Printing.PageMargins(0
                            , 20, 0, 0);
                    }

                }

I have tried to get the list of images and forms but it does not return any result

Chart

Spreadsheet