grid

[Michael]

Hi ,

this is my grid:

@using TaskManagementUI.Models
@model InfoModel
<link href="~/Css/SavedManagementProjects.css" rel="stylesheet" />
<script src="~/JavaScript/SavedManagementProjects.js"></script>

<script type="text/kendo" id="DevelopersTemplate">
    <ul>
        #for(var i = 0; i< data.length; i++){#
        <li title="#:data[i].Name#">#:data[i].Name#</li>
        #}#
    </ul>
</script>

@Html.Partial("~/Views/Shared/Info.cshtml", Model)

@(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 =>
                      {
                          toolbar.Template(@<text>
                                               <div class="toolbar" style="float: left">
                                                   @(Html.Kendo().DropDownList()
                                                         .Name("ProjectsByProduct")
                                                         .OptionLabel("SELECT PRODUCT")
                                                         .DataTextField("Name")
                                                         .DataValueField("ID")
                                                         .AutoBind(false)
                                                         .Events(e => e.Change("ProductGroupChange"))
                                                         .DataSource(ds =>
                                                         {
                                                             ds.Read("ProductList", "Product");
                                                         }))
                                                   <a class="k-button k-grid-excel k-button-icontext" href="#">
                                                       <span class="k-icon k-i-excel"></span>Export to Excel
                                                   </a>

                                                   @if (User.IsInRole("secSftwrProjMgmtAdmn"))
                                                   {
                                                       <a style="margin:0 "class="k-button k-button-icontext" onclick='addProjectAjax()' href="#">
                                                           <span class="k-icon k-i-add"></span> ADD PROJECT
                                                       </a>
                                                   }
                                               </div>
                        </text>);
                      })



                            .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"))))

 

 

 

 

 

in the tool bar I have dropdown list for doing filter on the group.

also I have drop down list filter on this column in the grid :   columns.Bound(c => c.Name).Title("Name").Width(120).Filterable(f => f.UI("NamesProjectFilter").

this filter is for presenting name list for the projects.
I want that this drop down list will present only projects that belong to the selected product (in the group filter).

so i did  like your example of cascading  drop down list https://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist:

this is the drop down list of the projects

var NamesProjectFilter = function (element) {
       
    element.kendoDropDownList({
        autoBind: false,
        cascadeFrom: "ProjectsByProduct",
        dataSource: {
            type: "odata",
            serverFiltering: true,
            transport: {
                        read: "/Project/NamesProjectList"
            }
        },
            valuePrimitive: false,
        optionLabel: "Select a project..."

    });

}

 

this is the function in the controller:

 

  public ActionResult NamesProjectList([DataSourceRequest] DataSourceRequest request, int? ID)
        {
            List<string> projects;
                if (ID != null)
                {
                    projects = m_Repository.FindAllBy<TaskManagement.Data.Project>(p => p.ProductID == ID)
                        .OrderBy(x => x.Name)
                        .Select(x => x.Name).ToList();
                }
                else
                {

                    projects = m_Repository.GetAll<TaskManagement.Data.Project>()
                        .OrderBy(x => x.Name)
                        .Select(x => x.Name).ToList();
                }
 return Json(projects, JsonRequestBehavior.AllowGet);

        }

 

 

everything is working fine, the value of the selected product is sent in the network. but in the controller I always get null.

can someone help me please?

Thanks!

 

[Konstantin Dikov]

Hi Michael,

What I could suggest is to remove the DataSourceRequest from the action method result and leave only the ID. You can also try changing it to string to see if that will make any difference. The following is the Read action for the cascading DropDownList:

public JsonResult Cascading_Get_Products(int? categories)
        {
            var northwind = new SampleEntities();
            var products = northwind.Products.AsQueryable();

            if (categories != null)
            {
                products = products.Where(p => p.CategoryID == categories);
            }

            return Json(products.Select(p => new { ProductID = p.ProductID, ProductName = p.ProductName}), JsonRequestBehavior.AllowGet);
        }

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Michael]

I tried it yet, it doesn't work. the Id is always null.

