Questions on UI for ASP.NET MVC Forum

0 answers

311 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>

BottomNavigation

Button

FloatingActionButton

General Discussions

Grid

TextBox

asked on 23 Nov 2021

2 answers

279 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

325 views

[Solved] 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

859 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

151 views

[Solved] 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

1 answer

419 views

Tile Layout not working

I am trying to implement tile layout in my asp.net mvc5 project. the order of my kendo references in my _layout.cshtml file are:-

When i run the project the tiles are not visible and I get error:

Tiles:114 Uncaught TypeError: jQuery(...).kendoTileLayout is not a function
at HTMLDocument.<anonymous> (Tiles:114)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)

Please provide a solution.

Thanks,Mrinal

TileLayout

answered on 16 Nov 2021

0 answers

128 views

Display Customer values in Kendo grid popup for each row based upon EId

Hi,

I have 2 tables

Emplopyee

...............................

EId EName Country

1 abc India

2 def USA

Customers

........................

CId EId Cname

1 1 aaa

2 1 bbb

3 1 cc

4 2 ee

5 2 ff

right now my requirement is that

display Customer table rows on popup grid based upon EId

Ex:in grid create one hyper link after clicking of that link display customer values for that EId in PopupKendo grid

Grid

asked on 16 Nov 2021

1 answer

788 views

Tab strip tabs with one grid per tab and persistent filters breaks command.Custom buttons

Okay, here is what I have and I'll try to describe it as best I can here.

I have an ASP.NET MVC page that contains a Tab Strip (with 4 tabs). Each one of the tabs contain a kendo.grid. Each grid is basically identical looking with the only difference being the data source it is grabbing the model data. Each grid has 4 buttons defined with command.Custom.

Here is one of the tab/grid sections...

            tabstrip.Add().Text("Product A")
                 .Selected(@bWR)
                 .Content(@<text>
                    @(Html.Kendo().Grid(Model)
                        .Name("updategrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Hidden(true);
                            columns.Bound(p => p.AllowEditDelete).Hidden(true);
                            columns.Bound(p => p.AllowDeploy).Hidden(true);
                            columns.Command(command =>
                            {
                                command.Custom("DeployA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDeploy");
                                command.Custom("EditA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showEdit");
                                command.Custom("EraseA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showErase");
                                command.Custom("DeleteA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDelete");
                            }).Locked(true).HtmlAttributes(new { style = "background-color: lightgrey;" }).Width(125).MinResizableWidth(125); ;
                            columns.Bound(p => p.Product).Width(180);
                            columns.Bound(p => p.Version).Width(100);
                            columns.Bound(p => p.TargetVersion).ClientTemplate("<span title='#= TargetVersion #'>#= TargetVersion #</span>").Width(245);
                            columns.Bound(p => p.Name).Width(100);
                            columns.Bound(p => p.Description).Width(210);
                            columns.Bound(p => p.File).ClientTemplate("<span title='Click to download'><a href='https://*******/updates-blob-container/" + "#= File #'><u>#= File #</u></a></span>").Width(150);
                            columns.Bound(p => p.Created).Filterable(x => x.UI("datePicker")).Width(100);
                            columns.Bound(p => p.Pilot).ClientTemplate("#= Pilot ? '<span style=\"color: green; \">✔</span>' : '' #").Width(100);
                            columns.Bound(p => p.Deployed).Width(120);
                            columns.Bound(p => p.Success).Width(120).ClientTemplate("<font color=green><a href='" + Url.Action("Success", "UpdateQueue") + "/#= Id #'><u>#= SuccessCount # (#= kendo.toString(Success,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Failure).Width(120).ClientTemplate("<font color=red><a href='" + Url.Action("Failure", "UpdateQueue") + "/#= Id #'><u>#= FailureCount # (#= kendo.toString(Failure,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Pending).Width(120).ClientTemplate("<font color=blue><a href='" + Url.Action("Pending", "UpdateQueue") + "/#= Id #'><u>#= PendingCount # (#= kendo.toString(Pending,'n0') #%)<u></a></font>");
                        })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .Pageable(pager => pager.Refresh(true))
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Selectable()
                        .Resizable(resize => resize.Columns(true))
                        .HtmlAttributes(new { style = @styleGrid })
                        .DataSource(datasource => datasource
                            .Ajax()
                            .Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
                            .PageSize(50)
                            .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
                            .Sort(sort => { sort.Add("Name").Ascending(); sort.Add("Version").Ascending(); })
                        )
                        .Events(events => events
                        .DataBound("onDataBoundA")
                        .FilterMenuInit("onFilterMenuInit"))
                    )
                </text>);

