Get remaining row IDs after filtering

3 posts, 0 answers
  1. Richard
    Richard avatar
    31 posts
    Member since:
    Jan 2017

    Posted 07 Aug 2017 Link to this post

    I have a Kendo UI Grid and have filtering turned on for all of the columns.  There is a column named ID in each row.  How can I get a list of all of the ID values left in the grid after a user has filtered the grid and clicked a button?

    @model IEnumerable<MyApp.Models.FieldData>
    <div class="BordRSolThin">
    @(Html.Kendo().Grid(Model)
    .Name(componentName: "FindDataGrid")
    .DataSource(dataSource => dataSource //Configure the Grid data source.
    .Ajax() //Specify that Ajax binding is used.
    .Read(read => read.Action(actionName: "FindDataGrid_Read", controllerName: "Lead").Data("FindDataParameters"))
    .PageSize(pageSize: 500)
    )
    .Columns(columns =>
    {
    columns.Bound(p => p.ID).Title(text: "ID").Width(pixelWidth: 100);
    columns.Bound(p => p.Field1).Title(text: "Field1").Width(pixelWidth: 100);
    columns.Bound(p => p.Field2).Title(text: "Field2").Width(pixelWidth: 100);
    columns.Bound(p => p.Field3).Title(text: "Field3").Width(pixelWidth: 100);
    columns.Bound(p => p.Field4).Title(text: "Field4").Width(pixelWidth: 500);
    })
    .HtmlAttributes(new { style = "height:350px;border:solid;border-width:thin;", CssStyleCollection = "#FindDataGrid" })
    .Pageable(pageable => pageable
    .Input(enabled: true)
    .Numeric(enabled: false)
    .Refresh(enabled: true)
    )
    .Sortable()
    .Scrollable(scr => scr.Height(pixelHeight: 350))
    .Selectable()
    .Filterable(filterable => filterable
    .Extra(value: false)
    .Operators(operators => operators
    .ForString(str => str.Clear()
    .Contains(message: "Contains")
    .StartsWith(message: "Starts with")
    .IsEqualTo(message: "Is equal to")
    .IsNotEqualTo(message: "Is not equal to")
    )
    ))
    )
    </div>

  2. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 09 Aug 2017 Link to this post

    Hello Richard,

    Possible solution is to get all available data in the dataSource of the grid through the data method. Then get only the ids of the available date items. The following code block illustrates how to achieve the aforementioned approach:


    $('#your-button-id').on('click',function(){
      
          var ids = $('#grid').data('kendoGrid').dataSource.data().map(function(x){
                return x.ID;
           })
                         
          // all identifiers are available in the ids array
    })


    Also I noticed that the grid is configured to use ajax request to fetch data but also a model is passed to its constructor. It is recommended to use either Server- or Ajax binding since mixing them can lead to unexpected behavior.

    The following demo illustrates grid configured to use ajax binding:

    And the below demo demonstrates server binding:


    http://demos.telerik.com/aspnet-mvc/grid/serverbinding


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Richard
    Richard avatar
    31 posts
    Member since:
    Jan 2017

    Posted 09 Aug 2017 in reply to Georgi Link to this post

    Thank you very much.  Your reply was most helpful and solved my problem.  I appreciate you pointing out the issue with my binding as well.  I had not even noticed that I did that. 

     

    Rich

Back to Top