Questions on UI for ASP.NET MVC Forum

0 answers

134 views

Hi I am using the Autocomplete textbox. It finding to the datasource fine. Just like Product is being used in the demo.

1. My question is if I have a product list. And it has the column product type , and I want to captrue the value of prodcut type then how I can do that. Product is binds with the userId.

2. I have a model class as

ModelViewMY {

date TodaysDate {get;set} // date is not part of the list.

List<Users> Users {get;set}

}

Question now: if I am using the AutoComplete in my mvc project then how I can set the DataTextFiled(Useres.UserId). I tried but I am getting errors.

@(Html.Kendo().AutoComplete()
.Name("searchParam")
.DataTextField("Id") //DataTextField("dataField")
.Filter("contains")
.MinLength(3)

AutoComplete

asked on 24 Nov 2021

1 answer

730 views

How to refresh custom filter options in kendo grid ?

Hello,

I have a kendo grid, with custom filter in some columns defined like this:

c = columns.Bound(x => x.Field1).Title("Field1").Width(130).Filterable(filterable => filterable.Extra(false).UI("customField1Filter").Operators(op => op.ForString(str => str.Clear().IsEqualTo("Is equal to"))));

and

function customField1Filter(element) {
        element.kendoDropDownList({
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: {
                transport:{
                    read: {
                        data: getdata(),
                        url: "@Url.Action("PopulateField1Filter", "Common")"
                    }
                }
            },
            optionLabel: "--Select Value--"
        });
    }

It works fine, but in order to implement a complex cascading filtering betweent a lot of columns, I have to refresh the options of them.

For exemple: columns 1 display country, columns 2 display city, both are filterable. When I select a country on first filter, i have to refresh the options of the city filter.

How to programmacally refresh filter option of a specific column ? Or refresh filters of all columns witout refresh grid data ?

Thanks in advance

Filter

Grid

answered on 23 Nov 2021

1 answer

384 views

How to enable editing on rowclick in Kendo MVC Grid in InLine mode?

I have a Kendo MVC Grid, I don't want the edit button to edit the row. I want to enable the editing once the User clicks on the row. Is there any way to do this?

Grid

answered on 23 Nov 2021

1 answer

116 views

Is there any way to edit individual cell like this in Kendo Grid?

I need to implement cell editing in Kendo Grid and save the cell value like this. Is there any way to do this? The given Inline InCell editing mode doesn't solve my purpose. please find the attached screenshot.

Grid

answered on 23 Nov 2021

1 answer

1.7K+ views

Invalid Date Error : ParseFormats not working Kendo dateTimePicker

I have the following set of code for picking a start date and end date from user in the 'dd/MM/yyyy HH:mm tt' format.

<tr>
        <td>Start DateTime</td>
            <td>
                @(Html.Kendo().DateTimePickerFor(model => model.StartDateTime).Name("StartDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy HH:mm tt" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
            </td>
        </tr>
        <tr>
            <td>Expiration DateTime</td>
            <td>
                @(Html.Kendo().DateTimePickerFor(model => model.ExpirationDateTime).Name("ExpirationDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy HH:mm tt" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
            </td>
        </tr>

The javascript code is as follows :

$(document).ready(function () {

        function onChange() {

            var StartDateTime = $("#StartDateTime").val().split(" ");
            var date = StartDateTime[0].split("/");
            var time = StartDateTime[1].split(":");
            var dd = date[0];
            var MM = date[1];
            var yyyy = date[2];
            var HH = time[0];
            var min = time[1];
            var tt = StartDateTime[2];
            StartDateTime = new Date(yyyy,MM-1,dd,HH,min);
            var ExpirationDateTime = new Date(StartDateTime.setHours(StartDateTime.getHours() + 1));
            $("#ExpirationDateTime").data("kendoDateTimePicker").value(ExpirationDateTime);
            
        }

        $("#StartDateTime").kendoDateTimePicker({
            change: onChange,
            format: "dd/MM/yyyy HH:mm tt",
            parseFormats: ["dd/MM/yyyy HH:mm tt"]
        }).data("kendoDateTimePicker");

        $("#ExpirationDateTime").kendoDateTimePicker({
            format: "dd/MM/yyyy HH:mm tt",
            parseFormats: ["dd/MM/yyyy HH:mm tt"]
        }).data("kendoDateTimePicker");
    });

The underlying model :

[Required(ErrorMessage = "Start Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime StartDateTime { get; set; }

[Required(ErrorMessage = "Expiration Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime ExpirationDateTime { get; set; }

But whenever I do a sumbit, I get error saying :

The value '18/11/2021 10:59 AM' is not valid for StartDateTime.
The value '18/11/2021 11:59 AM' is not valid for ExpirationDateTime.

But if the day(dd) is less than or equal to 12 , the date is accepted. How do I make it accept all dates and in the format I want?

DatePicker

answered on 23 Nov 2021

0 answers

264 views

Create new and Delete operations do not work on my jQuery Grid.

I have API hosted on asp net core, through Swagger and Postman it works just fine, but when I try to access it through Jquery Grid of Kendo it only reads data but doesn't add nor delete.

Can you tell me what am I doing wrong here?

My .NET Controllers:

[HttpDelete]
public async Task<ActionResult> Delete(Guid id)
{
await _mediator.Send(new DeleteProductCommand.Command { Id = id });
return NoContent();
}

[HttpPost]
[ProducesResponseType(StatusCodes.Status200OK)]
public async Task<ActionResult<ProductResponse>> Create([FromBody] CreateProductCommand command) => await _mediator.Send(command);

My Jquery Grid

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://localhost:44393/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Product",
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "/Product/Create",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/Product/Delete",
type: "DELETE",
contentType: 'application/json; charset=utf-8',
dataType: 'json'
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
}
}

},

batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
productName: { type: "string", editable: true },
productSKU: { type: "string", editable: true },
productType: { type: "string", editable: true },
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: {
filterable: false
},

height: 680,
editable: "inline",
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
groupable: true,
filterable: true,
dataBound: onDataBound,
toolbar: ["excel", "pdf", "create", "search", "save", "delete"],
columns: [{
selectable: true,
width: 75,
attributes: {
"class": "checkbox-align",
},
headerAttributes: {
"class": "checkbox-align",
}
}, {
field: "productName",
title: "Product Name",
template: "productName",
width: 300
}, {
field: "productSKU",
title: "productSKU",
width: 105
}, {
field: "productType",
title: "productType",
width: 130,
}, {
field: "id",
title: "id",
width: 105
},
{ command: "destroy", title: "Action", width: 120 }],
});
});

function onDataBound(e) {

} ;

</script>

asked on 23 Nov 2021

2 answers

232 views

CustomEditorTemplate for Scheduler not getting custom fields

Hello,

I'm using custom editor to create/view appointments on scheduler.

My appointments has two custom fields (one from dropdownlist and other from Textbox).

Although, I am able to show the fields on custom editor without any problem, the values are not retrieved from Model. Either when the apponitment is created from custom editor.

I am newbie on this and i don't find any clue on Internet.

Could someone help me?

My main view:

@(Html.Kendo().Scheduler<pruebaCalendario.Models.EventoCalendario>
    ()
    .Name("calendario")
    .Date((DateTime)ViewBag.FechaRef)
    .Views(views =>
    {
        views.MonthView(monthview => monthview.Selected(true));
        views.YearView();
    })
    .Selectable(true)
    .Editable(e => e
        .TemplateName("_customEditorTemplate")
        .Window(w => w.Title("Vacaciones")
        //.Width(800)
        )

    )
    .Messages(m => m
        .Save("Guardar")
        .AllDay("Todo el día")
        .Cancel("Cancelar")
        .ResetSeries("Borrar")
        .Destroy("Borrar")
        //.Date("Fecha")
        .Next("Siguiente")
        .Previous("Previo")
        //.Search("Buscar")
        .Today("Hoy")
        )
    //.EventTemplateId("event-template")
    //.Timezone("Etc/UTC")
    .BindTo(Model)
    .Resources(resource =>
    {
        resource.Add(m => m.Tipo)
            .Title("Tipo")
            .Name("comboTipo")
            .DataTextField("Text")
            .DataValueField("Value")
            .BindTo((System.Collections.IEnumerable)ViewBag.Tipo);

    })
    .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field("Title", typeof(string)).DefaultValue("No title");
                m.Field("Start", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("End", typeof(DateTime)).DefaultValue(DateTime.Now);
                m.Field("Description", typeof(string));
                //    m.Field("recurrenceID", typeof(int));
                //    m.Field("recurrenceRule", typeof(string));
                //    m.Field("recurrenceException", typeof(string));
                //    m.Field("isAllDay", typeof(bool));
                //    m.Field("startTimezone", typeof(string));
                //    m.Field("endTimezone", typeof(string));
                m.Field("Tipo", typeof(string));
                m.Field("Observaciones", typeof(string));
            })
            .Read("Details", "Vacaciones")
            .Create("Create","Vacaciones")

    )
    .Events(ev => ev.Navigate("onNavigate").DataBound("onFinish"))


    )

