Questions on UI for ASP.NET MVC Forum

1 answer

357 views

Razor Web Application, Keno grid InCell edition using a date picker control unable to return the updated value to server

Need an example of how to use a date picker to change the date field in a Keno grid. The examples I can find only show a dropdown. I have not problem get this to work on the client side. But I can not find anything that show how to return the updated value back to the server.

Razor page:

@(Html.Kendo().Grid<Pages.EditContract>()
.Name("grid")
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(p => p.StartDate);
columns.Bound(p => p.EndDate).ClientTemplate("#=EndDate#").Sortable(false).Width(180).Format("MM/dd/yyyy");
})
.DataSource(ds => ds.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.StartDate).Editable(false);
model.Field(p => p.EndDate).Editable(true);

})
.Read(r => r.Url("/Edit?handler=Read").Data("forgeryToken"))
.Update(r => r.Url("/Edit?handler=Update").Data("forgeryToken"))
.Model(m => m.Id(id => id.Id))
.PageSize(4)
)
//.Events(ev => ev.DataBound("db"))
)

Edit Template:

@model ContractorManagment.Models.Contract

@(Html.Kendo().DatePicker()
.Name("EndDate") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.
.Format("MM/dd/yyyy")
//.Value(Model.EndDate) // Sets the value of the DatePicker.
)

If it was not in a grid all you have to do is set the .Value property. But that does not work when it is in a grid.

Date/Time Pickers

Grid

updated answer on 25 Oct 2021

2 answers

1.3K+ views

Kendo Grid MVC beforeEdit

Hello,

The only way we can access the beforeEdit Event on a kendo grid is with javascript. shouldnt this be accessible through the Kendo.Mvc.UI.Fluent.GridEventBuilder? attached are just images showing that it errors and that we are using Kendo version 2017.2.621.340 as our dll.

the way we did get it to work is by binding it via javascript with this code (for anyone that wants to know how to get this event to work)

$(document).ready(function () {
var grid = $("#BrandsGrid").data("kendoGrid");

grid.bind("beforeEdit", function (e) {
alert("Before Edit");
});

})

but its weird to have 2 of your events using the grid builder and then 1 of your events bound through javascript makes it easy for a developer to miss that the event exists which can lead to them not fully understanding what is happening upon editing the grid.

Thanks,

Thomas

Grid

answered on 25 Oct 2021

1 answer

204 views

Locked column resize fix problem

When the grid is loaded for the first time, the height of the locked column remains constant, the height of the other columns can be changed.

Locked column : " Stok No "

Fixed when changing the width of any column

Grid

answered on 22 Oct 2021

1 answer

164 views

PDF Export not working on iphone Safari

Hello,

I am using the exact example give below in my project:

https://demos.telerik.com/aspnet-mvc/pdf-export

But when i browse this url in my iPhone Safari browser, I am not able to export the PDF. Export as Image and SVG works though. I am seeing the same issue in my project too. Any solution for this?

Thanks

Meera

PDFViewer

answered on 20 Oct 2021

1 answer

827 views

Column value is null only inside client template

Hi! I've been trying to figure this out for days. I have a template that works as detail table of a Kendo grid. Inside this template i have several columns wich data I CAN SEE right. But, one column in particular, that include a client template, is always null. When i get ride of the client template i can see the data on the grid provided by the server, but each time I include the client template, the column is null (html code below)

The first column Adjunto works greats, the seconde one is always null. As it can be seen, there are other client template in the grid that work propery. What can i be doing wrong? Thanks in advance. (I added the view with the two columns righ below)

Grid

answered on 19 Oct 2021

1 answer

621 views

Hide the title in a single column

I would like to hide the last column in my grid.

How can I do this?

Here's my code:

