virtualized combobox and razor

[Randy Hompesch]

Hi, 

In everything I've read in both the docs and the demos you use a separate controller for the Read and ValueMapper functions associated with the virtualized combobox. The code below is taken from teh virtualizationcontroller.cs in your demo. I am trying to use Razor exclusively and … in theory … I shouldn't need a separate controller class. However, the page I am trying to use the combobox on is the index.cshtml  under areas\identity\pages\account\Manage.

The markup, taken from you demo, for the combo is as follows:

 @(Html.Kendo().ComboBox()
          .Name("orders")
          .DataTextField("ShipName")
          .DataValueField("OrderID")
          .HtmlAttributes(new { style = "width:100%" })
          .Template("#= OrderID # | For: #= ShipName #, #= ShipCountry #")
          .Height(290)
          .DataSource(source => {
              source.Ajax()
                  .PageSize(80)
                  .Read("Virtualization_Read", "ComboBox");
          })
          .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
    )


Please notice the .Read("Virtualization_Read", "ComboBox"). It's my understanding that "ComboBox" is the controller. How would I point/route that to the razor cshtml.cs file? Right now, if I put the "controller" functions in the .cshtml.cs file they never get called and the combo remains empty. I assume this is because it's not in a controller.

Any guidance or samples would be great!

Thanks … Ed

 

        public ActionResult Virtualization_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(GetOrders().ToDataSourceResult(request));
        }
        public ActionResult Orders_ValueMapper(int[] values)
        {
            var indices = new List<int>();
            if (values != null && values.Any())
            {
                var index = 0;
                foreach (var order in GetOrders())
                {
                    if (values.Contains(order.OrderID))
                    {
                        indices.Add(index);
                    }
                    index += 1;
                }
            }
            return Json(indices);
        }
        private IEnumerable<OrderViewModel> GetOrders()
        {
            using (var northwind = GetContext())
            {
                return northwind.Orders.Select(order => new OrderViewModel
                {
                    ContactName = order.Customer.ContactName,
                    Freight = order.Freight,
                    OrderDate = order.OrderDate,
                    ShippedDate = order.ShippedDate,
                    OrderID = order.OrderID,
                    ShipAddress = order.ShipAddress,
                    ShipCountry = order.ShipCountry,
                    ShipName = order.ShipName,
                    ShipCity = order.ShipCity,
                    EmployeeID = order.EmployeeID,
                    CustomerID = order.CustomerID
                }).ToList();
            }
        }
    }

[Dimitar]

Hi Randy Hompesch,

I apologize for the delayed response.

The ComboBox Virtualization Demo shows a setup for the widget that could be used with ASP.NET Core MVC where we have a Controller - Model - View setup. Your understanding about the code is correct - in this scenario the Read() property specifies the end-point from which the ComboBox extracts its data. I am attaching an ASP.NET Core MVC solution that demonstrates how to bind the ComboBox in this scenario. You could use it as a reference for this project setup.

From the provided area route I suspect that you have an ASP.NET Core Razor Pages solution. If this is the case, then the approach for binding the ComboBox is slightly different. For binding to razor pages you need to use a DataSource Read Url and specify the desired page handler as follows:

.DataSource(source =>
{
  source.Ajax()
  .PageSize(80)
  .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"));
})

Important to note is that the antiforgery token also has to be passed with each request as demonstrated above. To demonstrate this entire process, I have also prepared a second solution with Razor Pages that you can find attached for reference.

I hope the provided information is sufficient to get you started with the ComboBox Virtualization. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Randy Hompesch]

Fantastic!!! Exactly  what the doctor ordered! That business with the forgeryToken was a  big part of what I was missing.

One last request. You used an Html Helper to layout the combo. I was able to get my stuff working using that. However, I'd like to see something like what I have below. Basically it's the same thing as the html helper but instead using a tag helper. The part I can't figure out is how to add the virtualization stuff. Specifically, how to translate:
.DataSource(source => {
              source.Ajax()
                  .PageSize(80)
                  .Read("Virtualization_Read", "ComboBox");
          })
          .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))

 

into the tag helper format?

<kendo-dropdownlist name="cboUsers"  for="@Model.Input" value="@Model.Input.UserId"
    filter="FilterType.StartsWith" style="width:100%" height="500"
    bind-to="Model.Users"    datatextfield="FullName"
    datavaluefield="Id" on-select="cboUsers_Select"
    min-length="3" 
>

    <datasource name="ds"
            type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="80">
           <transport>
                     <read url="./Index?handler=Users_Read" />
            </transport>
      </datasource>

</kendo-dropdownlist>

 

 

Again … 1000 thanks.

 

[Dimitar]

Hello Randy Hompesch,

Check out the following ComboBox demo for a reference how to configure virtualization through the TagHelpers:

• ComboBox TagHelper Virtualization.

Regards,
Dimitar
Progress Telerik