Telerik Forums
UI for ASP.NET MVC Forum
1 answer
27 views

Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.


                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
                                 )

I've searched for this issue and tried some suggested things but with no success: 


                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(ds => ds.Custom()
                                            .Transport(t => t
                                                .Read(r => r
                                                    .Action("AvailableUsers", "UserApi")
                                                    .Data("{ any: false }")
                                                )
                                            )
                                            .Sort(s => s
                                                .Add("Value")
                                                .Descending()
                                            ))
                                
                            )


 public JsonResult AvailableUsers()
 {
     var userRepo = new UserRepository(ntfy);
    var result = userRepo.GetAll().Select(_ => new SelectListItem
           {
                Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
                Value = _.Id.ToString()
           });
     return this.Json(result, JsonRequestBehavior.AllowGet);
 }
Anton Mironov
Telerik team
 answered on 13 Nov 2023
0 answers
23 views

Hello,

I was wondering if there is a way to change the asp.net mvc data grid checkbox selection option's image from a checkbox to say, a star.

Or would I need to essentially rebuild the functionality through a custom template?

 

Thanks

Jimmy
Top achievements
Rank 1
 asked on 02 Nov 2023
1 answer
49 views

I'm upgrading a project from 2021.2.511 to 2023.2.829 and I have a page which is extremely data heavy. Using the  .Size(ComponentSize.Small) option still results in a much larger drop-down list than before.

How can I reduce the size of these drop-downs further? In the old version, they simply inherited the font-size of the parent div.

 

This also applies to the multiselect controls as well

Ivan Danchev
Telerik team
 updated answer on 04 Oct 2023
0 answers
155 views

I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.

Please help.

This is how i have prepared my grid :