My custom editor view:

@model pruebaCalendario.Models.EventoCalendario

@using pruebaCalendario.Models

@{
    //required in order to render validation attributes
    ViewContext.FormContext = new FormContext();
}

@functions{
    public Dictionary<string, object> generateDatePickerAttributes(
           string elementId,
           string fieldName,
           string dataBindAttribute,
           Dictionary<string, object> additionalAttributes = null)
    {

        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

        datePickerAttributes["id"] = elementId;
        datePickerAttributes["name"] = fieldName;
        datePickerAttributes["data-bind"] = dataBindAttribute;
        //datePickerAttributes["required"] = "required";
        datePickerAttributes["style"] = "z-index: inherit;";

        return datePickerAttributes;
    }
}

<div class="k-edit-label">
    Inicio:
</div>
<div data-container-for="start" class="k-edit-field">

    @(Html.Kendo().DatePickerFor(model => model.Start)
        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start")))
    @*<span data-bind="text: startTimezone"></span>*@
    <span data-for="start" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    Final:
</div>
<div data-container-for="end" class="k-edit-field">

    @(Html.Kendo().DatePickerFor(model => model.End)
        .HtmlAttributes(generateDatePickerAttributes(
            "endDateTime",
            "end",
            "value:end",
            new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}})))
    @*<span data-bind="text: endTimezone"></span>*@
    <span data-for="end" class="k-invalid-msg"></span>
