filtering by group

[Michael]

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!

 

[Michael]

here is my grid

[Tsvetina]

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

[Michael]

Ok,

if I want to do this with drop down list?

Thanks!

 

[Tsvetina]

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

[Michael]

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!

[Tsvetina]

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

[Michael]

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!

 

[Tsvetina]

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

[Michael]

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

[Tsvetina]

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