this is not the problem.

Thanks!

[Konstantin Dikov]

Hi Michael,

After some more tests it seems that the problem is due to the mixing of MVC wrapper with Kendo UI widget and the configuration. Since the DropDownList initialized with jQuery is configured for "odata", the request will pass the filter expression in the following format:

$filter: ID eq 1

Note that the demo for the Kendo UI DropDownList is using odata service and it expects that exact format of the request. With MVC controller this will not be the case and the data should be passed manually:

• https://demos.telerik.com/aspnet-mvc/dropdownlist/cascadingdropdownlist

With the above in mind, I would suggest that you set the "read.data" function for manually retrieving the value from the other DropDownList and pass it with "ID" name in the returned object:

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.read#transport.read.data

Best Regards,
Konstantin Dikov
Progress Telerik

[Michael]

Ok. got the problem.

Can you please write an example?

Thank you!

 

[Konstantin Dikov]

Hello Michael,

You could remove the "odata" from the DropDownList configuration and use options similar to the MVC wrapper:

        <input disabled="disabled" id="products" name="products" style="width:100%" type="text" /><script>
    kendo.syncReady(function(){jQuery("#products").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/aspnet-mvc/DropDownList/Cascading_Get_Products","data":filterProducts},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"ProductName","autoBind":false,"dataValueField":"ProductID","optionLabel":"Select product...","cascadeFrom":"categories"});});
</script>
        <script>
            function filterProducts() {
                return {
                    categories: $("#categories").val()
                };
            }
        </script>

The above code is from the online demo, showing the DropDownList options generated for the DropDownList helper. The important part is the dataSource configuration and the "data" function.

Let me know if that resolves the issue.


Regards,
Konstantin Dikov
Progress Telerik

[Michael]

I don't understand yet, how do you bind the drop down list in the  filter. I mean the filter doesn't have Id. it's not an input like in your example?

it's look like that:

<input title="Value" data-bind="value:filters[0].value" class="" type="text" data-role="projectfiltername" style="display: none;">

it's is not look like a regular kendo dropdown list and does not behave like a regular one.

so how can I bind it to somewhere?

Please stick to the my example, if you can, because these small details change all the picture.

thank you!

[Konstantin Dikov]

Hi Michael,

In the code snippet that you have shared, there is custom filter widget that you are initializing and you need to change its configuration accordingly and remove the "odata" type from the dataSource, because there is no "odata" service and the request could not be handled in the controller (due to the different format of the request). Please try the following and let me know if that makes any difference:

{"dataSource":{

  "transport":{

    "read":{

       "url":"/Project/NamesProjectList",

        "data":filterProjects
       }

  }

}

 
...

 

<script>

    function filterProjects() {

        return {

            id: $("#ProjectsByProduct").data("kendoDropDownList").value()

        };

    }

</script>

Regards,
Konstantin Dikov
Progress Telerik

[Michael]

Thank you!

I did it like that and it's working great!

function filterProjectsByProduct() {
    return {
        ID: $("#ProjectsByProduct").val()
    };
}

NamesProjectFilter = function (element) {
    debugger;

    kendo.syncReady(function () {
        element.kendoDropDownList(
            {
                "dataSource":
                  { "transport": { "read": { "url": "/Project/NamesProjectList", "data": filterProjectsByProduct }, "prefix": "" }, "serverFiltering": true, "filter": [], "schema": { "errors": "Errors" } }, "autoBind": false,"optionLabel":"Select a project...",cascadeFrom: "ProjectsByProduct"
            });
    });
  


}

 

but I have a small problem: when I don't select a group in the product filter, the project dropdown list became disable, and I want it to present all the projects.

Can you help me with this?

Thanks!

[Konstantin Dikov]

Hello Michael,

I have to say that this is how the cascading functionality works, so there is nothing that I could suggest for resolving this with the current configuration. In order to display all records in the second DropDownList you could remove the cascading functionality and manually call the "read" method of the second DropDownList on each change event of the first one.

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik