Questions on UI for ASP.NET Core Forum

1 answer

209 views

RecurrenceRule remains null after submit in custom editor

In my scheduler app i made my own editor for events, with contains most of the default inputs and some of my own. However i am having issues getting the RecurrenceEditor working. The RecurrenceEditor does showup and functions as expected in the ui, however when i submit the form after filling in an recurrence, the value in my model remains null and also doesnt throw any errors. All other inputs such as title, time, etc. does show up in my model and works as expected.

My code for the RecurrenceEditor that always submits null:

<div class="form-group">
     <div class="k-edit-label">
             @(Html.LabelFor(model => model.RecurrenceRule))
     </div>
     <div data-container-for="recurrenceRule" class="k-edit-field">
             @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
                 .HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
     </div>
</div>

An example of a input that i use and does work:

<div class="form-group">
     <div class="k-edit-label">
         @(Html.LabelFor(model => model.Description))
     </div>
     <div data-container-for="description" class="k-edit-field">
         @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", data_bind = "value:description" }))
     </div>
</div>

Scheduler

answered on 16 May 2022

1 answer

581 views

Telerik Grid doesn't show data

I’m using ASP.NET CORE with Telerik Core UI. I am fetching data from an SQL server, and when I debug code, I see data made to the action method.

However, Grid doesn’t populate any data; I only see the headers, in developer mode, I see no errors thrown. Could you please let me know what I am doing wrong.

For Startup class, I have added appropriate reference

services.AddControllersWithViews()

.AddJsonOptions(options =>

{

options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;

options.JsonSerializerOptions.PropertyNamingPolicy = null;

})

services.AddKendo();

Any help is much appreciated.

Model:

public class SampleModel

{

public int ASSAY_ID { get; set; }

public string ASSAY_REQUESTED { get; set; }

public string SAMPLE_NUMBER { get; set; }

public int ASSAY_NUMBER { get; set; }

}

Controler:

public ActionResult Index([DataSourceRequest] DataSourceRequest request)

{

SampleRepository samprp = new SampleRepository(_configuration);

var smp = samprp.GetSamples();

var queryable = smp.AsQueryable<SampleModel>();

DataSourceResult result = queryable.ToDataSourceResult(request,

c => new SampleModel

{

ASSAY_ID = c.ASSAY_ID,

ASSAY_REQUESTED = c.ASSAY_REQUESTED,

SAMPLE_NUMBER = c.SAMPLE_NUMBER,

ASSAY_NUMBER = c.ASSAY_NUMBER

});

return View(queryable);

}

View:

@using Kendo.Mvc.UI

@using Kendo.Mvc.Extensions

@(Html.Kendo().Grid<SCAssayApp.Models.SampleModel>()

.Name("grid")

.AutoBind(true)

.EnableCustomBinding(true)

.Columns(columns =>

{

columns.Bound(p => p.ASSAY_ID).Width(50);

columns.Bound(p => p.ASSAY_NUMBER).Width(60);

columns.Bound(p => p.SAMPLE_NUMBER).Width(70);

columns.Bound(p => p.ASSAY_REQUESTED).Width(100);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Scrollable()

.HtmlAttributes(new { style = "height:430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))
.Model(model =>

{

model.Id(p => p.ASSAY_ID);

model.Field(p => p.ASSAY_NUMBER);

model.Field(p => p.SAMPLE_NUMBER);

model.Field(p => p.ASSAY_REQUESTED);

}

)

.Read(read => read.Action("Index", "Sample"))

.ServerOperation(false)

)

Grid

answered on 13 May 2022

1 answer

537 views

Values in grid using in-cell editing with client template aren't actually updating until after onChange when tabbing out of cell

Package version: 2020.1.406

We have a grid taking advantage of a client template and the onChange event to automatically save changes.

Everything works correctly if the user presses "Enter" or clicks out of the cell.

If the user uses the "Tab" key to navigate to the next cell, the onChange event fires before the value actually updates in the input.

In the onChange event, if it fires after using the tab key the value is the previous value, but hen using "enter" or clicking out of cell the values are the correct updated value.

Here is the code.

@(Html.Kendo().Grid<StubAmountsViewModel>
()
.Name("stubAmountsGrid")
.Columns(columns =>
{
//columns.Bound(c => c.AccrualHeaderId).Visible(false);
columns.Bound(c => c.CustomerNumber);
columns.Bound(c => c.BusinessUnit).Visible(false);
//columns.Bound(c => c.CustomerDescription);
columns.Bound(c => c.DataDate).Format("{0:MMM-yyyy}");
columns.Bound(c => c.JobDescription);
columns.Bound(c => c.StubAccrualValue).HtmlAttributes(new {onChange = "stubAccrualValueChange(this)"})
.ClientTemplate("<input type='text' class='numeric k-textbox k-grid-StubAccrualValue stubAccrualValueInput' min='0' step='0.01' value='#=StubAccrualValue#' style='width: 100% !important;' />");
})
.DataSource(source => source
.Ajax()
.PageSize(20)
.Model(m => m.Id(r => r.AccrualHeaderId))
.Read(read => read.Action("ReadStubAmounts", "Admin").Data("getClosedMonthData")))
.Groupable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Sortable()
.Events(events => events.DataBound("stubAmountsDataBound"))
)

Grid

answered on 13 May 2022

1 answer

315 views

Editor Height

I am programmatically creating and filling multiple editors. After I assign the contents of each editor, I would like to have the editor shrink or expand its height to fit the contents. How can this be don?

Editor

answered on 13 May 2022

1 answer

763 views

Telerik reports not having excel export option in licensed version

Hi Team,

We are using Telerik reporting service license and have developed reports but our reports are not having excel export option, however the same is working with the trial version of the product in our local environment. but not with the licensed version.

We are using Asp.Net core version 3.1.

We have tried below articles but no luck so far:

1. https://docs.telerik.com/reporting/using-reports-in-applications/dot-net-core-support

2. https://docs.telerik.com/reporting/knowledge-base/missing-docx-xlsx-pptx-xps-export-options

3. https://www.telerik.com/forums/telerik-report-only-have-pdf-excel-and-word-are-missing

Any urgent help will be appreciated.

Thanks,

Markandey Pandey

Spreadsheet

answered on 13 May 2022

1 answer

929 views

DatePicker default value on open

I have a dialog box that includes a date picker for an expiry date field that is null be default.

If I select an expiry date say a year into the future, close the dialog box and reopen it, the calendar in the datepicker opens to my last selected date instead of today's date.

Is there anyway to force the calendar to always open to today if a date is not set in the datepicker instead of remembering its last position.

It seems to me, I should be able to get the calendar component in the open event of the datepicker and then set the initial date. Is that possible?

Thanks,

Charlotte

Date/Time Pickers

answered on 12 May 2022

1 answer

197 views

How to return messages to client from grid actions

Hello,

I would like to return messages to the client whenever a grid create or edit action has completed successfully. I have tried adding to the Json being returned and using VeiwData/TempData but neither is a viable option with the ToDataSourceResult of the grid action methods. I can't seem to find any documentation on how I can achieve this. Please point me in the right direction. Below is an action method I converted from being a grid action to using my own modal editing but I'd like to use the built in grid popup instead.

        [HttpPost]
        public IActionResult Update([DataSourceRequest] DataSourceRequest request, CaseRequestVM vm, bool fromDashboard = false)
        {
            if (ModelState.IsValid)
            {
                bool caseRequestUpdated = _caseRequestService.UpdateCaseRequest(vm);
                if (caseRequestUpdated)
                {
                    TempData["Message"] = "Case request updated."; // ===> SHOW ON CLIENT
                }
                else
                {
                    TempData["Message"] = "Failed to update case request";
                }
            }
            else
            {
                TempData["Message"] = "Failed to update case request";
            }

            if (!fromDashboard)
                return RedirectToAction(nameof(Index));
            else
                return RedirectToAction("Dashboard", "Home");
        }

Grid

answered on 11 May 2022

1 answer

201 views

binding collection of items in the popup editor

I am using kendo grid popup editor with a template.

.Editable(c => { c.TemplateName("_CustomTemplate").Mode(GridEditMode.PopUp); })

This is the _CustomTemplate i am using

@model Models.CustomViewModel
<div id="popupeditor">
    @Html.HiddenFor(model => model.Id)
    <button type="button" id="NewEmailButton">Add New Email</button>
</div>

And the template model is

public class CustomViewModel 
{
    public string Name { get; set; }
    public List<string> EmailList { get; set; } = new List<string>();
}

User can add new input for email by clicking the "Add New Email" button. I am adding the input to PopUp container with javascript.

function AddEmail() 
{
    let index = 0;
    let input = '<input name="EmailList[index]" type="text"/>'
    $(input).appendTo('#popupeditor');
}

The problem is when i click save on the popup editor it doesn't bind to my model. It doesn't even go to my save method. If i edit the Name it goes to the Save method but Emails list stays empty.

Grid

answered on 10 May 2022

1 answer

362 views

Repeater inside the grid popup editor

I need to make jquery repeater work inside the popup editor.

I need to show repeater for customer email.

public class CustomerViewModel 
{
        public string Name {get; set;}
        public List<CustomerRepeatedModel> CustomersRepeatedValues{ get; set; } = new List<CustomerRepeatedModel>();

        public class CustomerRepeatedModel {
                // this should be added and removed with repeater
                public string Email { get; set; }
        }
}

The kendo grid

@(Html.Kendo().Grid<CustomerViewModel>
                                ().Name("customerGrid")
                                .Sortable()
                                .Scrollable()
                                .ToolBar(c => {
                                    c.Create().Text("Create Customer");
                                })
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Id).Title("Customer ID").Filterable(false).Visible(false);
                                    columns.Bound(c => c.CustomerRepeatedValue).Visible(false);
                                    columns.Bound(c => c.Name).Title("Customer Name");

                                    columns.Command(column =>
                                    {
                                        column.Edit();
                                        column.Destroy();
                                    });
                                })
                                .Editable(c =>
                                {
                                    c.TemplateName("_CustomerTemplate")
                                        .Mode(GridEditMode.PopUp);
                                })
                                .DataSource(ds => ds.Ajax()
                                .Read(r => r.Url("/Customer/Index?handler=Read"))
                                .Update(u => u.Url("/Customer/Index?handler=Update"))
                                .Create(c => c.Url("/Customer/Index?handler=Create"))
                                .Destroy(d => d.Url("/Customer/Index?handler=Destroy"))
                                .Model(m =>
                                    {
                                    m.Id(model => model.Id);
                                    m.Field(model => model.Id).Editable(false);
                                    m.Field(model => model.Name);
                                    m.Field(model => model.IsDeleted).Editable(false);
                                    m.Field(model => model.CustomerRepeatedValues);
                                    })
                                )
                                .Events(e => e.Edit("grid_edit")@*.Save("grid_save")*@)

The _CustomerTemplate

In the popup template i can't access to Model. It is always null. So as i found on the forum i populated the repeater in the edit event. But if it is posibble to access Model inside the template i would like to know how.

@model WebUI.Pages.CustomerViewModel

<div>
    @Html.HiddenFor(model => model.Id)
    <div>
        <div class="col-4 mb-2">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="col-8 mb-2">
            @Html.TextBoxFor(model => model.Name)
        </div>
        <div class="repeater">
            <div data-repeater-list="CustomerRepeatedValues">
                <div class="col-4 mb-2">
                    Customer Emails
                </div>
                @*@for (var index = 0; index < Model.CustomerRepeatedValues.Count; index++)
                {
                    <div data-repeater-item>
                        <input type="text" name="Email" value="@(Model.CustomersRepeatedValues[index].Email)"/>
                        <button data-repeater-delete type="button">
                            Remove
                        </button>
                    </div>
                }*@
            </div>
            <div>
                <button data-repeater-create type="button">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</div>

When i open the popup editor it shows the repeater, i can add or remove items. But when i click save it doesn't save it, it doesn't even go to save method. But if i change the name on the popup editor and click save it does go to save method but the changed emails are not bounded to model only the name is updated.

If there is better way to do this i would like to get your help

Grid

answered on 10 May 2022

1 answer

232 views

How to avoid collapsing tabstrip content (flickering) at loading tab dynamically?

Hello,

I load content to a tabstrip dynamically via ContentUrl and Ajax.

Most of them have the same height (might differ slightly).

When I click a tab item the first time, the content is collapsed and expanded, which leads to flickering. After the content of a tab is loaded once, it is fine.

I tried to set a fixed height and switched off animation -> did not solve the problem.

Are there any workarounds to pre-initialise the height of unloaded contents with the height of the selected item and adjust them dynamically to the required height?

Any chance to avoid collapsing when loading the content dynamically?

Thanks,

Christine

TabStrip

answered on 10 May 2022