Questions on UI for ASP.NET MVC Forum

1 answer

602 views

kendo MVC wrapper grid. How do i specify the data type of a nested model field?

I've seen examples in doing this in kendo ui
https://docs.telerik.com/kendo-ui/knowledge-base/use-nested-model-properties
but i can't figure out how in mvc. I have two nested fields that i need to force the grid to treat as dates.

Filter

Grid

answered on 08 Jul 2022

0 answers

121 views

I'm using kendo grid in asp.net MVC an passing parameter to child grid.

I want to add a bar chart to the child grid view and use the same parameter that I passing from the parent grid.

Is that possible?

And how can I do it.

I've been searching, but didn't find anything.

Thanks

Chart

Grid

asked on 07 Jul 2022

0 answers

177 views

Disable drag and drop from taskboard

I'm thinkin on develop a taskboard but I would need to disable the drag and drop event, because I want to show some tasks on it, just to have clear information about the performance of my team. Can I disable drag and drop from Taskboards? Or maybe do I have to use another Telerik component?

TaskBoard

asked on 07 Jul 2022

0 answers

141 views

Prev and next buttons on the registration form

Hello,

My web application has a grid and in each line there is an edit button that opens a popup with a registration form as shown in the image.

1. I would like to configure the prev and next buttons to cycle through the database records

I saw an example exactly how I wanted it to be but I couldn't implement it

https://dojo.telerik.com/EBepu

Grid:

@(Html.Kendo().Grid<SgmWebEsocial.Models.FuncionarioViewModel>()
            .Name("Funcionarios")
            .Columns(columns =>
            {
                columns.Bound(p => p.PessoaFisica_FotoPessoa)..Width(70).Filterable(false).Sortable(false);
                columns.Bound(p => p.Pessoa_Nome).Width(200).Title("Nome");
                columns.Bound(p => p.MatriculaFuncionario).Width(80).Title("Matrícula");
                columns.ForeignKey(c => c.IdNivelCargo, (System.Collections.IEnumerable)ViewData["nomeCargo"], "IdNivelCargo", "NomeCargo").Title("Cargo").Width(120);
                columns.ForeignKey(c => c.TipoSituacaoFuncionario, (System.Collections.IEnumerable)ViewData["tipoSituacaoFuncionario"], "IdTipoSituacaoFuncionario", "NomeTipoSituacaoFuncionario").Title("Situação").Width(90);
                columns.ForeignKey(p => p.IndicativoTipoEnvioEsocial, (System.Collections.IEnumerable)ViewData["envioEsocial"], "IdTipoEnvioEsocial", "NomeTipoEnvioEsocial").Title("Esocial").Width(80);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
                columns.Bound(p => p.IdFuncionario).Title("Ação").ClientTemplate("<a onclick=\"showProgress()\" href='" + @Url.Action("ExportEsocial", "Funcionario", new { idFuncionario = "#=IdFuncionario#" }) + "' class='k-button'>&nbspEnviar eSocial</a>").Width(70);
            })
                //.Events(e => e.Edit("onEdit"))
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CadFuncionario").Window(w => w.Title("Cadastro de Funcionários").Width(1100)))
                .Pageable()
                .Sortable()
                .Filterable()
                .Scrollable(scr => scr.Height(450))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(6)
                    .Events(events => events.Error("error_handler"))
                    .Model(model =>
                    {
                        model.Id(p => p.IdFuncionario);
                    })
                    .Create(update => update.Action("AdicionaFuncionario", "Funcionario").Data("sendAntiForgery"))
                    .Read(read => read.Action("ListaFuncionario", "Funcionario"))
                    .Update(update => update.Action("EditaFuncionario", "Funcionario").Data("sendAntiForgery"))
                    .Destroy(update => update.Action("RemoveFuncionario", "Funcionario").Data("sendAntiForgery"))
                            .Sort(sort =>
                            {
                                sort.Add(p => p.Pessoa_Nome);
                            })
                )

            )

Controller:

