ListView filtering with SharedDataSource

[Grace]

I'm looking to use an autocomplete search in combination with the ListView widget, similar to how SharedDataSource is implemented in this demo with the Grid widget. Simply replacing the grid widget code in the SharedDataSource demo (shown below) with the code for ListView results in a blank search box and an empty ListView:

<div class="demo-section k-content wide">
    @(Html.Kendo().DataSource<Project.Models.ProjectViewModels.GalleryImageViewModel>()
                    .Name("dataSource1")
                    .Ajax(dataSource => dataSource
                       .Read(read => read.Action("Images_Read", "DataSource"))
                       .ServerOperation(false)
                    )
    )
    <h4><label for="autoComplete">Select image name</label></h4>
    @(Html.Kendo().AutoComplete()
                    .Name("autoComplete")
                    .DataTextField("GalleryImage.Title")
                    .Filter(FilterType.Contains)
                    .MinLength(2)
                    .DataSource("dataSource1")
    )

    @(Html.Kendo().ListView<Image>()
                       .Name("listView")
                       .TagName("div")
                       .ClientTemplateId("template")
                       .Pageable(pageable => pageable
                              .Refresh(true)
                              .ButtonCount(5)
                              .PageSizes(new[] { 5, 15, 21 })
                        )
                       .DataSource("dataSource1")                         
    )
</div>

Is there a simple solution to this? If not, what is the best way to implement server side filtering via a search widget in combination with ListView?

[Viktor Tachev]

Hello Grace,

Note that the ListView does not provide default rendering. It requires a template that will specify how the items will be displayed. Please check out the article below that describes the widget in more details.

• https://docs.telerik.com/aspnet-core/helpers/html-helpers/listview

With that said, if you would like to have a ListVeiw in the demo instead of Grid I would suggest copying the ListView definition from this example and just replacing the DataSource to point to the shared one. Check out the short video below that shows the behavior.

• https://www.screencast.com/t/qQiWJiwTXMnU

If you have additional queries do not hesitate to contact us again.


Regards,
Viktor Tachev
Progress Telerik

[Joel]

Hi,
  I need to pass additional data to a controller when a Read() is triggered in the listview.
  I have tried using .Read(read => read.Action("ProductionLines_Read", "ProductionLine").Data("getShowOption")) in the shared data source but an exception was thrown.
  Please share how to pass additional data while listview is sharing a data source.
  Thanks.

Exception:

ReferenceError: getShowOption is not defined
    at https://localhost:44331/ProductionLine:60:311