This all works fine and tabbing between each grid displays the correct data and the command buttons work fine.

I am trying to introduce persistence on the filters for each grid. Based on other posts I have read here, it seems straightforward. In the onDataBound I have added the getOptions method and saved to local storage.

    function onDataBoundA(e) {
        console.log('onDataBoundA');

        // save the state of each grid.
        localStorage["wrGridOptions"] = kendo.stringify($("#updategrid").data("kendoGrid").getOptions());
}

And then, instead of the $(document).ready(function () I have a onTabSelect function that checks which tab has been selected and then does a setOptions.

    function onTabSelect(e) {
        if ($(e.item).find("> .k-link").text() == 'Product A') {
            var wrOptions = localStorage["wrGridOptions"];
            if (wrOptions) {
                console.log('Loading wr grid options');
                var grid = $("#updategrid").data("kendoGrid")
                grid.setOptions(JSON.parse(wrOptions));
                grid.dataSource.read();
            }
        }
}

The problem is that when I first visit the page and click on any of the command buttons, the appropriate dialog window displays. Then if I select a different tab and click on a command nothing happens. It has lost its click event. If I refresh the page (F5), the command button works. And if I again select another tab, the command button does not.

If I comment out the setOptions code, then the command buttons work normally again, but I lose filter persistence.

Any thoughts on what might be causing this?

Regards,

Shawn

Filter

Grid

TabStrip

answered on 15 Nov 2021

1 answer

452 views

How do I stop kendo editable from generating an empty textbox -- can i destroy on mouse leave?

Hello,

I have a kendo editable grid with one column only. this column adds a textbox rowwhen a button named 'Add' is pressed. If no text is put into the box and the user leaves the textbox an empty row is created.

We had allowed 'required' model validation to trigger the kendo inbuilt validation tooltip however it is not compliant with our UX standards.

I therefore would like to destroy the textbox on the mouse leave if the textbox is empty.

I have tried and failed to find and trigger the mouse leave event.

Here is my grid.

@(Html.Kendo().Grid(Model.MyModelProps)
.Name("myeditabletable")
.ToolBar(tools => tools.Create().IconClass("fas fa-plus").Text("Add").HtmlAttributes( new { @class = "btn btn-primary whiteText" }))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
"<input type='hidden' name='MyModelProps[#= index(data)#].Id' value='#= Id #' />"
);

columns.Bound(p => p.MyModelProp).Title("<b>Synonym</b>").Editable("myeditabletable").ClientTemplate("#= Name #" +
"<input type='hidden' name='MyModelProps[#= index(data)#].Name' value='#= Name #' />"
);

columns.Command(command => command.Destroy().Text(" ")
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
})
.ServerOperation(false)
)
)

Grid

TextBox

answered on 12 Nov 2021

1 answer

626 views

setting grid options with grid.setOptions on load

Hi,

At the moment I am searching for a way to set the options of the grid on load. We use the MVC grid. I know that it is not possible to set the grid options by events or datasource related functions. All examples I see are with a button. I like to set the options on document ready but the grid is undefined then.

Any idea?

Roel

Grid

answered on 12 Nov 2021