Questions on UI for ASP.NET MVC Forum

0 answers

119 views

Test box visible instead of Dropdown in custom editor for dynamic properties

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%" })
                        )

DropDownList

Editor

General Discussions

Grid

ListBox

asked on 10 Jul 2022

1 answer

128 views

Telerik mvc list box with grid lines and scrolling

Hi Team,

I need to show my list items separated by line so is it possible to have grid lines ?

Please provide the sample for custom messages as well.

Thanks & Regards,

sp.

ListBox

answered on 29 Jul 2021

4 answers

296 views

ListBox - Navigate to item with keyboard typed letter

Hi Team,

We are using Kendo ListBox in our application. This can have, say a list of countries. Once user types a letter, the first record with that letter should be selected (similar behaviour like in dropdowns). Please advise how this can be achieved.

Thanks,

Faraaz

ListBox

answered on 10 Feb 2021

3 answers

677 views

how to filter in a ListBox

Good day.

I am trying to make a filter to a ListBox, but I have not gotten it to work for me, could you please help

the listBox

@(Html.Kendo().ListBox()
.Name("lstBuscarMenu")
.HtmlAttributes(new { style = "width:100%;height:700px;"})
.DataTextField("Nombre")
.TemplateId("customer-item-template")
.BindTo(ViewBag.Menus)
)

the planitlla
<script id="customer-item-template" type="text/x-kendo-template">
<span class="k-state-default"><strong>#: data.Nombre #</strong><p style="font-size:0.6rem;">#: data.Seccion #</p></span>
</script>
the javascript
var dataSourceMenu = null;
$("#txtBuscarMenu").keyup(function(e) {
var texto = $("#txtBuscarMenu").val();
var grid = $("#lstBuscarMenu").data("kendoListBox");
if (dataSourceMenu === null) {
dataSourceMenu = grid.dataItems();
}
if (texto.length === 0) {
grid.setDataSource(dataSourceMenu);
}
else {
grid.setDataSource(dataSourceMenu.find(x => x.Nombre.indexOf(texto) > -1));
}
});
best regards

ListBox

answered on 25 Nov 2020

6 answers

2.5K+ views

Passing data to controller for 'selected' listbox

Hello,

I'm working on a project where I'm trying to use the Listbox. My end goal is to have the items in the 'selected' listbox passed to a POST controller.

Controller.cs

01.[HttpGet]

02. public ActionResult Create()

03. {

04. List<SelectListItem> memberList = MemberRepository.ListAllMembers(request);

05. ViewBag.memberList = memberList;

06.

07. return View("Create", new MemberSelection());

08. }

09. [HttpPost]

10. [ValidateAntiForgeryToken]

11. public ActionResult Create(MemberSelection m)

12. {

13. if (ModelState.IsValid)

14. MemberRepository.Create(request);

15. else

16. return View("Create",m);

17. return RedirectToAction("Members");

18. }

Create.cshtml

001.@model MembersDomain.Entities.Member

002.

003.@{

004. ViewBag.Title = "Create";

005. Layout = "~/Views/Shared/_Layout.cshtml";

006.}

007.

008.@if (!Html.ViewData.ModelState.IsValid)

009.{

010. <div class="alert alert-danger" id="validationSummary">

011. @Html.ValidationSummary()

012. </div>

013.}

014.<div class="row" style="margin-top: 25px;">

015. <div class="col-lg-12">

016. <h4>Select Members</h4>

017. </div>

018.</div>

019.<div class="row" style="margin-top: 25px;">

020. <div class="col-lg-12">

021. <p>Use this form to add members to a group.</p>

022. </div>

023.</div>

024.@using (Html.BeginForm("Create", "Members", FormMethod.Post, new { id = "create" }))

