title: Kendo Jquery Grid - Filtering on comma separated values column
body: <p>We have a Kendo Jquery Grid and we are trying to provide filter on Column where we are showing values in comma separated form. Code is shown below, I have tried to catch the filter object in dataBound event and try to filter out records over datasource, but couldn't help. Please suggest how can we achieve this.</p>
  
  <p>Field on which we need to achieve this is <em>ProviderSpecialty</em></p>
  
  <pre><code>&lt;script&gt;
      var grid;
      var dataSource;
      var gridView = 'updatesRequired';
  
      $(document).ready(function () {
          $('#selectGridView').change(function () {
              gridView = $('#selectGridView').val();
              $('#grid').kendoGrid('destroy').empty();
              renderGrid();
          });
          renderGrid();
      });
  
      function renderGrid() {
  
          var fieldsSchema =
          {
              'ProviderDelegateId': { type: 'number' },
              'EndDate': {type: 'date' }
          };
          dataSource = new kendo.data.DataSource({
              transport: {
                  read: {
                      url: providerProfileApiBaseUrl)
                  }
              },
              error: function (e) {
                  if (e.xhr.responseText != '') {
                      var jsonError = JSON.parse(e.xhr.responseText);
  
                      if (myApp.Web.utility.displacolumns !== undefined) {
                          myApp.Web.utility.displacolumns.push({
                              field: 'EndDate', template: '#= kendo.toString(kendo.parseDate(EndDate), "MM/dd/yyyy")#', title: 'Campaign End Dt', width: '125px', filterable: {
                                  ui: function (element) {
                                      element.kendoDatePicker({
                                          format: "MM/dd/yyyy"
                                      });
                                  }
                              }
                          });
                      }
                      myApp.Web.utility.displayErrorDialog(jsonError.error);
                  }
              },
              pageSize: myApp.Web.config.grid.pageable.pageSize,
              schema: {
                  model: {
                      id: 'UniqueId',
                      fields: fieldsSchema
                  }
              },
              sort: { field: "ProviderLastName", dir: "asc" }
          });
  
          var columns = [];
          columns.push({ field: 'ProviderDelegateId', hidden: true });
          if (gridView === 'updatesRequired') {
              columns.push({ field: 'ProviderLastName', title: 'Last Name', width: '125px', template: '&lt;a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#"&gt;#=ProviderLastName#&lt;/a&gt;' });
              columns.push({ field: 'ProviderFirstName', title: 'First Name', width: '125px', template: '&lt;a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#"&gt;#=ProviderFirstName#&lt;/a&gt;' });
              columns.push({ field: 'ProviderNPI', title: 'NPI', width: '125px', template: '&lt;a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#"&gt;#=ProviderNPI != null ? ProviderNPI : \'\' #&lt;/a&gt;' });
          } else {
              columns.push({ field: 'ProviderLastName', title: 'Last Name', width: '125px', template: '&lt;a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#"&gt;#=ProviderLastName#&lt;/a&gt;' });
              columns.push({ field: 'ProviderFirstName', title: 'First Name', width: '125px', template: '&lt;a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#"&gt;#=ProviderFirstName#&lt;/a&gt;' });
              columns.push({ field: 'ProviderNPI', title: 'NPI', width: '125px', template: '&lt;a href="/ProviderUpdate/UpdateProfile?providerId=#=ProviderId#"&gt;#=ProviderNPI != null ? ProviderNPI : \'\' #&lt;/a&gt;' });
          };
          columns.push({ field: 'ProviderSpecialty', title: 'Specialty', width: '125px', template: '#= getSpecialties(ProviderSpecialties) #' });
          columns.push({ field: 'ProviderEmail', title: 'Email', width: '125px' });
          columns.push({ field: 'LocationName', title: 'Location', width: '125px', template: '#= getLocations(ProviderLocations) #'  });
          if (gridView === 'updatesRequired') {
              columns.push({ field: 'CampaignName', title: 'Campaign', width: '125px', template: '&lt;a href="/ProviderLanding/ProviderUpdate/Index/#=CampaignTrackingId#"&gt;#=CampaignName#&lt;/a&gt;' });
              columns.push({
                  field: 'EndDate', template: '#= kendo.toString(kendo.parseDate(EndDate), "MM/dd/yyyy")#', title: 'Campaign End Dt', width: '125px', filterable : {
                  ui: function (element) {
                      element.kendoDatePicker({
                          format: "MM/dd/yyyy"
                      });
                  }
              } });
          } else {
              columns.push({ field: 'IsPendingChangeAvailable', title: 'Pending Changes', width: '125px', template: '#if (IsPendingChangeAvailable) {# Yes #} else {# No #}#' });
          };
  
          grid = $("#grid").kendoGrid({
              dataSource: dataSource,
              columns: columns,
              scrollable: false,
              filterable: myApp.Web.config.grid.filterable,
              sortable: myApp.Web.config.grid.sortable,
              pageable: myAppWeb.config.grid.pageable,
          }).data('kendoGrid');
      };
  
      function getSpecialties(specialties) {
          // remove duplicates and then join...
          var result = [];
          $.each(specialties, function(i, e) {
              if ($.inArray(e.SpecialtyName, result) == -1) result.push(e.SpecialtyName);
          });
          return result.join(',');
      };
  
      function getLocations(locations) {
          return locations.map(function (location) {
              return location.LocationName
          }).join(',');
      };
  
      $(document).ajaxStart(function () {
          $('#overlay-screen').show();
      });
      $(document).ajaxStop(function () {
          $('#overlay-screen').hide();
      });
  &lt;/script&gt;
  </code></pre>