//Fill in the form
[KendoGrid]
        public virtual JsonResult ListaFuncionario([DataSourceRequest] DataSourceRequest request)
        {
            var context = new DbSgmContext();
            var pessoaFisica = context.PessoasFisicas;

            var result = funcionario.ToDataSourceResult(request, u => new FuncionarioViewModel
            {
                //Data Table Pessoa
                Pessoa_Nome = u.Pessoa.Nome,
                Pessoa_DDD = u.Pessoa.DDD_Telefone,
                Pessoa_DDD_Celular = u.Pessoa.DDD_Celular,
                Pessoa_Celular = u.Pessoa.Celular,
                Pessoa_Telefone = u.Pessoa.Telefone,
                Pessoa_Email = u.Pessoa.Email,
                Endereco_Numero = u.Pessoa.NumeroEndereco,
                Endereco_Complemento = u.Pessoa.Complemento,
  //Data Table PessoaFisica
                PessoaFisica_FotoPessoa = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).FotoPessoa,
                PessoaFisica_CPF = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).CPF,
                PessoaFisica_DataNascimento = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).DataNascimento,
                PessoaFisica_NomeSocial = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).NomeSocial,
                PessoaFisica_TipoSexo = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).TipoSexo,
                PessoaFisica_NomePai = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).NomePai,
                PessoaFisica_NomeMae = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).NomeMae,
                PessoaFisica_EstadoCivil = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).IdTipoEstadoCivil,
                PessoaFisica_RacaCor = pessoaFisica.Single(pf => pf.IdPessoa == u.IdPessoa).IdTipoRacaCor,
            });

            returnthis.Json(result);
 }

Button

Form

Grid

asked on 02 Jul 2022

0 answers

113 views

Is it possible to have an edit grid button on another page?

Hello, I have a kendo grid in /employees/grid where there is an edit button on the line opening an edit popup

1. Would you like to put this button on another page /consultation/paycheck to open this edit popup?

2. or open this grid /employees/grid in a popup on another page?

thank you

Grid

Toolbar

asked on 02 Jul 2022

1 answer

252 views

How to get the Telerik MVC5 VS 2019 grid column headers to scroll with the content?

Hi, I saw earlier posts about this, but this for an (MVC5 grid, VS 2019, Latest version)

I have no java script errors as suggested as a solution from 2014 posts.

I load the Telerik MVC grid partial view into a div 'lcContent' using $("#lcContent").load(url);

Tried it in both chrome and edge, seems the scrolling is fine if I run it stand alone (i.e. not inside the the confines of the lcContent div)

Thx

I have

In my _Layout file

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title</title>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<link rel="shortcut icon" href="@Url.Content("~/favicon.ico")" ; />

<link href="https://cdn.kendostatic.com/2022.2.621/styles/kendo.classic-silver.min.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="https://cdn.kendostatic.com/2022.2.621/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2022.2.621/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>

and in the Index view a side bar menu (UL + Li) and a content pane, as per beneath

with

.lcContent {
transition: margin-left .5s;
padding: 10px;
height: 900px;
width: 90%;
display: block;
overflow-y: hidden;
overflow-x: hidden;
left: 0px;
}

 <style>
    button.k-button {
        background-color: darkgrey !important;
        color: forestgreen
    }

    .k-grid-toolbar {
        /* background-color: lightslategrey !important;*/
    }

    th.k-header {
        color: white;
        background-color: darkslategray !important;
    }

    div.k-grouping-header {
        background-color: gainsboro !important;
    }

    tr.k-master-row {
        background-color: white !important;
        color: blue;
    }

    tr.k-master-row:active, tr.k-master-row:hover {
        background-color: lightgrey !important;
    }

    tr.k-alt {
        color: white;
        background-color: lightcyan !important;
        color: darkblue;
    }

    span.k-icon, k-i-filter {
        background-color: gainsboro !important;
    }

    tr.k-alt:active, tr.k-alt:hover {
        color: darkblue !important;
        background-color: lightgrey !important;
    }

    input.k-input-inner {
        /* background-color: gainsboro !important;*/
    }

    span.k-filtercell {
        /*background-color: red !important;*/
    }

    th {
        background-color: lightslategray !important;
    }

    span.k-operator-hidden {
        display: none;
    }

    div.k-grid-content {
       /* height: 80% !important;*/
    }

    .k-grid tbody tr {
        line-height: 14px;
    }

    .k-grid tbody td {
        padding: 0;
    }

    .k-grid {
        overflow-y: hidden;
        height: 900px;
        min-height: 600px;
       /* width: 2700px;
        max-width: 2800px;*/
        width: 98%;
        max-width: 99%;
        padding-left: 10px;
    }

    .k-button{    }
    .k-grid-Edit{    }
    td.k-command-cell{     }
    .k-button-text{    }
    .k-filter-row{   /* has multiple th beneath it, with a span in them, with k-filter-cell class*/
    }