025.{

026. @Html.AntiForgeryToken()

027. @Html.ValidationSummary()

028.

029. <div class="row" style="margin-top: 25px;">

030. <div class="col-lg-12">

031. <strong>Selected Members:</strong>

032. </div>

033. </div>

034. <div class="row" style="margin-top: 25px;">

035. <div class="col-lg-12">

036. <div id="example" role="application">

037. <div class="demo-section k-content wide">

038. <label for="optional" id="allMembers">All Members</label>

039. <label for="selected">Selected</label>

040. <br />

041. @(Html.Kendo().ListBox()

042. .Name("optional")

043. .Toolbar(toolbar =>

044. {

045. toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);

046. toolbar.Tools(tools => tools

047. .TransferTo()

048. .TransferFrom()

049. .TransferAllTo()

050. .TransferAllFrom()

051. );

052. })

053. .HtmlAttributes(new { title = "AllMembers" })

054. .ConnectWith("selected")

055. .BindTo(ViewBag.memberList)

056. )

057.

058. @(Html.Kendo().ListBox()

059. .Name("selected")

060. .HtmlAttributes(new { title = "SelectedMembers" })

061. .BindTo(new List<SelectListItem>())

062. .Selectable(ListBoxSelectable.Multiple)

063. )

064. </div>

065. </div>

066. </div>

067. </div>

068. <div class="row" style="margin-top: 25px;">

069. <div class="col-lg-12">

070. <p><a class="btn btn-primary btn-lg" href="#" onclick="document.getElementById('create').submit()">Submit</a></p>

071. </div>

072. </div>

073.}

074.

075.<style>

076. .demo-section label {

077. margin-bottom: 5px;

078. font-weight: bold;

079. display: inline-block;

080. }

081.

082. #allMembers {

083. width: 270px;

084. }

085.

086. #example .demo-section {

087. max-width: none;

088. width: 515px;

089. }

090.

091. #example .k-listbox {

092. width: 236px;

093. height: 310px;

094. }

095.

096. #example .k-listbox:first-of-type {

097. width: 270px;

098. margin-right: 1px;

099. }

100.</style>

101.

102.<script type="text/javascript">

103. function sendAntiForgery() {

104. return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }

105. }

106.</script>

I am using Visual Studio 2015 and the project is ASP.NET MVC. Any insight is appreciated!

ListBox

answered on 19 Jul 2019

1 answer

103 views

Scroller (vertical) doesn't work

Using Kendo.mvc 2019 R2 in a mvc5 app

On a listbox, I can scroll by clicking in the scroll background, or with the arrows at either end of the scrollbar, but if I try to click drag the scroll thumb, it doesn't scroll.

Am I missing something?

ListBox

answered on 28 May 2019

2 answers

94 views

After Added Event

Is there any way to detect an event AFTER an item has been added to a ListBox? The existing add event fires before the item is added.

My use case is that I have two connected ListBoxes. The second listbox contains a template that I need to run some jQuery in to modify the contents based on the item data, so the item needs to have been created before the script is run?

ListBox

answered on 07 May 2019

3 answers

2.0K+ views

Listbox binding to model

We are working on a Kendo UI with Kendo Listbox (asp.net MVC - https://demos.telerik.com/aspnet-mvc/listbox) but the example is for
@html.Kendo().ListBox() rather than having @html.Kendo.ListBoxFor() where @html.Kendo.ListBoxFor() allows for the model to be BindTo to selected items

Is there a way a ListBox can be used to bind to a model rather than an IEnumerable so that we can pass data back and forth via the model

ListBox

answered on 29 Apr 2019

1 answer

533 views

Getting ListBox Item Sequence

I have a listBox that I can manually sort using the toolbar buttons. The ListBox is in a form, so when I submit a form, the items in that list box get submitted as an int array. However, regardless of how I sort the ListBox, the array of items is always in the same order. I assume that, as there is functionality to interactively sort a list box, there is a method to get that sequence out. I can't find an example of how this might be achieved in the context of a listbox in a form. Could you provide some pointers? Thanks.

Ian Parsons.

ListBox

answered on 22 Apr 2019

4 answers

1.6K+ views

Programatically set Listbox value

I have a Kendo ListBox that I need to set a single item selected through a JavaScript function. I know both the text and value that I want to set, but can't figure out how. Any help appreciated!

Steve.

ListBox

answered on 18 Mar 2019