</div>

<div class="k-edit-label">
    Tipo:
</div>

@{ var x = Model.Tipo; }

<div data-container-for="tipo" class="k-edit-field">
    @(Html.Kendo().ComboBoxFor(model => model.Tipo)
        .Name("comboTipo")
        .DataTextField("Text")
        .DataValueField("Value")
        .BindTo((System.Collections.IEnumerable)ViewBag.Tipo)
    )
</div>

<div class="k-edit-label">
    Observaciones:
</div>

<div data-container-for="observaciones" class="k-edit-field">

    @(Html.Kendo().TextAreaFor(model => model.Observaciones)
        .Rows(3)
    )
</div>

@{
    ViewContext.FormContext = null;
}

My EventoCalendario class (It is used to manage the appointments)

using Kendo.Mvc.UI;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace pruebaCalendario.Models
{
    public class EventoCalendario : ISchedulerEvent
    {       

        public string Title { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public int Id { get; set; }
        public string Tipo { get; set; }
        public string Observaciones { get; set;  }

        public EventoCalendario()
        {
        }

        public EventoCalendario(PeriodoVacaciones per)
        {
            this.Id = per.id;
            this.Title = per.usuario;
            this.Description = per.Tipo;
            this.IsAllDay = per.Tipo == "ENT" ? true : false;
            this.Start = per.fechaIni == null ? DateTime.Now : DateTime.Parse(per.fechaIni.ToString());
            this.End = per.fechaFin == null ? DateTime.Now : DateTime.Parse(per.fechaFin.ToString());
            this.Tipo = per.idTipo;
            this.Observaciones = per.observaciones;
        }


    }

   
}

I'm sure that it have an easy answer but I'm unable to find it :_(

Thx in advance

KR

Editor

Scheduler

answered on 22 Nov 2021

1 answer

273 views

Scheduler with Resources not showing any events

Hi,

after updating to Kendo version v2021.3.1109. when we bind data to a ASP.NET MVC Scheduler that has Resources defined, no events are shown. This is happening after an update from Kendo version: 2017.3..913. In this version everything was working correctly. The error we get in Chrome developer console is:

kendo.all.js:114061 Uncaught TypeError: r[d].get is not a function
    at r.eventResources (kendo.all.js:114061)
    at r._createEventElement (kendo.all.js:116100)
    at r._renderEvents (kendo.all.js:116221)
    at render (kendo.all.js:116300)
    at init.refresh (kendo.all.js:127143)
    at init.e (jquery-3.1.1.min.js:2)
    at init.trigger (kendo.all.js:164)
    at init._process (kendo.all.js:8137)
    at init.success (kendo.all.js:7833)
    at success (kendo.all.js:7724)

We have also updated the jQuery version to the supported 3.6.0 but the error is still the same:

kendo.all.js:114061 Uncaught TypeError: r[d].get is not a function
    at r.eventResources (kendo.all.js:114061)
    at r._createEventElement (kendo.all.js:116100)
    at r._renderEvents (kendo.all.js:116221)
    at render (kendo.all.js:116300)
    at init.refresh (kendo.all.js:127143)
    at init.i (jquery-3.6.0.min.js:2)
    at init.trigger (kendo.all.js:164)
    at init._process (kendo.all.js:8137)
    at init.success (kendo.all.js:7833)
    at success (kendo.all.js:7724)

If we comment out the resources, the events are displayed correctly.

Resource is defined as follows:

resource.Add(m => m.Predmet_Id)
                  .Title("Predmet")
                  .DataTextField("Naziv")
                  .DataValueField("Id")
                  .DataColorField("Barva")
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("Predmet_Dropdown", "Predmeti");
                      })
                          .ServerFiltering(true);

                  });

