Thursday, 24 November 2016

Marge column in table using angular

-------------------------Controller----------------------------------------------
[HttpGet]
        public JsonResult GetColorData()
        {
            List<String> _List = new List<String>();
            try
            {
                _List = GetList();

                var groupedColorList = _List.GroupBy(u => u.Color)
                                                     .Select(grp => new { Color = grp.Key, Colors = grp.ToList() })
                                                     .ToList();

                var jsonResult = Json(new
                {
                    ColorList = groupedColorList
                }, JsonRequestBehavior.AllowGet);
                jsonResult.MaxJsonLength = Int32.MaxValue;
                return jsonResult;
            }
            catch (Exception ex)
            {
                return Json(new
                    {
                        ColorList = _List
                    }, JsonRequestBehavior.AllowGet);
            }
        }
---------------------------------------------View------------------------------------------------
   <tbody ng-repeat="group in ColorList ">
                        <tr ng-repeat="x in group.Colors">
                            <td rowspan="{{group.Colors.length}}" ng-hide="$index>0">{{x.Color}}
                            </td>
                         </tr>
<tbody>
------------------------------------Module------------------------------
 $scope.ColorList = [];
angular.element(document).ready(function () {
           
            loaderShow();
            $http({
                method: "Get",
                url: '@Url.Action("GetColorData", "Color")',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
            }).success(function (response) {
                $scope.ColorList = response.ColorList ;

            });
            loaderHide();
        });
 

No comments:

Post a Comment

Row based styling for Primeng DataTable using Angualr 2,4

------------------------------------Component.Html---------------- < p -dataTable id = "Tbl" [ rowStyleClass ]= " Fu...