or
0 answers
176 views
I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
I'm using dynamic properties for binding instead of the view model, all the references I've looked at are based on the view model.
Is there any way to accomplish the same with dynamic property binding?
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
.Name("Status")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
Zack
Top achievements
Rank 1
Rank 1
asked
on
10 Jul 2022
0 answers
243 views
I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)
Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@model AzranHawkins.Models.Lead
@(Html.Kendo().DropDownListFor(x => x.Status)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
I also tried
Html.Kendo().DropDownList().Name("Status") instead of Html.Kendo().DropDownListFor(x => x.Status)
Zack
Top achievements
Rank 1
Rank 1
updated question
on
09 Jul 2022
0 answers
161 views
My question might be somewhat loaded. In a viewpage called `CustomView.cshtml`, I have a grid that contains a toolbar holding a `DropDownList`. Right above the `DropDownList` is a `TabStrip`. The `TabStrip` is a seperate `.cshtml` file and within it I'm loading `Items` that make a call to `LoadContentFrom(CustomView)`. For some reason, when I click the tab, the `DropDownList` appears as an input box and I can't figure out why this is happening.
Carlos
Top achievements
Rank 1
Rank 1
asked
on
08 Jul 2022
1 answer
727 views
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.
0 answers
154 views
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
0 answers
218 views
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?
0 answers
174 views
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'> Enviar 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);
} 0 answers
135 views
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
1 answer
293 views
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>
1 answer
184 views
(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!!
Brent
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
28 Jun 2022
