Questions on UI for ASP.NET MVC Forum

0 answers

129 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

104 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

234 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

131 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

264 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

179 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

answered on 28 Jun 2022

2 answers

147 views

Dropdownlist Virtualization Guid

How can i use the dropdownlist Virtualization with a guid id?

ComboBox

DropDownList

answered on 27 Jun 2022

1 answer

118 views

How to update Accessibility Name for Filters

We are working on Asp.Net application and using Telerik 2019 version for Grids to display Reports. We are unable to update Accessibility Name for Filter control as Screen Reader application for Disabled people is not able to recognize filters.

Filter

Grid

answered on 27 Jun 2022

0 answers

211 views

How to make datasource send request parameters as JSON

I have a Kendo Grid MVC with columns that need to get their unique list of multi-filter values from the server. So, I am trying to call an MVC controller method passing the field name and a set of filters.

columns.Bound(c => c.SalesRepName)

                    .Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Custom().Transport(t => t.Read(r => r.ContentType("application/json").DataType("json").Type(HttpVerbs.Post).Action("Portfolio_Read_Filter", "Contract").Data("() => getGridFilterParameters('SalesRepName', 'portfolioGrid')")))));

No matter what I do, the datasource sends the request parameters as form instead of sending the parameters as json.

How to force Kendo dataSource to send request parameters as JSON?

Thank you for you help!

Grid