Server Filtering with Shared DataSource

[Richard]

Hi,

I'm trying to add server filtering to the shared data source example on the demo site (Shared DataSource)

How can I add the .ServerFiltering(true) option to either the AutoComplete control or the DataSource ? 

Thanks,

Richard 

 

@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("dataSource1")
    .Ajax(dataSource => dataSource
       .Read(read => read.Action("Products_Read", "DataSource"))
       .ServerOperation(true)
     -->> .ServerFiltering(true) << --
    )
)


@(Html.Kendo().AutoComplete()
    .Name("autoComplete")
    .DataTextField("ProductName")
    .Filter(FilterType.Contains)
    .MinLength(2)
    .DataSource("dataSource1") -->> .ServerFiltering(true) <--
)

[Dimitar]

Hi Richard,

I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Enable server filtering for a shared DataSource).

Server-filtering is based on the filtering capability of the DataSource component. When an Ajax binding is used, all of the server operations for server, paging, sorting and grouping are being performed on the server, unless the ServerOperation() option is set to false.

In case you would like to explicitly set the ServerFiltering option, then a Custom DataSource has to be used:

@(Html.Kendo().DataSource<TelerikMvcAppSharedDataSource.Models.ProductViewModel>()
.Name("dataSource1")
.Custom(dataSource => dataSource
.Type("aspnetmvc-ajax")
.ServerFiltering(true)
.Transport(m => m.Read("GetProducts", "Home"))
.Schema(m => m.Data("Data").Total("Total"))
)
)

@(Html.Kendo().DropDownList()
  .Name("SecurityQuestionId1")
  .HtmlAttributes(new { @class = "sq-control form-control" })
  .DataTextField("ProductName")
  .DataValueField("ProductID")
  .DataSource("dataSource1")
  .AutoBind(true)
  .Value("20")
  .Filter(FilterType.Contains)
)

Regards,
Dimitar
Progress Telerik

[Richard]

Thank you Dimitar, that's really helped me. 

I have one last follow up question. I'm adding this control to a toolbar so I add a template to the tool bar and update with JavaScript. Can you tell me how to correctly set the the DataSource ? the below doesn't work. 

Thanks,
Richard

<script>
    $(document).ready(function () {
        $("#GridSearchBox").kendoAutoComplete({
            placeholder: "Search Grid...",
            dataTextField: "Name",
            minlength: "3",
            datasource: 'GridDataSource'
        });
    });
</script>

 

 

[Richard]

Update, I found what I was looking for, the BindTo param.

 <script>
    $(document).ready(function () {
        $("#GridSearchBox").kendoAutoComplete({
            placeholder: "Search Grid...",
            dataTextField: "Name",
            minlength: "3",
            bindto: 'GridDataSource'
        });
    });
</script>