$("#ListofMF").kendoGrid({
            dataSource: {
                data: extractedData,
                schema: {
                    model: {
                        fields: {
                            Id: {type: "integer"},
                            FullName: { type: "string" },
                            Temp1: { type: "boolean" },
                            Temp2: { type: "boolean" },
                            Industry: { type: "string" },
                            //Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            //scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: true,
                pageSize: 6
            },
            columns: [
                {
                    title: " ",
                    width: 30,
                    field: "Id",
                    hidden: true
                },
                {
                    title: " ",
                    width: 40,
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="isMFSelected"/>'
                },
                {
                    field: "FullName",
                    title: "Data",
                    //width: "140px",
                    headerAttributes: { style: "font-weight: bold;" }
                },
                {
                    field: "Temp1",
                    title: "Temp 1",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
                },
                {
                    field: "Temp2",
                    title: "Temp 2",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
                },
                {
                    field: "Industry",
                    title: "Industry",
                    editor: function (container, options) {
                        // Get the industry template and apply it to the column editor
                        console.log(container.html);
                        var industryTemplate = $("#industryTemplate").html();
                        container.html(industryTemplate);
                    }
                }
            ]
        });
And in another script tag i am preparing the multiselct widget

<script id="industryTemplate" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
        .Name("Industry")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
    )
</script>
My output on screen for Industry column always remains like :


Biswajit
Top achievements
Rank 1
 asked on 22 Aug 2023
1 answer
57 views

Model for the Tag property is of complex type object 


 [UIHint("TaskTagEditor")]
 public List<NameId> TaskTags { get; set; }

// Class ----

    public class NameId
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

Kendo grid field: 


    columns.Bound(p => p.TaskTags).Width(240).ClientTemplate("#=taskTagsTemplate(TaskTags)#").EditorTemplateName("TaskTagEditor").Title("Tasks")
                                                        .Filterable(p => p.Multi(true)
                                                                    .CheckAll(false)
                                                                    .ItemTemplate("TaskTagsFilterItemTemplate")
                                                                    .DataSource(d =>
                                                                    {
                                                                        d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager"));
                                                                    })
                                                    );

 

Client Template and Item template js:


    function taskTagsTemplate(data) {
        var template = "";
        for (var i = 0; i < data.length; i++) {
            template += (data.length == 1 || i == 0) ? data[i].Name : ("," + data[i].Name);
        }
        return template;
    }

    function TaskTagsFilterItemTemplate(e) {
        return "<span><label><input class='tag-filter-input' type='checkbox' name='" + e.field + "' value='#= Id #'/><span>#= Name #</span></label></span><br/>"
    }

 

Editor :

GetTaskTagsEditor


@model List<GrapeTree.Core.Model.TaskManager.NameId>

@(Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("Name")
        .DataValueField("Id")
        .AutoBind(false)
        .TagMode(MultiSelectTagMode.Multiple)
        .DataSource(d =>
                {
            d.Read(read => read.Action("GetTaskTagsEditor", "TaskManager"));
        })
)

Controller method for option:


        public ActionResult GetTaskTagsEditor() {

            var tagList = _taskManager.GetActiveTaskTags()
                 .Select(tag => new NameId
                 {
                     Id = tag.Id,
                     Name = tag.Name

                 }).OrderBy(x => x.Name);

            var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new DefaultContractResolver() };
            var json = JsonConvert.SerializeObject(tagList.ToList(), Formatting.Indented, jsonSerializerSettings);

            return Content(json, "application/json");
        }

Incell Editor is working fine  and Filter about to bind with muti select value but filtering doesn't work for this complex object

Milena
Telerik team
 answered on 24 Oct 2022
1 answer
63 views

Currently I have two buttons assigned to the HeaderTemplateId for my MultiSelectFor Kendo control, I'm able to navigate to the items in the list but would also like to tab into or use arrow keys to navigate to the header template as well. I couldn't find any documentation for this particular use case, is there functionality to enable keyboard navigation for the header template?

MultiSelectFor control:

@(Html.Kendo().MultiSelectFor(model => model.Name).Name("MultiSelect1")
                              .Placeholder("Select item")
                              .DataTextField("Text")
                              .DataValueField("Value")
                              .HeaderTemplateId("HeaderTemplate")
                              ...
                    )
described HeaderTemplate:
<script type="text/x-kendo-template" id="HeaderTemplate">
    <button class="k-button" onclick="SomeFunctionA(this)">Select All</button>
    <button class="k-button" onclick="SomeFunctionB(this)">Remove All</button>
</script>


Ivan Danchev
Telerik team
 answered on 23 Aug 2022
1 answer
1.2K+ views

I'm updating an application (based on version v2021.2.511) porting bits of code to a new application based on v2022.2.510). I'm trying to get a multi-select drop-down list with checkboxes working.  The requirment is for the check boxes to be checked if an item in the list is selected, and unchecked if it is unselected.

The following styles were added:-


<style type="text/css">

    @*.EditButton {
        display:@ViewBag.EditButton;
    }*@

    .nopadding {
   padding-left: 0 !important;
    padding-right: 0 !important;

}

 .k-multiselect:after {
         content: "\25BC";
         position: absolute;
         top: 30%;
         right: 10px;
         font-size: 10px;
     }

    .k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
  {
    display: none !important;
  }

}
</style>

<style scoped>

    .k-widget.k-multiselect {
        width: 300px;
        vertical-align: middle;
        display: inline-block;
    }
</style>

The multiselect definition is:-


 @(Html.Kendo().MultiSelect()
                                .Name("msSpecialty")
                                .DataValueField("Code")
                                .DataTextField("Description")
                                    .Placeholder("All specialties...")
                                    .ItemTemplate("<input type='checkbox' /> #=data.Description#")
                                    .AutoClose(false)
                                    .ClearButton(false)
                                    .TagMode(TagMode.Multiple)
                                //.TagTemplate(" <span>#= Description #</span>")

                                .Events(e => e.Close("onSpecListChange").DataBound("specListDataBound").Change("chkFix"))
                                .DataSource(src => src.Read(rd => rd.Action("getOpenClockSpecDDL", "Validation")).ServerFiltering(false))
                                    .HtmlAttributes(new { style = "width:300px;" })
                        )

And the javascript:-


 var currentSpec = '-X-';

 function onSpecListChange() {
        var items = this.ul.find("li");
        checkInputs(items);
        //check if list has changed since last close, if so, fire change event (Avoids unnescessary requeries)

        var multiselect = $("#msSpecialty").data("kendoMultiSelect");
        var Svalue = multiselect.value().sort();

        var SpecString = "";

        if (Svalue != null & Svalue != '') {


            for (i = 0; i < Svalue.length; i++) {
                SpecString = SpecString + Svalue[i] + "|";
            }

        }
        else {
            SpecString = "-X-";
        }



        if (currentSpec != SpecString) {
            onChange();
        }




    }

    function checkInputs(elements) {
        elements.each(function () {
            var element = $(this);
            var input = element.children("input");

            input.prop("checked", element.hasClass("k-state-selected"));
        });
    }

    function specListDataBound() {

        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });

    }

    function chkFix() {
        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });
    }

 function onChange()
    {

    }

