Grid Dropdown Filter: Populate the filter on page ready function

[Rohit]

Hi,

I have kendogrid with list of dropdown filters. 
I am stuggling to call the javascript to load the dropdown in the ready function.
Basically I am not able to find the dropdown element in the grid so that I can call the javasript to load the dropdown again.

View Code:

  @using (Html.BeginForm("ReplaySelectedInboundMessages", "Home"))
   {
    <div id="gridContent">
       <h1></h1>  
    @(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
    .Name("gridTable") 
   //.EnableCustomBinding(true)
    .HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})       
    .Columns(columns => 
        {
          columns.Template(@<text><input class="box"  id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
            //columns.Template(p => { }).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />");
                    
            columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
            columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ft => ft.UI("ReceivePortsFilter")); //.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
            columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter"));
            columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
            columns.Bound(p => p.ControlID).Width(100);
            columns.Bound(p => p.SenderID).Width(100).Filterable(ft => ft.UI("SenderIDFilter"));
            columns.Bound(p => p.ReceiverID).Width(100).Filterable(ft => ft.UI("ReceiverIDFilter"));
            columns.Bound(p => p.InterchangeID).Width(100);
            columns.Bound(p => p.ReplayedCount).Width(100);
            columns.Bound(p => p.RetryCount).Width(100);
            columns.Bound(p => p.AckCode).Width(20);
        })
           // .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Filterable()
            .Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
            .Sortable()
            .Scrollable(src => src.Height("auto"))
            .Resizable(resize => resize.Columns(true))
            )

         <br />
        <br />
        <input type="Submit" name="btnReplayMessage" value="Replay" title="Replay Message" \>
</div>  
      <script type="text/javascript">
          function ReceivePortsFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                           read: "@Url.Action("FilterMenuCustomization_ReceivePorts")"
                          
            }
        },
        optionLabel: "--Select Value--"
    });
          }



          function SendPortsFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_SendPorts")"

                      }
                  },
                  optionLabel: "--Select Value--"
              });
          }

          function ReceiverIDFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_ReceiverID")"

            }
        },
        optionLabel: "--Select Value--"
    });
          }

          function SenderIDFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_SenderID")"

                      }
                  },
                  optionLabel: "--Select Value--"
              });
          }


          function DateTimeFilter(control) {
              $(control).kendoDateTimePicker();
          }

          $(document).ready(function () {
              
             
              
              
              var grid = $("#gridTable").data("kendoGrid");
              var dropdown = grid.pager.element
                               .find(".k-pager-sizes [data-role=dropdownlist]")
                               .data("kendoDropDownList");

              var item = {};
              item[dropdown.options.dataTextField] = "All";
              item[dropdown.options.dataValueField] = 1000000;
              dropdown.dataSource.add(item);

              dropdown.bind("change", function (e) {
                  if (this.text() == "All") {
                      grid.one("dataBound", function () {
                          setTimeout(function () {
                              dropdown.span.text("All");
                          });
                      });
                  }
              });
          });
      </script>
       
   }
   
   Controller Code:
   public ActionResult AllMessages([DataSourceRequest(Prefix = "gridTable")] DataSourceRequest request)
        {
            //var filterCollection = KendoGridFilterCollection.BuildCollection(Request);
            List<LogModel> logs = null;
             if (request.Filters == null)
                logs = this.GetAllMessages().Where(x => x.loggedDate >= DateTime.Today.AddDays(-7)).ToList();
             else
                 logs = this.GetAllMessages();
            
            Session.Clear();
            Session["ReceivePortsList"] = logs.OrderBy(e => e.ReceivePortName).Select(a => a.ReceivePortName).Distinct();
            Session["SendPortName"] = logs.OrderBy(e => e.SendPortName).Select(a => a.SendPortName).Distinct();
            Session["SenderID"] = logs.OrderBy(e => e.SenderID).Select(e => e.SenderID).Distinct();
            Session["ReceiverID"] = logs.OrderBy(e => e.ReceiverID).Select(e => e.ReceiverID).Distinct();

            return View(logs);
        
        }

        public ActionResult FilterMenuCustomization_ReceivePorts()
        {

            //List<LogModel> logs = this.GetAllMessages();
            //return Json(logs.Select(e => e.ReceivePortName).Distinct(), JsonRequestBehavior.AllowGet);

            return Json(Session["ReceivePortsList"], JsonRequestBehavior.AllowGet);
           
        }

[Rohit]

Hi All,

I came across the FilterMenuInit function, please can you help me how to call my FilterMenuInit in my above code so that the actions are called again on page render.

Thanks for your help.

Kind Regards
Rohit

[Rohit]

Hi All,

Any comments anyone, please give me some leads so that I can explore more.