jQuery.Deferred exception: productionLinesDataSource is not defined ReferenceError: productionLinesDataSource is not defined
    at HTMLDocument.<anonymous> (https://localhost:44331/ProductionLine:61:306)
    at mightThrow (https://localhost:44331/lib/jquery/dist/jquery.js:3534:29)
    at process (https://localhost:44331/lib/jquery/dist/jquery.js:3602:12) undefined
jQuery.Deferred exception: productionLinesDataSource is not defined ReferenceError: productionLinesDataSource is not defined
    at HTMLDocument.<anonymous> (https://localhost:44331/ProductionLine:66:305)
    at mightThrow (https://localhost:44331/lib/jquery/dist/jquery.js:3534:29)
    at process (https://localhost:44331/lib/jquery/dist/jquery.js:3602:12) undefined
ReferenceError: productionLinesDataSource is not defined
    at HTMLDocument.<anonymous> (https://localhost:44331/ProductionLine:61:306)
    at mightThrow (d:\development\vela mfg dashboard\source code\velamfgdashboard\velamfgdashboard\wwwroot\lib\jquery\dist\jquery.js:3534:30)
    at process (d:\development\vela mfg dashboard\source code\velamfgdashboard\velamfgdashboard\wwwroot\lib\jquery\dist\jquery.js:3602:13)
ReferenceError: productionLinesDataSource is not defined
    at HTMLDocument.<anonymous> (https://localhost:44331/ProductionLine:66:305)
    at mightThrow (d:\development\vela mfg dashboard\source code\velamfgdashboard\velamfgdashboard\wwwroot\lib\jquery\dist\jquery.js:3534:30)
    at process (d:\development\vela mfg dashboard\source code\velamfgdashboard\velamfgdashboard\wwwroot\lib\jquery\dist\jquery.js:3602:13)

 

View:

@(Html.Kendo().DataSource<VelaMfgDashboard.Models.ProductionLine.ProductionLineModel>()
                .Name("productionLinesDataSource")
                .Ajax(dataSource => dataSource
                    .Read(read => read.Action("ProductionLines_Read", "ProductionLine").Data("getShowOption"))
                    .ServerOperation(false)
                    .PageSize(20)
                )
)
@(Html.Kendo().ListView(Model.ProductionLines)      // The ListView will be initially bound to the Model which is the ProductionLine table.
                .Name("productionLinesListView")  // The name of the ListView is mandatory. It specifies the "id" attribute of the widget.
                .TagName("div")                 // The tag name of the ListView is mandatory. It specifies the element which wraps all ListView items.
                .ClientTemplateId("template")   // This template will be used for rendering the ListView items.
                .DataSource("productionLinesDataSource")
                .Pageable(pageable => pageable
                    .Refresh(true)
                    .ButtonCount(5)
                    .PageSizes(new[] { 10, 20, 30 })
                )
                .Selectable(ListViewSelectionMode.Single)
                .Events(events => events.Change("onChange"))
)

    @(Html.Kendo().AutoComplete()
            .Name("productionLineSearch")
            .Placeholder("Find Production Line")
            .DataTextField("Name")
            .Filter(FilterType.Contains)
            .MinLength(1)
            .HtmlAttributes(new { style = "width:100%" })
            .DataSource("productionLinesDataSource")
    )

 

script:

function getShowOption() {
    return { showOption: $("#showOptions").data("kendoDropDownList").value() };
}

 

Controller:

public IActionResult ProductionLines_Read([DataSourceRequest] DataSourceRequest request, string showOption)
{
    var model = GetProductionLineIndexModel(showOption);
    var result = model.ProductionLines;
    var dsResult = result.ToDataSourceResult(request);
    return Json(dsResult);
}

 

[Joel]

This is the definition of the DropDownList

@(Html.Kendo().DropDownList()
        .Name("showOptions")
        .BindTo(new List<string>() {
            "Show Active",
            "Show Inactive",
            "Show All",
        })
        .HtmlAttributes(new { style = "width: 100%" })
)

[Viktor Tachev]

Hello Joel,

 

Would you place the script with the getShowOption definition before the DataSource is initialized and see how the behavior changes?

In case the error persists please send us a runnable project where it is replicated so we can examine it locally. 

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

Hi Viktor,

  I'm afraid i need more explicit guide on how to place the on getShowOption definition before the DataSource is initialized.

  I am still rather new in this.

regards,

joel

[Viktor Tachev]

Hello Joel,

 

What I meant was to physically move the script tags with the relevant JavaScript code before the definition of DataSource.

If the behavior persists, would you send a sample project where it is replicated? This will enable us to examine it and look for what is causing the error.

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

Hi Victor,

  That actually works!

   Thanks.

regards,

joel

I post the codes here just for reference.

<script type="text/javascript">
    // Note: need to put the script at the beginning, before the Kendo().DataSource definition.
    function getShowOption() {
        return { showOption: $("#showOptions").data("kendoDropDownList").value() };
    }
</script>

<div class="d-flex flex-row mb-2">
    <div class="k-content mr-auto">
        @(Html.Kendo().DataSource<VelaMfgDashboard.Models.ProductionLine.ProductionLineModel>()
                .Name("productionLinesDataSource")
                .Ajax(dataSource => dataSource
                    .Read(read => read.Action("ProductionLines_Read", "ProductionLine").Data("getShowOption"))
                    .ServerOperation(false)
                    .PageSize(20)
                )
        )
</div>