Questions on UI for ASP.NET MVC Forum

1 answer

5 views

MultiColumnComboBoxFor - Showing DataValue instead of DataText with large dataset

We have use a MultiColumnComboBoxFor to select from a large dataset > 100.000 records.

At the time of selecting a record the DataText is correctly displayed.

But when we refresh the page the ComboBox behaves differently for records which appear early in the dataset, and records that come later.

The early records show the DataText correctly, records which come later in the dataset do not; they show their Id (DataValue).

If we implement virtualization, the Combobox displays the correct DataText in both cases, but seemingly with an extra server roundtrip?

Is this expected behaviour? Is there anything we could improve while using the MultiColumnComboBox with larger datasets?

Kind regards.

MultiColumnComboBox

answered on 30 Jun 2025

2 answers

302 views

Using MulticolumnComobox attempting to format a datetime? field (Telerik.MVC 2022.3.1109)

I've tried a multitude of options, but the ones that don't throw errors, I get "/Date(16400...." as the results

Here are some of the tries.

columns.Add().Field("StartDate").Title("Start Date").Template("#:kendo.toString(StartDate,'MM/dd/yyyy')#").Width("150px");

columns.Add().Field("StartDate").Title("Start Date").Template("#:data.StartDate.ToString('MM/dd/yyyy')#").Width("150px");

columns.Add().Field("StartDate").Title("Start Date").Template("#= kendo.toString(StartDate, 'MM/dd/yyyy')#").Width("150px");

I did see the one user voice asking for a "Format" method for MCCB as getting the escape correct is difficult but didn't give any examples.

using Telerik.MVC 2022.3.1109

MultiColumnComboBox

answered on 02 Feb 2023

1 answer

131 views

How to disable search option from multicolumncombobox

MultiColumnComboBox

answered on 16 May 2022

1 answer

103 views

MultiColumnComboBox - ServerSorting and ServerPaging: wrong record selection

We're using the MultiColumnComboBox with a Custom-Datasource to utilize the ServerFiltering and ServerFiltering functionality.

Now we also want to sort the data. We're using ServerSorting + Sort, and the data is sorted correctly.

Unfortunately the Combobox picks the wrong records now, as if picking the page and record before applying the sorting.

Are we doing something wrong?

This is how our MultiColumnCombobox is set up:

@(Html.Kendo().MultiColumnComboBoxFor(model => model.KUNDE_ID)
    .Columns(columns =>
    {
        columns.Add().Field("ADR_NR_CHAR").Title("Kundennummer").Width("150px");
        columns.Add().Field("adr_name1").Title("Kundenname").Width("200px");
        columns.Add().Field("adr_name2").Title("Kundenname 2").Width("200px");
        columns.Add().Field("adr_strasse").Title("Strasse").Width("200px");
        columns.Add().Field("adr_plz").Title("PLZ").Width("100px");
        columns.Add().Field("adr_ort").Title("Ort").Width("200px");
        columns.Add().Field("ntv_kz_d").Title("Land").Width("100px");
    })
    .DataValueField("ID")
    .DataTextField("adr_name1")
    .DataSource(source =>
    {
        source.Custom()
            .ServerSorting(true)
            .Sort(s => s.Add("adr_name1").Ascending())
            .ServerFiltering(true)
            .ServerPaging(true)
            .PageSize(50)
            .Type("aspnetmvc-ajax")
            .Transport(transport =>
            {
                transport.Read("ReadCustomers", "Box");
            })
            .Schema(schema =>
            {
                schema.Data("Data").Total("Total");
            });
    })
    .Filter(FilterType.Contains)
    .FilterFields(new string[] { "ADR_NR_CHAR", "adr_name1", "adr_name2", "adr_strasse", "adr_plz", "adr_ort", "ntv_kz_d" })
    .HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
    .Messages(m => m.NoData("Keine Daten gefunden").Clear("Leeren"))
    .Virtual(v => v.ItemHeight(33).ValueMapper("valueMapper"))
)

MultiColumnComboBox

answered on 03 Feb 2022

2 answers

187 views

MultiColumnComboBox - Virtualization issues

We're using the MultiColumnComboBoxFor with a large amount of data, and therefore implemented virtualization as is described here: https://demos.telerik.com/aspnet-mvc/multicolumncombobox/virtualization

