Questions on UI for ASP.NET Core Forum

1 answer

228 views

available Editor with model @model:

@model service.Models.ServiceViewModel
@(Html.Kendo().Editor()
            .Name("Description")
            .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline()
                .JustifyLeft().JustifyCenter().JustifyRight()
                .InsertUnorderedList().InsertOrderedList()
            )
            .StyleSheets(css => css
                .Add(Url.Content("~/shared/web/editor/editorStyles.css"))
            )
            .Value(@<text></text>)
            .HtmlAttributes(new { style = "width: 100%;height:400px" })
        )


public class ServiceViewModel
    {
********
        public string Description { set; get; }
*****
}

I save the data to the database.
When I pull the data to correct, the data is shown without markup.
At the same time, the data is saved as:

"&lt;p&gt;1&lt;/p&gt;&lt;p&gt;&lt;strong&gt;2&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;3&lt;/em&gt;&lt;/p&gt;"

Editor

answered on 17 Jan 2022

1 answer

2.4K+ views

Adding DatePicker to grid

Hello, I am trying to add DatePicker to my grid. I would like for it to display the date from a field but allow users to change the date using DatePicker. The example I found works for standalone but I'm having a hard time figuring out how to implement within my grid, have it default to whatever the current value is, and allow it to be editable.

View:

                    @(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
                        .Name("poGrid")
                        .Columns(columns =>
                        {
                            columns.Command(command => command
                                    .Custom("Print")
                                    .Click("printRow"))
                                .HtmlAttributes(new { title = "PO" })
                                .Width(150);
                            columns.Bound(p => p.poNum).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            columns.Bound(p => p.poReviewDT)
                                .Width(150)
                                .ClientTemplate(
                                    Html.Kendo().DatePicker()
                                    .Name("poReviewDT_#=poNum#_#=poReleaseNbr#")
                                    .Value("poReviewDt")
                                    .ToClientTemplate().ToString()
                                    );
                        })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Scrollable(scrollable => scrollable.Endless(true))
                            .Scrollable(a => a.Height("650px"))
                            .PersistSelection(true)
                            .Navigatable()
                            .Sortable()
                            .Filterable(filterable => filterable
                                .Extra(true)
                                .Operators(ops => ops
                                .ForString(str => str.Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                                .StartsWith("Starts with")
                                .EndsWith("Ends with")
                                .IsNull("Is null")
                                .IsNotNull("Is not null")
                                .IsEmpty("Is empty")
                                .IsNotEmpty("Is not empty"))))
                        .AutoBind(false)
                        .Excel(excel => excel
                            .FileName("PODashboard.xlsx")
                            .Filterable(true)
                            .AllPages(true)
                            .ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
                        .Reorderable(reorder => reorder.Columns(true))
                        .ClientDetailTemplateId("template")
                        .Events(e => e.DataBound("poGridDataBound"))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .PageSize(25)
                        .Events(x => x.Error("onGridError"))
                        .Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
                        .Model(model =>
                        {
                            model.Id(m => m.poNum);
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            model.Field(field => field.poReviewDT).Editable(true);
                        })
                        ).Resizable(resize => resize.Columns(true))
                        )

Property:

[DisplayName("Review Date")]
public string poReviewDT { get; set; }

Currently the calendar button does not render until you click into the column and when you do click the calendar button, it immediately closes - so I'm definitely missing a few steps.

Thanks

Date/Time Pickers

Grid

answered on 17 Jan 2022

2 answers

427 views

Adding a horizontal scroll bar when there are too many rows/fields

Hello everyone,

I was curious if there's a way to implement an HScrollBar to a UI when the grid gets too populated to fit on one screen. Any help would be appreciated. Thank you!

Grid

answered on 12 Jan 2022

1 answer

159 views

Grid Excel Export Setting Grid Data in Specific Row or Columns

Scenario pic

Hi everyone,

I would like to know is it possible to export grid data to specific row and columns via through excelExportHandler? (As the provided Pic)

I've noticed that we could use jquery to set background color of the excel file,

Would this solve my question?

Grid

answered on 06 Jan 2022

1 answer

229 views

kendo-chat change some messages color

Hi,

I want to use kendo-chat to show conversations between two people, but I want to highlight or change some message's colour and not all of them.

