Grid Dropdown Filter: Populate the filter on page ready function

9 posts, 0 answers
  1. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 28 Jan 2015 Link to this post

    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);
               
            }
  2. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 28 Jan 2015 Link to this post

    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
  3. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 29 Jan 2015 Link to this post

    Hi All,

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

    Thanks again for your help.

    cheers
    Rohit
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 30 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 30 Jan 2015 Link to this post

    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);
               
            }

  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 03 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 03 Feb 2015 Link to this post

    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.
  8. Rohit
    Rohit avatar
    14 posts
    Member since:
    Jan 2015

    Posted 05 Feb 2015 Link to this post

    Hi Alex and All,

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

    Cheers
    Rohit
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 05 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top