Thanks again for your help.

cheers
Rohit

[Alexander Popov]

Hello Rohit,

Here is an example of how a filterMenuInit event handler can be attached to the Grid: 

@(Html.Kendo().Grid()
    .Name("Grid")
    .Events(events => events.FilterMenuInit("gridFilterMenuInit"))
)
...

<script>
  function gridFilterMenuInit(e){
   var ddl = e.container.find("[data-role='dropdownlist']:first").getKendoDropDownList()
  }
</script>

I would recommend checking the Grid's event builder documentation for more details.

Regards,
Alexander Popov
Telerik

 

 

[Rohit]

Hi Alex,

Thanks for your comments and help. 
I did try the as per your comments, I am not getting any error but its not binding new data from controller to the filter dropdown. I reckon, I am doing some basic error. Pls request you to kindly have a quick look.

 View: 
@(Html.Kendo().Grid<ViaPath.MessageReplay.MvcApp.Models.LogModel>(Model)
    .Name("gridTable") 
   //.EnableCustomBinding(true)
    .HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})       
    .Columns(columns => 
        {
          columns.Template(@<text><input class="box"  id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.LogID"/></text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
            //columns.Template(p => { }).ClientTemplate("<input type='checkbox' #= CheckSelect ? checked='checked':'' # class='chkbx' />");
                    
            columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
            //columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ft => ft.UI("ReceivePortsFilter")); 
            columns.Bound(p => p.ReceivePortName).Width(100).Filterable(ft => ft.UI("ReceivePortsFilter")).EditorTemplateName("ReceivePortsFilterDropdown");
            //columns.Bound(p => p.ReceivePortName).Width(100).Template(@<text>@Html.ActionLink("Show Receive Ports", "", new {re = @item.ReceivePortName })</text>).Filterable(ft => ft.UI("ReceivePortsFilter"));
            columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter"));
            columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
          
        })           
           
            .Events(e => e.FilterMenuInit("gridFilterMenuInit"))
            )

 function gridFilterMenuInit(e) {
              e.container.find(".k-header k-filterable");
              var grid = $("#gridTable").data("kendoGrid");
              if (e.field == "ReceivePortName") {
                  
                  //$("#grid .k-grid-header th[data-field=ReceivePortName] a.k-grid-filter").trigger("click");
                  var ddl = e.container.find("[data-role='dropdownlist']:first");
                  ReceivePortsFilter(ddl);
                
                  
              }
              
          }

          

          function ReceivePortsFilter(element) {
              element.kendoDropDownList({
                  dataSource: {
                      transport: {
                          read: "@Url.Action("FilterMenuCustomization_ReceivePorts")"   
                          
            }
        },
        optionLabel: "--Select Value--"
    });
          }
 
public ActionResult FilterMenuCustomization_ReceivePorts()
        {

            //List<LogModel> logs = this.GetAllMessages();
            //return Json(logs.Select(e => e.ReceivePortName).Distinct(), JsonRequestBehavior.AllowGet);

            return Json(Session["ReceivePortsList"], JsonRequestBehavior.AllowGet);
           
        }

[Alexander Popov]

Hi Rohit,

I am not sure I understand what the expected behavior is. Basically, the filterable.ui option of the column is used to specify what widget should be used in the filterable menu. This allows you to use a DataSource of your choice. The filterMenuInit can be used for even further customizations, however in the code you shared it re-initializes the DropDownlist with the same settings specified in the filterable.ui function. Would you please elaborate?

Regards,
Alexander Popov
Telerik

 

 

[Rohit]

Thanks Alex for helping me out.

Here is the scenario, I am trying to achieve.

1. On Initial Page load, Its displaying minimal data. The ReceivePort filter should get unique values within this minimal data and populate the dropdown accordingly. This is working correctly at this stage.

2.  If I change anything on the page, like filtered the data or changed the count of number of records to display on page, basically any activity on page. 
The request goes to controller and new dataset will be rendered. 
Then ReceivePort filter should repopulate and should bind the new unique receiveports from the new updated dataset. 
This is where I am struggling currently. Currently I am saving the receiveport list in session object in contoller, and later using that session object in action method of filtermenu.ui in controller.

I have attached a document of the web flow. Hopefully this will give you come idea of what I am trying to achieve.

[Rohit]

Hi Alex and All,

Did you get a chance to look into my problem. Any ideas or leads, where I can explore.

Cheers
Rohit

[Alexander Popov]

Hi Rohit, 

You can handle this scenario by populating the DropDownList each time the FilterMenu is opened. Here is a JavaScript example illustrating how you can subscribe to the FilterMenu's popup open event.

Regards,
Alexander Popov
Telerik