I am attaching a sample data for the Scheduler.

Scheduler

answered on 22 Nov 2021

4 answers

773 views

Retain Grid Group State After Grid Refresh

I have a grid that is grouped on one particular field and is set to collapse all but the first group in the grid. The end user is able to expand and collapse these groups without issue. Where we run into a problem is when the user performs an action that requires a grid refresh. This (understandably) causes the grid group panels to revert back to their initial collapsed state. Is there a recommended approach for preserving the state of the grid after refresh?

Grid

answered on 20 Nov 2021

1 answer

127 views

Grid "filtering" & loading

I'm trying to display a monthly report of how many times each user performed some action but I'm having trouble with how to filter or load the grid data. The grid has two bound columns, user name and total count, there are two drop downs for the month and year selection, and a button that triggers the "filter" operation on the datasource.

Grid:

@(Html.Kendo().Grid<My.App.UserCount>()
    .Name("UsageReportGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DisplayName).Title("Name");
        columns.Bound(p => p.TotalCount).Title("TotalCount");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(r => r.Action("GetUsageReportData", "Reports"))
    )
)

Filter invocation:

function getUsageReport(e) {
    var monthValue = $("#reportMonth").val();
    var yearValue = $("#reportYear").val();
    var filter = { logic: "and", filters: [] };

    if (monthValue && yearValue) {
        filter.filters.push({ field: "reportMonth", operator: "eq", value: monthValue });
        filter.filters.push({ field: "reportYear", operator: "eq", value: yearValue });
        $("#UsageReportGrid").data("kendoGrid").dataSource.filter(filter);
    }
}

Controller method:

public JsonResult GetUsageReportData([DataSourceRequest]DataSourceRequest request)
{
    int year = GetYear(request);
    int month = GetMonth(request);

    List<UserCount> result = null;
    if (year > 0 && month > 0)
    {
        DateTime startDate = new DateTime(year, month, 1);
        DateTime endDate = new DateTime(year, month, DateTime.DaysInMonth(year, month), 23, 59, 59);
        result = _controller.GetUsageReport(startDate, endDate);
    }
    return this.Json(result.ToDataSourceResult(request));
}

UserCount class:

public class UserCount
{
    public int TotalCount { get; set; }
    public string DisplayName { get; set; }
}

However, when I try running this, I get this error: "System.ArgumentException: 'Invalid property or field - 'reportMonth' for type: UserCount'". I assume that is because there is no "reportMonth" property on the UserCount class but the ToDataSourceResult method attempts to use that property anyway. Is there a way to change how the mapping is done from ToDataSourceResult()? How else can I accomplish this task?

Grid

answered on 16 Nov 2021