</style>


 <div id="lcContent" class="lcContent" > 

        <div class="text-left" style=" width: 100%;">
          @(Html.Kendo().Grid(Model)
            .Name("LeasedTenements")
            .Reorderable(reorder => reorder.Columns(true))
            .Columns(columns =>
            {
                columns.Command(command => command.Custom("Edit").Click("Edit")).Width(180);
                columns.Bound(c => c.ID).Hidden();
                columns.Bound(c => c.Lease).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                columns.Bound(c => c.Name).Width(150).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

                columns.Bound(c => c.LocalityType).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));
                columns.Bound(c => c.Locality).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").SuggestionOperator(FilterType.Contains)));

                columns.Bound(c => c.Status).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.InternalStatus).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));

                columns.Bound(c => c.CurrentArea).Width(250).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.AreaType).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.MineralField).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));
                columns.Bound(c => c.Commodity).Width(150).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false)));

                columns.Bound(c => c.GovtOffice).Width(200);
                columns.Bound(c => c.AppliedArea).Width(200);
                columns.Bound(c => c.GrantedArea).Width(200);
                columns.Bound(c => c.AreaSurveyed).Width(100);
                columns.Bound(c => c.CurrentCommitment).Width(200);
                columns.Bound(c => c.NextYearCommitment).Width(200);
                columns.Bound(c => c.CurrentRent).Width(200);
                columns.Bound(c => c.NextYearRentAmount).Width(200);
                columns.Bound(c => c.NextYearRentAmount).Width(200);
                columns.Bound(c => c.Project).Width(200);
                columns.Bound(c => c.CostCode).Width(150);
                columns.Bound(c => c.ManagingCompany).Width(200);
                columns.Bound(c => c.Operator).Width(200);
                columns.Bound(c => c.LeaseManager).Width(200);
                columns.Bound(c => c.ResponsibleParty1).Width(200);
                columns.Bound(c => c.ResponsibleParty2).Width(200);
                columns.Bound(c => c.Region).Width(200);
                columns.Bound(c => c.TotalShares).Width(150);
                columns.Bound(c => c.Comments).Width(200);
                columns.Bound(c => c.LastUpdate).Width(10);
                columns.Bound(c => c.ByWhom).Width(150);
                columns.Bound(c => c.LinkLeaseID).Width(150);

            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
                toolbar.Create();
                toolbar.Save();
            })

            .HtmlAttributes(new { style = "width: 99%;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.ID);
                    model.Field(p => p.ID).Editable(false);
                    model.Field(p => p.Lease).Editable(true);
                    model.Field(p => p.Lease).DefaultValue(
                        ViewData["defaultObjections"] as Demo.Mvc.ViewModels.vmTenementObjected);
                    model.Field("GrantDate", typeof(DateTime));
                    model.Field("GrantArea", typeof(int));
                })
            .Create(create => create.Action("EditingCustom_Create", "Objections"))
            .Update(update => update.Action("EditingCustom_Update", "Objections"))
            .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Objections"))
            )

         .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
         .Reorderable(reorderable => reorderable.Columns(true))

        )

</div>


   </div>

Grid

Styling

answered on 30 Jun 2022

1 answer

150 views

Kendo MVC (version 2021.2.616.545) - Jquery updates NumericTextBoxFor, but GUI doesn't reflect until you click on the NumericTextBox

(as the title says) We updated an app including going to Kendo.Mvc (now Version 2021.2.616.545) and on one page we use Jquery to recalculate a total which is a NumericTextBoxFor. The GUI doesn't reflect, but when you click on the NumericTextBox the correct amount appears. I tried to use focus and changed event but neither seem to help.

Any ideas why this is occurring?

TIA!!

NumericTextBox

answered on 28 Jun 2022

0 answers

296 views

Kendo Dropdown Group field overlaps the options of the dropdown

Hello everyone,

I am using the kendo dropdown list with grouping. I am attaching a screen here with some red borders. The red boxes contain a group of the dropdown list which has a longer length than usual ones and overlaps the main option of the dropdown list.

I am adding a reference link also –

https://demos.telerik.com/aspnet-mvc/dropdownlist/grouping

DropDownList

asked on 28 Jun 2022

1 answer

195 views

Nuget package without client-side resources

Is there a nuget package for ASP.NET MVC that excludes the client-side resources? Due to my dev machine setup, source control bindings and other factors, it takes a very long time to update the kendo Content & Script files any time I update the Kendo nuget package. Having a nuget package for ASP.NET MVC without client side resources (in the same way as the ASP.NET Core package) would help greatly. Even if it's just steps that I can take to create a custom package from an existing release that removes the files in question.

Thanks

Installer and VS Extensions