C1-flex-grid-search with FlexGrid binding to "Item.xxx" not working

C1-flex-grid-search with FlexGrid binding to "Item.xxx" not working

Posted by: tri.nguyen on 4 November 2025, 1:07 am EST

• 

  tri.nguyen

  • Post Options:
  • Link
    Copy

  Posted 4 November 2025, 1:07 am EST - Updated 4 November 2025, 2:36 am EST

  Hi,

  On official sample: "MvcExplorer.Net8.0/Flexgrid/Searching using “C1.AspNetCore.Mvc.ja” Version=“6.0.20251.379” project
  
  after change the model from

  @model IEnumerable<Sale>

  to

  @model IEnumerable<SaleVM>

  and the binding of FlexGrid to (the SaveVM have and Item field which is Sale type)

  <c1-flex-grid id="theFlexGrid" class="grid" auto-generate-columns="false" is-read-only="true" auto-search="true"
          case-sensitive-search="@(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue))">
      <c1-flex-grid-column binding="Item.ID" header="ID"data-bind="ID"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Start"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.End"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Country"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Product"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Color" is-visible="@false"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Amount" format="c"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Amount2" format="c"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Discount" format="p0"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Item.Active"></c1-flex-grid-column>
      <c1-items-source read-action-url="@Url.Action("Searching_Bind")"></c1-items-source>

  I was change

  Searching_Bind

  to return right collection. After that,The grid was show all item as expected but, the grid search item not working. Because I can not change the exist project Model to just support

  binding="Amount2" 

  binding=“Amount2”
  
  Is their a way to make Grid Search work with

  binding="Item.Amount2"

  instead of

  binding="Amount2"

  ?

  Thanks.

• 

  uttkarsh.matiyal

  

  • Post Options:
  • Link
    Copy

  Posted 4 November 2025, 5:25 am EST

  Hello,

  We’re sorry, but FlexGrid does not support searching within nested fields. Internally, FlexGrid uses the CollectionView class for data source handling, and this class supports searching only for items that are direct members of the collection.

  Therefore, this limitation is by design. We recommend flattening your data before binding it to the grid, as shown below:

  public ActionResult Searching_Bind([C1JsonRequest] CollectionViewRequest<SaleVM> requestData)
  {
      var sales = Sale.GetData(200);
  
      var flattened = sales.Select(sale => new SaleVM
      {
          Item = sale,
          ID = sale.ID,
          Start = sale.Start,
          End = sale.End,
          Country = sale.Country,
          Product = sale.Product,
          Color = sale.Color,
          Amount = sale.Amount,
          Amount2 = sale.Amount2,
          Discount = sale.Discount,
          Active = sale.Active
      }).ToList();
  
      return this.C1Json(CollectionViewHelper.Read(requestData, flattened));
  }
  
  ---
  
  public class SaleVM
  {
      public Sale Item { get; set; }
      public int ID { get; internal set; }
      public string Country { get; internal set; }
      public string Product { get; internal set; }
      public double Amount2 { get; internal set; }
      public double Discount { get; internal set; }
      public bool Active { get; internal set; }
      public DateTime Start { get; internal set; }
      public DateTime End { get; internal set; }
      public string Color { get; internal set; }
      public double Amount { get; internal set; }
  }
  
  ---
  
  <c1-flex-grid id="theFlexGrid" class="grid" auto-generate-columns="false" is-read-only="true" auto-search="true"
                case-sensitive-search="@(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue))">
      <c1-flex-grid-column binding="ID" header="ID" data-bind="ID"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Start"></c1-flex-grid-column>
      <c1-flex-grid-column binding="End"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Color" is-visible="@false"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
      <c1-items-source read-action-url="@Url.Action("Searching_Bind")"></c1-items-source>
      <c1-flex-grid-filter default-filter-type="Both"></c1-flex-grid-filter>
  </c1-flex-grid>

  Please let us know if it helps.

  Regards,
  
  Uttkarsh.

• 

  tri.nguyen

  • Post Options:
  • Link
    Copy

  Posted 4 November 2025, 5:59 am EST

  Hi,

  I knew the flatten way but do it for each VM, also need change the VM .It is the last thing I will consider.

  I was thought there will be more elegant way.

  Thanks.

• 

  uttkarsh.matiyal

  

  • Post Options:
  • Link
    Copy

  Posted 4 November 2025, 7:16 am EST

  Hello,

  If you prefer not to modify the SaleVM object and only need to search by a single field, Amount2, you can flatten your data on the fly using an anonymous object data source, as shown below:

  public ActionResult Searching_Bind([C1JsonRequest] CollectionViewRequest<object> requestData)
  {
      var sales = Sale.GetData(200);
  
      var vmList = sales.Select(s => new 
      { 
          Item = s,
          Item_Amount2 = s.Amount2
      }).ToList();
  
      return this.C1Json(CollectionViewHelper.Read(requestData, vmList));
  }
  
  -----------
  
  <c1-flex-grid-column binding="Item_Amount2" header="Item.Amount2" format="c"></c1-flex-grid-column>

  If this approach doesn’t fit your scenario, you can alternatively implement a custom search logic on the server side, as illustrated below:

  public ActionResult Searching_Bind([C1JsonRequest] CollectionViewRequest<SaleVM> requestData)
  {
      var data = Sale.GetData(200).Select(s => new SaleVM { Item = s }).ToList();
  
      // Get search info
      if (requestData.ExtraRequestData != null &&
          requestData.ExtraRequestData.TryGetValue("FlexGridSearch", out var searchObj) &&
          searchObj is IList<object> searchList)
      {
  
          var searchRegex = searchList.Count > 2 ? searchList[2]?.ToString() : null;
  
          //manually searching
          if (!string.IsNullOrEmpty(searchRegex))
          {
              var regex = new Regex(searchRegex, RegexOptions.IgnoreCase);
  
              data = data.Where(vm =>
                  regex.IsMatch(vm.Item.ID.ToString()) ||
                  regex.IsMatch(vm.Item.Start.ToString()) ||
                  regex.IsMatch(vm.Item.End.ToString()) ||
                  regex.IsMatch(vm.Item.Country ?? "") ||
                  regex.IsMatch(vm.Item.Product ?? "") ||
                  regex.IsMatch(vm.Item.Color ?? "") ||
                  regex.IsMatch(vm.Item.Amount.ToString()) ||
                  regex.IsMatch(vm.Item.Amount2.ToString()) ||
                  regex.IsMatch(vm.Item.Discount.ToString()) ||
                  regex.IsMatch(vm.Item.Active.ToString())
              ).ToList();
          }
          //resetting the search query so that internal searching does not apply
          searchList[2] = "";
      }
  
      return this.C1Json(CollectionViewHelper.Read(requestData, data));
  }

  Please let us know if any of the above approaches helps.

  Regards,
  
  Uttkarsh.