@(Html.Kendo().Grid<GoodNeighbor.Models.TrackingList>()
        .Name("TrackingListGrid")
        .Columns(c =>
        {
            c.Bound(t => t.TrackingListId).Hidden(true);
            c.Bound(t => t.FirstName).Width(115).Title("First Name");
            c.Bound(t => t.LastName).Width(115).Title("Last Name");
            c.Bound(t => t.Email).Width(150);
            c.Bound(t => t.Date).Width(90).ClientTemplate("#= kendo.toString(kendo.parseDate(CreatedDate), 'MM/dd/yyyy') #");
            c.Bound(t => t.Hours).Width(85);
            c.Bound(t => t.VolunteerOrganization).Width(120).Title("Volunteer Organization");
            c.Bound(t => t.ReponseCopy).Width(115).Title("Reponse Copy");
            c.Bound(t => t.Phone).Width(85);
            c.Bound(t => t.Location).Width(85);
            c.Bound(t => t.CreatedDate).Hidden(true);
            c.Bound(t => t.ModifiedDate).Hidden(true);
            c.Bound(p => p.TrackingListId).ClientTemplate("<a href='" + Url.Action("Create", "TrackingList") + "/#= TrackingListId #'" + ">Details</a>"); // Details link
        })
        .HtmlAttributes(new { style = "height: 400px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .Filterable()
        .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(r => r.Action("TrackingListRead", "TrackingList").Data("sendAntiForgery"))
            .Model(model => model.Id(p => p.TrackingListId))
            .Events(events => events.Error("onError"))
        )
    )

Grid

answered on 19 Oct 2021

1 answer

1.2K+ views

TextBox autocomplete attribute gets set to 'off'

I want browsers to offer autocomplete suggestions for a kendo TextBox I have on a form, but it always renders with autocomplete="off" no matter what I set it to in HtmlAttributes config. How do I make it work?

TextBox

answered on 18 Oct 2021

1 answer

116 views

Removed hierarchy cells reappearing after parent grid is filtered or page is changed

I have the following js function that is called during the dataBound event of the parent grid to remove any hierarchal cells, for readability of the users. So they don't have to expand every row to see that there is no data.

function removeHierarchyCell() {
    var data = $('#GridName').data('kendoGrid').dataSource.data();

    // Remove row expansion when no data
    $.each(data, function (i, row) {
        var hasChildren = row.get("ChildModel");

        if (hasChildren === null || hasChildren === undefined || hasChildren.length == 0) {
            $('tr[data-uid="' + row.uid + '" ] ').find(".k-hierarchy-cell a").remove();
        }
    });
}

It works as it should when the page loads, the issue comes when the parent grid is either filtered or on page change. When the grid populate the rows they now have the expand icon in the hierarchy-cell. I've tried several things but these elements always appear after any operation on the parent grid.

Is there some way to keep these removed from the parent grid?

Filter

Grid

answered on 18 Oct 2021

2 answers

405 views

Apply css class to TreeViewItemModel MVC

Hello.

I'm trying to put different color text (and style) on TreeView node item.

I just found that this is archieved with SpriteCssClass property on TreeViewItemModel class but it seems that It is not working.

My view:

<h2>Index</h2>

<script>
    kendo.culture("es-ES"); //week start day depends on the used kendo culture
</script>

@section Menu {
        <h4>Departamento</h4>
        @(
            Html.Kendo().TreeView()
                    .Name("left-menu")
                    .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.depts)
                    .DataSpriteCssClassField("SpriteCssClass")
                    .Events(ev => ev
                        .Select("onSelect")
                        )
        )
}

My CSS file:

/* Treeview Departamentos */

.deptRoot {
    color: dodgerblue;
    font-weight: bold;
}

.deptSub {
    color: cadetblue;
    font-weight: bold;
}

.empSup {
    color:indianred;
    font-weight: normal;
}

.empleado {
    color: white;
    font-weight: normal;
}

This is my JSON Tree data passed by ViewBag.depts var:

[
  {
    "Enabled": true,
    "Expanded": false,
    "Encoded": true,
    "Selected": false,
    "Text": "Informática",
    "SpriteCssClass": "deptRoot",
    "Id": "1#48",
    "Url": null,
    "ImageUrl": null,
    "HasChildren": true,
    "Checked": false,
    "Items": [
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Soporte",
        "SpriteCssClass": "deptSub",
        "Id": "2#1001",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "RAUL MORENO RAMIREZ",
            "SpriteCssClass": "empSup",
            "Id": "3#221",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "BRIAN SALAZAR MUÑOZ",
                "SpriteCssClass": "empleado",
                "Id": "4#585",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Desarrollo",
        "SpriteCssClass": "deptSub",
        "Id": "2#1002",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "GUILLEM ALBERT JULVE SEGOVIA",
            "SpriteCssClass": "empSup",
            "Id": "3#292",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": false,
            "Checked": false,
            "Items": [

            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "MTRANS",
        "SpriteCssClass": "deptSub",
        "Id": "2#1003",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "CARLOS LUNA PACHECO",
            "SpriteCssClass": "empSup",
            "Id": "3#40",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "ALBERT FERRANDIZ ISERTE",
                "SpriteCssClass": "empleado",
                "Id": "4#576",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      }
    ],
    "HtmlAttributes": {

    },
    "ImageHtmlAttributes": {

    },
    "LinkHtmlAttributes": {

    }
  }
]

All items have the same text color. Where is the mistake?

Thx in advance for who resolve this ;)

KR

TreeView

answered on 11 Oct 2021

0 answers

228 views

Kendo Scheduler (Wrong Appointment Time Shown on Calendar) Asp.Net MVC

Hi ,

I am Using kendo scheduler
I am facing issue wrong appointment time is shown on the calendar. The appointment is Stored in Database as Datetime.
and I'm retrieving the database value and showing values in kendo scheduler control
here in my local solution its showing correct data time (database value : 5 PM Indian timing Its showing correctly)

but in server side its showing wrong time(UK Timimg, Its showing wrong time)

Scheduler

asked on 11 Oct 2021