HtmlHelper: DataSource with Filter - DataSource is not defined

[Felix]

Hi,

I tried to set up a DataSource and a Filter Control like in the demo (https://demos.telerik.com/aspnet-core/filter) but i can not get the DataSource working.

I have the kendo v2023.3.1010 JS Files (kendo.all.min.js, kendo.aspnetmvc.min.js) and other controls like buttons, grids, etc all work as expected

My cshtml Page is

[PartialView/_SearchProvision.cshtml]
@using Kendo.Mvc;

@using Model;

@(
    Html.Kendo().DataSource<SearchProvisionDto>()
        .Name("DS_SearchProvision")
        .Ajax(dataSource => dataSource
            .Read("GetData", "SearchProvisionDto")
        )
)

 @(Html.Kendo().Filter<SearchProvisionDto>()
        .Name("Filter_PCProvision")
        .DataSource("DS_SearchProvision")
        .MainLogic(FilterCompositionLogicalOperator.Or)
        .ApplyButton()
        .ExpressionPreview()
        //Fields, FilterExpression
}

Loading the Page shows only, that the DataSource is not initialized

 

Am I missing something? I dont really understand where the problem might be.

[Mihaela]

Hi Felix,

Indeed, it is quite strange that the DataSource is not defined at your end. Would you please ensure that the Kendo UI scripts are included in the following order (jQuery must be referenced before the "kendo.all.min.js" file)?

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.3.1114/js/jszip.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.3.1114/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2023.3.1114/js/kendo.aspnetmvc.min.js"></script>

Also, I am attaching a demo project based on your setup. Hopefully, it will help you to identify the issue.

Best,

Mihaela

[Felix]

Hi Mihaela,

Thank you for the Example Project
In the end I found the reason, why it behaves the way it does, but I don't really understand why it behaves this way

I had a cshtml View, in which I load a Partialview
If the Datasource is in the PartialView, it gets not created, if its in the normal view it works fine

 

[works when DataSource Control is not in the ["PartialView/_SearchProvision"], but the View that loads the PartialView

@using Microsoft.AspNetCore.Mvc.Localization;
@using Microsoft.Extensions.Localization
@using WEB.ProvisionsClearing.Model.Tools;
@inject IStringLocalizer<SharedResources> Localizer

@{
    ViewData["Title"] = Localizer["SearchProvision"];
}
@section Scripts {
    <script type="text/javascript" src="~/js/tools.js"></script>
}


@(
    Html.Kendo().DataSource<SearchProvisionDto>()
        .Name("DS_SearchProvision")
        .Ajax(dataSource => dataSource
            .Read("GetDataByRequest", "SearchProvisionDto")
            .ServerOperation(true)
            .PageSize(50)
        )
)

@await Html.PartialAsync("PartialView/_SearchProvision")

 

 

[Mihaela]

Hi Felix,

It appears that the DataSource is not completely initialized within the Partial View when the Filter and Grid components attempt to access the DataSource.

To define the DataSource Htmlhelper within the Partial View, I would recommend using the Render() method of the DataSource to ensure that the DataSource initialization script will be rendered on the page when the Partial View is rendered in the browser:

• _SearchProvision.cshtml

 

@{
      Html.Kendo().DataSource<SearchProvisionDto>()
        .Name("DS_SearchProvision")
        .Ajax(dataSource => dataSource
            .Read("GetDataByRequest", "SearchProvisionDto")
            .ServerOperation(true)
            .PageSize(50)
        )
        .Render();
}

@(Html.Kendo().Filter<SearchProvisionDto>()
  .Name("Filter_PCProvision")
  .DataSource("DS_SearchProvision")
  ...
)

 

I hope that helps.

[Felix]

I did not get it to work so I bypassed the DataSource Control

Initiate the Filter Control without Datasource, but bind Model to it

Then a event/function where I get the filter Expression from the filter control and pass it to the grid.
The Grid has the datasource set, but is set to Autobind false

Setting the filter in the Grid Datasource triggers a reload and the DataSourceRequest Object parameter in the Action in the Controller receives the filter data in DataSourceRequest.

@(Html.Kendo().Filter<SearchProvisionDto>()
        .Name("Filter_PCProvision")
        .MainLogic(FilterCompositionLogicalOperator.Or)
        .ApplyButton(false)
        .ExpressionPreview()
        .Fields(f =>
        {     })
        .FilterExpression(f =>
        {     })
    )

@(Html.Kendo().Button()
    .Name("BT_Load")
    .Content("Ausführen")
    .Events(ev => ev.Click("BT_Load_click"))
    )

@(
    KendoExtension.CustomGrid<SearchProvisionDto>(Html,
        "Grid_SearchProvision",
        "screen-height-93")
        .Columns(columns =>
        {
            columns.Bound(c => c.AbrechNr);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(25)
            .Model(model =>
            {
                model.Id(p => p.AbrechNr);
            })
            .Read("GetData", "SearchProvisionDto"))
        .AutoBind(false)
)

    function BT_Load_click(e) {
        var filter = $("#Filter_PCProvision").data("kendoFilter");
        var grid = $("#Grid_SearchProvision").data("kendoGrid");

        grid.dataSource.filter(filter.getOptions().expression.filters);
    }
 
//action method
public async Task<ActionResult> GetData([DataSourceRequest] DataSourceRequest request)
{
  var filters = request.Filters.SelectMemberDescriptors().ToList();
   [...]
}

EDIT:

Wow, you can simply pass the DataSourceRequest to your Service Class and pass it as Parameter to the EF Core Request if you add the Telerik Nuget (using Kendo.Mvc.Extensions; using Kendo.Mvc.UI;)

Then it will send the filters etc, to the server

public async Task<DataSourceResult> GetData_byRequest(DataSourceRequest request)
{
 return Try((context) =>
 {
  var data = context.Tools_SearchProvision.ToDataSourceResult(request);
  data.Data = Mapper.Map<IEnumerable<SearchProvisionDto>>(data.Data);

  return data;
 });
}