Kendo Grid and DropDownList and not show records

[Christine]

I have a Kendo Grid and a DropDown List that work well.  Thee is a field in one of the models (model:Products Field:Status),  What I want is if the Field Status = "discontinued" I need to not display that record in the grid or the dropdown. How would I go about doing that? 

[Nikolay]

Hello Christine,

Here is the approach I would go for:

For the Grid, in the DataBound event handler target the row holding the Status = "discontinued" by uid and remove it via remove() method

        function onGridDataBound(e) {
          var grid = e.sender;
          var items = grid.dataSource.view();
          for (var i = 0; i < items.length; i++) {
            if (items[i].Status== "discontinued") {
              var $row = $('#grid').find("[data-uid='"+items[i].uid+"']"); // find grid row by uid
              $row.remove();
            }
          }
        }

For the DropDownList, again in the DataBound event handler remove the item from its data source directly:

        function onDropDownDataBound {
          var ddl =  e.sender;
          var items = ddl.dataSource.view();
          for (var i = 0; i < items.length; i++) {
            if (items[i].text == "discontinued") {
              ddl.dataSource.remove(items[i]);
            }
          }
        }

The above can be examined live in the following Dojo demo. Please note this is a jQuery Grid and DropDownList implementation, however, the logic for removing the records is valid for MVC projects as well.

• https://dojo.telerik.com/AvAVuJAJ

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Christine]

I will give that a try.  What about another issue I am having.  Dropdown list not being able to refresh with the current data.  I have a view that I can go into and change information on the item in the edit popup.  I go back to the main view to the popup and use the dropdown and I still see the old values.... I have tried datasource.read and datasource.refresh and they do not work no matter what event I use on the dropdown or on the popup edit view.  I have been pulling my hair on that.  I need to have the data on the dropdown refresh with the current values in the table...

[Christine]

 

I tried the first script.  I put an alert to ensure that the rows are being hit (which they are).  The rows do not remove.  I am pulling my hair out here.  I know it is finding the items but the items still remain in the grid..... I put a grid.refresh in hopes that was it but no..... Very frustrating.... 

[Nikolay]

Hello Christine,

There is no need to re-render the grid to hide the desired rows. This is done right after the grid binds to its data source, in the dataBound event handler.

In the Dojo, I also added a button that reads the Grid data source and refreshes the DropDownList. The DropDownList data is logged into the console before the and after refresh() is called. The result is the same. Please refer to the following link:

• https://dojo.telerik.com/AvAVuJAJ/2

Feel free to modify the code in the Dojo demo to replicate the problem and send it over so I can advise further.

Regards,
Nikolay
Progress Telerik

[Christine]

Ok I am confused.  I have a script that is ran on the databound event.  I go through the list and I see that the list is being processed as the alert is being displayed.  I tell it to remove the row but it does not.  You bare telling me that the row should be removed.  Here is the script I am using:

 

function OnGridDataBound() {
var grid = $('#MainGrid').data('kendoGrid');
var items = grid.dataSource.view();
for (var i = 0; i < items.length; i++) {
if (items[i].ProductDisabled == 1) {
var $row = $('#MainGrid').find("[ProductID='" + items[i].ProductID + "']");
// alert(items[i].ProductID);
$row.remove();
}
}

I am still seeing the products in the grid on the page.  I am also using Internet Explorer (your dropdown boxes has some issues with Internet Explorer as cannotv get the dropdown boxes to be refreshed if a item is changed in a table but that is another story, just wanted you to be aware that I am using IE).  So this is all I have to do to get the rows not to show up anymore????  If so there is something wrong.... I have been pulling my hair out trying to get things to work using Kendo grids and dropdowns but I am having the worst luck trying to get things to work.

 

[Nikolay]

Hello Christine,

Please target the DOM element that represents the table row via uid instead of ProductID:

        dataBound: function(e) {
          var grid = e.sender;
          var items = grid.dataSource.view();
          for (var i = 0; i < items.length; i++) {
            if (items[i].ProductName == "Chai") {
              var $row = $('#grid').find("[data-uid='"+items[i].uid+"']"); // find grid row by uid
              $row.remove();
            }
          }
        }

If this does not help please provide a Dojo runnable demo isolating and demonstrating the problem. Having this will help me fully understand the case and allow me to advise accordingly.

Regards,

Nikolay
Progress Telerik

[Christine]

I did that and it worked for the grid.  Now for the dropdown box, the text will not = "discontinued", it  will be a product name.  The status will be discontinued.  So how will I limit the records if the criteria is not based on the text or the value? 

[Christine]

I got it.... I used a filter on the dropdown and works good.

[Nikolay]

Hello Christine,

I am glad to hear this has been resolved.

This thread will be closed now. If anything new arises please submit a new one.

Regards,
Nikolay
Progress Telerik