filtering by group

11 posts, 0 answers
  1. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 24 May 2018 Link to this post

    Hi,

    this is my grid

    @(Html.Kendo().Grid<ProjectViewModel>()
          .Name("GridManagementProjects")
          .Columns(columns =>
          {
              columns.Bound(c => c.ProductID).Title("Product Id").Hidden();
              columns.Bound(c => c.ProductName).Title("Product Name").Hidden();
              columns.Bound(c => c.Name).Title("Name").Width(120)
                      .Filterable(f => f.UI("NamesProjectFilter")
                      .Mode(GridFilterMode.Row)
                      .Extra(false).Messages(m => m.Info("Show items with this name"))
                      .Operators(operators => operators
                      .ForString(str => str.Clear()
                      .IsEqualTo("Is equal to"))));
              columns.Bound(c => c.Leader.Name).EditorTemplateName("LeaderEditor").Title("Leader").Width(150)
                     .Filterable(f => f.UI("developersFilter")
                     .Mode(GridFilterMode.Row)
                     .Extra(false).Messages(m => m.Info("Show items with this leader"))
                     .Operators(operators => operators
                     .ForString(str => str.Clear()
                     .IsEqualTo("Is equal to"))));
              columns.Bound(c => c.CodeReviewer.Name).EditorTemplateName("CodeReviewerEditor").Title("Code Reviewer").Width(150)
                     .Filterable(f => f.UI("developersFilter")
                     .Mode(GridFilterMode.Row)
                     .Extra(false).Messages(m => m.Info("Show items with this code reviewer"))
                     .Operators(operators => operators
                     .ForString(str => str.Clear()
                     .IsEqualTo("Is equal to"))));
              columns.Bound(c => c.DevelopersDataSource).Width(200).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
                     .Filterable(f => f.UI("developersMultiFilter")
                     .Extra(false)
                     .Messages(m => m.Info("Show items contain these developers")))
                     .Sortable(false);
              columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<div style='width:94px; height:94px;'><canvas id='projectManagementChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>");
              columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").Format("{0: MM/dd/yyyy}").Width(130);
              columns.Bound(c => c.ActualEndDate).Title("Actual End Date").Format("{0: MM/dd/yyyy}").Width(130);
              columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Width(130).Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Width(130).Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.GitUrl).Title("Git Url").ClientTemplate("<a href='#= GitUrl #'>#= GitUrl #</a>").Width(120);
              columns.Bound(c => c.StageId).Title("Stage").EditorTemplateName("StageEditor")
                     .Filterable(f => f.Extra(false)
                     .Operators(operators => operators
                     .ForString(str => str.Clear()
                     .IsEqualTo("Is equal to"))))
                     .Width(110);
              columns.Bound(c => c.Description).Title("Description").Width(250).HtmlAttributes(new { @class = "customCell" });

              if (User.IsInRole("secSftwrProjMgmtDepl"))
              {
                  columns.Bound(c => c.VstsBuildName).Title("Build Name").Width(120);
                  columns.Bound(c => c.VstsRepository).Title("Repository").Width(120);
                  columns.Bound(c => c.OctoProject).Title("Octopus Project").Width(120);
              }
              columns.Command(command =>
              {
                  command.Custom("ADDTASK").Text("Add Task").Click("addTask");
                  command.Custom("DeployProject").Click("DeployProject").Text("Deploy");
                  if (User.IsInRole("secSftwrProjMgmtAdmn"))
                  {
                      command.Custom("CompleteProject").Click("CompleteProject").Text("Complete");
                  }
                  command.Custom("ProjectRequirements").Text("Requirements").Click("addProjectConditions");
              }).Width(160).HtmlAttributes(new { id = "addTaskButton" });
              columns.Command(command => { command.Edit().UpdateText(" ").Text(" ").CancelText(" "); if (User.IsInRole("secSftwrProjMgmtAdmn")) { command.Destroy().Text(" "); } }).Width(150);

          })
          .Groupable(g => g.Enabled(false))
                          .Filterable()
                          .ToolBar(toolbar =>
                          {
                              if (User.IsInRole("secSftwrProjMgmtAdmn"))
                              {
                                  toolbar.Template(@<text>
            <div class="toolbar" style="float:left">
                <a class="k-button k-button-icontext" onclick='addProjectAjax()' href="#">
                    <span class="k-icon k-i-add"></span> ADD PROJECT
                </a>

                <a class="k-button k-grid-excel k-button-icontext" href="#">
                    <span class="k-icon k-i-excel"></span>Export to Excel
                </a>
            </div>
                                </text>);
                              }
                              else
                                  toolbar.Excel();
                          })
                                .Resizable(resize => resize.Columns(true))
                                .Editable(editable => editable.Mode(GridEditMode.InLine))
                                .Excel(excel => excel
                                .AllPages(true)
                                .FileName("Projects.xlsx")
                                .Filterable(true)
                                .ForceProxy(true)
                                .ProxyURL(Url.Action("FileExportSave", "Home")))
                                .Pageable(pager => pager
                                .Refresh(true)
                                .PageSizes(true)
                                .PageSizes(new int[] { 6, 15, 20 })
                                .ButtonCount(5))
                                .Sortable(sortable =>
                                {
                                    sortable.SortMode(GridSortMode.MultipleColumn)
                                    .Enabled(true);
                                })
                                .Scrollable()
                                .Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("FilterMenuInitProject").DataBound("onDataBoundSavedProjects").Cancel("createPieAfterCancellation").Edit("onProjectEdit").Save("onProjectSave").ExcelExport("exportProjects"))
                                .DataSource(dataSource => dataSource
                                .Ajax()
                                .Group(group => group.Add(p => p.ProductName))
                                .PageSize(20)
                                .Events(events => events.Error("errorHandlerProject"))
                                .Read(read => read.Action("GetSavedManagementProjects", "Project").Data("additionalData"))
                                .Model(model =>
                                {
                                    model.Id(item => item.ID);
                                    model.Field(a => a.ActualStartDate).Editable(false);
                                    model.Field(a => a.ActualEndDate).Editable(false);
                                    model.Field(a => a.PercentCompleted).Editable(false);
                                })
                                .Update(update => update.Action("UpdateProject", "Project").Data("serialize"))
                                .Destroy(update => update.Action("DeleteProject", "Project").Data("serialize"))))

     

     

     

     

     

     

    I want filter by the group ("ProductName"), I don't want to present like a regular column, but I want that the user can use filter on this to find his group.

    how can I do it?

    thanks!

     

  2. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 27 May 2018 Link to this post

    here is my grid
  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 28 May 2018 Link to this post

    Hi Michael,

    You can achieve this if you add an input (and possibly a button to your toolbar template) and filter the Grid by ProductName when a new value is entered:
    toolbar.Template(@<text>
        <div class="toolbar">
            <input class="k-textbox" id="productSearch" />
            <button class="k-button" onclick="searchProduct()">Search</button>
        </div>
        </text>);
    })

    function searchProduct(input) {
        var value = $("#productSearch").val();
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.filter({field: "ProductName", operator: "contains", value: value});
    }

    Filtering by an entire group is not possible but even if you use a regular value filter, still all items belonging to a given group will match the filtering criteria together and the result will look like a group filter. I am also attaching a screenshot of the final result.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 29 May 2018 Link to this post

    Ok,

    if I want to do this with drop down list?

    Thanks!

     

  5. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 May 2018 Link to this post

    Hi Michael,

    You can see this demo, which shows how to filter the Grid using a DropDownList in the Toolbar template:
    Grid / Toolbar template

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 10 Jun 2018 Link to this post

    Hi,

    Some filters in my grid have a drop down list coming from server side like the column name, I want that according to selection in the drop down list of the group filter the list of the name column will change.

    How can I do it?

    this is the action result for the names list in the filter:

        public ActionResult NamesProjectList()
            {
                List<string> projects;
                             projects = m_Repository.GetAll<TaskManagement.Data.Project>().OrderBy(x => x.Name)
                        .Select(x => x.Name).ToList();

                return Json(projects, JsonRequestBehavior.AllowGet);

             }

    thanks!

  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 12 Jun 2018 Link to this post

    Hello Michael,

    Could you show us your DropDownList filters implementation? If you are using a DataSource for each filter, you can declare these DataSources as standalone components and when a group is selected, you can access these DataSources and apply a filter expression to them using the client-side filter method.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 15 Jun 2018 Link to this post

    This is my implementation to the drop down list:

    var NamesProjectFilter = function (element) {

        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "/Project/NamesProjectList",

                },
                valuePrimitive: false
            },
            optionLabel: "Select a project..."

        });

    }

    can you give me please an example for this?

    Thank you!

     

  9. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 15 Jun 2018 Link to this post

    Hello Michael,

    Here is a sample snippet showing what I suggest you to do with some comments to explain it:
    // Declare a standalone DataSource instance and assign it to the custom filter
    var namesDataSource = new kendo.data.DataSource({
        transport: {
           read: "/Project/NamesProjectList",
        }
    });
    var NamesProjectFilter = function (element) {
        element.kendoDropDownList({
            dataSource: namesDataSource,
                valuePrimitive: false
            },
            optionLabel: "Select a project..."
        });
    }
    // assuming this is the Change event handler of the DropDownList in the toolbar (like categoriesChange in the demo I linkd to)
    function dropDownChange(e){
        var value = this.value();
     
        namesDataSource.filter({field: "ProductName", operator: "eq", value: value});
    }


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 21 Jun 2018 in reply to Tsvetina Link to this post

    Thank you for your answer, but this is not working. I get in the drop down list filter an empty list.

    maybe I need to add something to server side, in this function?:

     public ActionResult NamesProjectList()
            {
                List<string> projects;
                             projects = m_Repository.GetAll<TaskManagement.Data.Project>().OrderBy(x => x.Name)
                        .Select(x => x.Name).ToList();
                return Json(projects, JsonRequestBehavior.AllowGet);

             }

    Thanks

  11. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 25 Jun 2018 Link to this post

    Hello Michael,

    Can you provide some more details—does the filter DropDownList fail to populate from the beginning or only after the custom filter is applied to it? If it is the second scenario, have you confirmed that the TaskManagement.Data.Project model contains the field that the custom filter is filtering on? In my example, I am using ProductName but you may need to adjust it to Name or some other field name that matches the model properties:
    namesDataSource.filter({field: "ProductName", operator: "eq", value: value});

    If the problem persists, we will be able to help you resolve it faster if you open a support ticket and send us your project there, so we can debug it and see why the DropDownList is not populating.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top