We ran into multiple problems with this:

The line data: convertValues(options.value) did not work for us; the server method never received any values.
We had to use data: { values: options.value }.
Empty values were not displayed correctly in the dropdown:

We changed the following style to display these correctly:
.k-grid-list.k-virtual-list > .k-item > .k-cell, .k-grid-list.k-virtual-list > .k-item > .k-group, .k-grid-list.k-virtual-list > .k-item > .k-spacer-group {
display: table-cell;
}

Are there any drawbacks to our solution?

MultiColumnComboBox

answered on 31 Jan 2022

1 answer

121 views

MultiColumnComboBox with virtualization - Filter on numbers

We're using a virtualized MultiColumnComboBox including the filter functionality 'contains'.

Unfortunately a filter on an integer field throws an error 'FormatException' on ToDataSourceResult.

Is there a default way of making this work, or do we have to modify the DataSourceRequest manually?

If the latter, is there an example of how to do it?

MultiColumnComboBox

answered on 12 Jan 2022

1 answer

181 views

How to use keydown event on multiple controls grab all the values to form a folder path on a label?

Hi guys,

I have a kendo window which I have controls inside the window.

The idea is to keydown what the user enters to the folderName label which creates and shows the user the name of the folder that will be created in the network drive.

see attached screen shot

so far i have this code below. But the logic is not yet correct

    function formatStringfoldername(UploadedDT) {
        debugger;
        


        var MineName = $("#SFolder").val();
        var scan_PersonsScan = $("#scan_PersonsScan").data("kendoMultiSelect").dataItems();
        var SiteCode = $("#SiteCode").data("kendoMultiColumnComboBox").dataItem();
        var descriptionMineName = SiteCode.MineName;
        var scan_EquipmentDetails = $("#scan_EquipmentDetails").data("kendoMultiSelect").dataItems();
        var scan_Projects = $("#scan_Projects").data("kendoMultiSelect").dataItems();
      
        if (descriptionMineName ==="") {
          //  var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName;
        }
        if (MineName === "") {
       //     var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName + " " + MineName;
        }
        else if (scan_Projects.length > 0) {
           
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
        else if (scan_EquipmentDetails.length > 0)
        {
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
       

       
       
        //var result = "N:\\Backup\\" + UploadedDT + " " + scan_PersonsScan[0].Initials + MineName;
      //  $("#FolderPathstructurechange").text($.validator.format("N:\\Backup\\" + " {0} , I'm {1} years old", [UploadedDT, "23"]));
    }

function change() {
        debugger;
        var DateScanned = $("#DateScanned").data("kendoDatePicker");
        $("#DateScanned").attr("disabled", "disabled");
        var value = DateScanned.value();
        var UploadedDT = kendo.toString(value, "yyyy-MM-dd");

        formatStringfoldername(UploadedDT);
       
    }

  @(Html.Kendo().DatePicker().Name("DateScanned") 
                                                       .Events(e =>
                                                                    {
                                                                        e.Change("change");
                                                                    }).Format("dd/MM/yyyy").ToClientTemplate())

     <div class="row">

                            @Html.Label("Short Folder Description:")
                            <div class="row mt-3">

                            </div>
                            @Html.Kendo().TextBox().Name("SFolder").HtmlAttributes(new { onInput = "formatStringfoldername();" }).ToClientTemplate()
                        </div>

any help will be appreciated.

kind regards

Tony

answered on 11 Nov 2021

1 answer

153 views

how to link MultiColumnComboBox from model value in the grid to custom popup window editor?

Good day guys,

I have a problem where i have grid with popup custom window editor. in the pop window I have a MultiColumnComboBox which i can use to update the field which is bound to the MultiColumnComboBox field in the popup window. now the problem comes when some of the fields return the ID and not the string text field which is very weird. have a look at the attached screenshots.

I have the multicomlumncombobox configures as below in the custom popup window

                        @(Html.Kendo().MultiColumnComboBox()
                                      .Name("NameAbbreviation")
                                      .DataTextField("NameAbbreviation")
                                      .DataValueField("AccoutID")
                                      .ValuePrimitive(true)
                                      .AutoBind(false)
                                      .Filter("contains")
                                      .Placeholder("--Search/Select Mine---")
                                      .FilterFields(new string[] { "AccountType", "Status", "NameAbbreviation", "Company", "Minerals" })
                                      .Columns(columns =>
                                      {
                                          columns.Add().Field("AccountType").Title("AccountType").Width("130px");
                                          columns.Add().Field("Status").Title("Type").Width("130px");
                                          columns.Add().Field("NameAbbreviation").Title("Manufacturer").Width("350px");
                                          columns.Add().Field("Company").Title("Company").Width("350px");
                                          columns.Add().Field("Minerals").Title("Minerals").Width("130px");

                                      })

                                      .Events(e => e.Select("onParkarBayComboSelect"))
                                      .HtmlAttributes(new { style = "width:100%" })
                                      .Height(204)
                                      .FooterTemplate("Total <strong>\\#: instance.dataSource.total() \\#</strong> items found")
                                      .DataSource(source => {
                                          source.Custom()
                                              .ServerPaging(true)
                                              .PageSize(80)
                                              .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                              .Transport(transport => transport
                                              .Read(read =>
                                              {
                                                  read.Action("ParkerBay_GetMineDetails_Read", "SiteCodes");
                                              }))
                                              .Schema(schema =>
                                              {
                                                  schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                                        .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                              });
                                      }).ToClientTemplate()

    )

Grid

MultiColumnComboBox

answered on 06 Aug 2021

2 answers

201 views

Format Columns in List

Hello,

I'm using the MultiColumnComboBox as an editor w/in a Telerik Grid. One of the columns in the underlying model I used a display format attribute, [DisplayFormat(DataFormatString = "{0:#,##0.##;(#,##0.##)}")] that isn't coming through in the MultiColumnComboBox dropdown list. A second column is a percentage, [DisplayFormat(DataFormatString = "{0:P3}")] where, again, the display format isn't carried through to the widget. Can you explain to me how I can format the columns of the MultiColumnComboBox, please? I'd also like to align these values to the right. I used the HeaderTemplate to align the header to the right, but the column cell values align to the left.

Regards,

Patrick

MultiColumnComboBox

answered on 11 Mar 2021

3 answers

777 views

Help reading data values & text for selected item

As you an see in my view below, I am trying to read the selected values in the change event of my MultiColumnComboBox.

The box is populating fine with about 300 records from a JsonResult from the controller. Here are the problems I'm needing help with:

1) Getting/Reading the data value and data text of the selected item in the list. combo.item shows as undefined when I put a breakpoint on it in the browser.

2) I'd like to know how to get/read the text of the third column that isn't either the DataValue or DataText of the selected item, Title in this case.