I assume the styles have changed between the versions, because this code is not working. The checkboxes aren't being checked on selection, the list doesn't close when clicked away from, and the closed multiselect isn't displaying properly.  How can I get it working as it was please?

Ivan Danchev
Telerik team
 answered on 20 May 2022
2 answers
502 views

I have a simple multiselect like so:

@(Html.Kendo().MultiSelectFor(x => x.CourseId)
      .DataValueField("Id")
      .DataTextField("Name")
       .Placeholder("Select Course...")
      .ClearButton(false)
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCourseCodeList", "Home");
          })
          .ServerFiltering(true);
      })
      .MaxSelectedItems(1)
      .HtmlAttributes(new { @class = "" }))

When I enter text, the search is submitted once with the text entered, then a second time with the Placeholder text, or if no Placeholder, with empty string.

public JsonResult GetCourseCodeList(string text, int categoryId=0)
{
    var items = _courseData.Where(x =>
        x.Name.Contains(text) &&
        (categoryId == 0 || x.CategoryId == categoryId)).OrderBy(x => x.Name).ToList();
 
    var userinput = text;
 
    var result = new JsonResult
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = items
    };
    return result;
}

A sample project replicating the issue is here : https://github.com/SteveWortho/TLCKendoTest 

It must be something simple I am doing wrong - any advice appreciated.

Using;

VS2017 Pro Version 15.5.1

KendoUI MVC 2017.3.1026

Chrome Version 63.0.3239.132 or Microsoft Edge or FireFox. Issue is repeatable.

So I must be firing the onChange event a second time with some of this configuration maybe?

But it is such a simple example.

Thanks in advance,

Steve

 

 

 

Chris
Top achievements
Rank 1
Veteran
Iron
Iron
 answered on 07 Apr 2022
1 answer
150 views

Hi,

I need sample code for  implementing select all /deselect all with combo box in kendo mvc grid

 

thanks in advance

 

@model IEnumerable<Emplopyee>

@(
                Html.Kendo().MultiSelectFor(m => m)
                    .DataTextField("Name")
                    .DataValueField("Id")

                    .HtmlAttributes(new { @style = "height:auto; overflow-x:auto ;" })
                    .Filter(FilterType.Contains.ToString())
                    .BindTo((IEnumerable<Employee>)ViewData["Employees"])


)

 

Yanislav
Telerik team
 answered on 28 Jan 2022
1 answer
576 views

I'm having an issue getting the selected item from the passed event, mostly because the demo uses "e.dataitem"

like this:

function onSelect(e) {
        if ("kendoConsole" in window) {
            var dataItem = e.dataItem;
            kendoConsole.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
        }
    }
My attempt to recreate this failed, dataItem has no such members:


@(Html.Kendo().MultiSelect()
                              .Name("JobIds")
                              .HtmlAttributes(new { style = "Width:700px; height:60px; overflow-y:scroll;", aria_label = "editor" })
                              .DataTextField("job_name")
                              .DataValueField("job_id")
                              .HeaderTemplate("<div class=\"dropdown-header\">" +
                                        "<span style=\"width=350px\">Job Name</span>" +
                                        "<span style=\"width=350px\">Parent Name</span>" +
                                        "</div>\n <table>")
                              .ItemTemplate("<span class = \"namespan\">#: data.job_name #</span> <span class=\"parentspan\">#: data.job_parent #</span >")
                              .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("JobSearch", "SupportEditor");
                                    })
                                    .ServerFiltering(true);
                                })
                              .Events(e =>
                              {
                                  e.Select("Job_onSelect")
                                  })


function Job_onSelect (e) {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");
    }


The console reads:


event :: select (undefined : undefined)


The only way i have managed to pull data is with direct reference to the multiselect like below:

function Job_onSelect(e) {
console.log($("#JobIds").data("kendoMultiSelect").value().toString());
}
But this does not provide the values of selected item value as it is selected; instead it only gives the full value of the multiselect before the change occurs (e.g. if 3 items are selected it only returns items 1 and 2, and when the first item is selected it returns nothing).
Petar
Telerik team
 answered on 25 Jan 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?