a simple example is like I have some initial messages that system is going to send and then two people are going to talk, so I want to change the color of the system messages to something else compare to the user's conversations

Is there any way I can do it?

Chat

answered on 05 Jan 2022

1 answer

158 views

Grid with excel export function

Hi everyone,

I'm aware of there is WordProcessing component for processing documents.

I've also notice that in grid demo there are functions for exporting Excel and PDF.

Is there a solution for exporting Microsoft .docx documentation?

Grid

answered on 30 Dec 2021

1 answer

238 views

DropDownTree asp net get controller

there is a form.Added element DropDownTree. When you click on the confirmation, you need to get the value in the controller Category. Preferably in the format string []. Tell me how you can get values, even in a different format.Thank you.

<form asp-action="CreateService" asp-controller="ServiceSubmit" asp-antiforgery="true" data-ajax="true" data-ajax-method="post" data-ajax-update="#result_login_register" >
                        <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                        <div class="form-group">
                            <label asp-for="Name">Краткое название</label>
                            <input asp-for="Name" class="form-control" />
                            <span asp-validation-for="Name" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label>Категория</label>
                            @(Html.Kendo().DropDownTree()
                                .Name("Category")
                                .DataTextField("Category")
                                .HtmlAttributes(new { style = "width: 100%" })
                                .AutoClose(false)
                                .Checkboxes(checkboxes => checkboxes
                                    .Name("checkedFiles")
                                    .CheckChildren(true)
                                )
                                .DataSource(dataSource => dataSource                                    
                                    .Model(model => model
                                        .Id("IdCategory")
                                        .HasChildren("HasChildren")
                                    )
                                    .Read(read => read
                                        .Action("CategoryPodServic_Read", "ServiceSubmit")
                                    ).ServerFiltering(false)
                                )
                            )
                            @*<span asp-validation-for="Category.CategoryPod" class="text-danger"></span>*@
                        </div>
                        <div class="form-group">
                            <input asp-for="Raion" class="form-check-input" type="checkbox" value="" id="Raion">
                            <label class="form-check-label" for="Raion">
                                Выезд на район
                            </label>
                        </div>
                        <div class="form-group">
                            <label asp-for="Description">Описание</label>
                                @(Html.Kendo().Editor()
                                    .Name("Description")
                                    .HtmlAttributes(new { style = "width: 100%; height:400px" })
                                    .Tools(tools => tools
                                        .Clear()
                                        .Bold().Italic().Underline()
                                        .JustifyLeft().JustifyCenter().JustifyRight()
                                        .InsertUnorderedList().InsertOrderedList()
                                    )
                                )
                            <span asp-validation-for="Description" class="text-danger"></span>
                        </div>
                        <button class="btn btn-success" type="submit" >Сохранить</button>
                    </form>

DropDownTree

answered on 29 Dec 2021

1 answer

167 views

looking for adding scroll bars to my Telerik Kendo Dropdown Tree

I am looking for adding scroll bars to my Telerik Kendo Dropdown Tree as the tree list contains very long list containing more than 5000 items. Need help.

DropDownTree

answered on 29 Dec 2021

1 answer

216 views

Clear TimePicker display

I have a timepicker defined as follows

@(Html.Kendo().TimePickerFor(model => model.VitalsTime1)
    .Interval(5)
    .Format("HH:mm")
    .Min(DateTime.Now.AddMinutes(-15))
    .Max(DateTime.Now.AddMinutes(15))
    .Events(e =>
    {
        e.Open("vitals1Open");
)
function vitals1Open(e) {
    var vm = window.viewModel;
    var currentDate = new Date();
    var currentTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
    vm.set('vitalsTime1', currentTime);
}

The ViewModel is public DateTime? VitalsTime1 { get; set; } while the table definition is Time(7).

I have a button that is supposed to clear a number of fields including the time. The button click function in part is

	function clearVitals1(e) {
		var vm = window.viewModel;

                vm.set('vitalsTime1', null);

All of the other fields are cleared but the TimePicker continues to display the time that was previously there.

I tried a couple of things to change the TimePicker but keeping getting the error You cannot override component name when bound to a model expression.

How do I get the TimePicker to clear the value?

Date/Time Pickers