3) When I click on the an item when the list is dropped down, I have to click a second time for it to collapse. In the demos, they collapse as soon as I click on an item.

------------------------------------------------------

@{
ViewBag.Title = "Index";
}

<h2>Bond Maturities</h2>

@(Html.Kendo().MultiColumnComboBox()
.Name("bonds")
.Placeholder("Select a bond")
.DataTextField("IssueAbbreviation")
.DataValueField("BondId")
.Columns(columns =>
{
columns.Add().Field("IssueAbbreviation").Title("Issue");
columns.Add().Field("Title");
columns.Add().Field("BondId").Title("ID");
})
.HtmlAttributes(new { style = "width:100%;" })
.Filter(FilterType.Contains)
//.AutoBind(false) <-- Prevents list from loading until something typed in to trigger filter.
.MinLength(3)
.DataSource(source => {
source.Read(read =>
{
read.Action("GetBondTitleList", "Bond");
})
//.ServerFiltering(true)
;
})
.Events(e => { e.Change("onChange"); })
)

<div class="box">
<h4>Console log</h4>
<div id="console"></div>
</div>

<script>

function onChange(e) {
$("#console").html("event: change");

//var numeric = $("#age").data("kendoNumericTextBox");
//numeric.value(10);
var combo = $("#bonds").data("kendoMultiColumnComboBox");
var dataItem = dataItem(combo.item.index()); //dataItem
$("#console").html("Changed to " + dataItem.Value);
//var dataItem = dataItem(combo.item.index());
alert("ID: " + dataItem.Value + "; Title: " + dataItem[2] );

}

</script>

MultiColumnComboBox

answered on 23 Apr 2020