This is a migrated thread and some comments may be shown as answers.

Dropdownlist Virtualization Kendo MVC

3 Answers 105 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Adarsh
Top achievements
Rank 1
Adarsh asked on 12 Feb 2018, 12:42 PM

We are using the below code for loading data in a Kendo dropdown inside a grid. The data is getting loaded, but after applying filter and selecting an item in the filter only the filter data is displayed in the dropdown. The dropdown is not getting refreshed to load the entire data. Please help

 

@(Html.Kendo().DropDownList()
            .Name("VehicleSegment") // The name of the widget should be the same as the name of the property.
            .DataValueField("VehicleSegmentID") // The value of the dropdown is taken from the ID property.
            .DataTextField("VehicleSegmentName") // The text of the items is taken from the EmployeeName property.
           .MinLength(3)
           //.OptionLabel("---Select Vehicle Segment ---")
          .HtmlAttributes(new { style = "width:100%" })
         .Template("#= VehicleSegmentID # | For: #= VehicleSegmentName #")
          .Height(290)
           //.Filter(FilterType.Contains)
           .Filter("contains")
          .DataSource(source =>
          {
              source.Custom()
                  .ServerFiltering(true)
                  .ServerPaging(true)
                  .PageSize(80)
                  .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                  .Transport(transport =>
                  {
                      transport.Read("Virtualization_Read", "Program");
                  })
                  .Schema(schema =>
                  {
                      schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                            .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                  });
          })
          .Virtual(v => v.ItemHeight(20).ValueMapper("valueMapper"))

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 14 Feb 2018, 09:21 AM
Hello Adarsh,

I have performed some local tests, but I was unable to replicate the described issue. Are you able to replicate it in our online demo below?

https://demos.telerik.com/aspnet-mvc/dropdownlist/virtualization

If not, please isolate it in a simplified runnable example and provide us with it, so we could revise the issue locally and pin down the reason for it.

Regards,
Nencho
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Adarsh
Top achievements
Rank 1
answered on 15 Feb 2018, 09:24 AM

Hi Nencho,

Please find below the code. I am pasting the code from .cshtml file and from controller file

transport.Read("Virtualization_Read", "Program");
})
.Schema(schema =>
{
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
});
})
.Virtual(v => v.ItemHeight(20).ValueMapper("valueMapper"))
//.Events(events => events.Select("select"))
)

 

 

function valueMapper(options) {
// debugger;
$.ajax({
url: "@Url.Action("Orders_ValueMapper", "Program")",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
});
}
function convertValues(value) {
var data = {};
value = $.isArray(value) ? value : [value];
for (var idx = 0; idx < value.length; idx++) {
data["values[" + idx + "]"] = value[idx];
}
return data;
}

 

 

public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
{
IList<VehicleSegmengtProgam> VehicleSegmentformList = new List<VehicleSegmengtProgam>();
VehicleSegmentformList = objProgram.GetAllVehicleSegmentForComboox(Convert.ToInt32(CurrentUser.ProductGroupID));
TempData["VehicleSegmentformList"] = VehicleSegmentformList;
return Json(VehicleSegmentformList.ToDataSourceResult(request));
}
public ActionResult Orders_ValueMapper(int[] values)
{
var indices = new List<int>();
IList<VehicleSegmengtProgam> VehicleSegmentformList = new List<VehicleSegmengtProgam>();
VehicleSegmentformList =(IList < VehicleSegmengtProgam >)TempData["VehicleSegmentformList"];
TempData.Keep();
if (values != null && values.Any())
{
var index = 0;
foreach (var order in VehicleSegmentformList)
{
if (values.Contains(order.VehicleSegmentID))
{
indices.Add(index);
}
index += 1;
}
}
return Json(indices, JsonRequestBehavior.AllowGet);
}

 

0
Dimitar
Telerik team
answered on 19 Feb 2018, 09:18 AM
Hello Adarsh,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Integrating virtualized Kedno UI DropDownList as Grid inline editor).

With the above solution, the DropDownList is successfully bound to the remote data and server filtering is configured correctly. Could you inspect the provided solution and verify if everything is working correctly on your end? In case the filtering issue continues to persist, please modify the solution accordingly and send it back to us for an additional review. 

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
DropDownList
Asked by
Adarsh
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Adarsh
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or