Sharing Top Content from the Angular-sphere.

How To Create A Grid Dynamically Using Angular

How To Create A Grid Dynamically Using #Angular by Sahil Saini cc @CsharpCorner

  • In every column object, we have multiple key value pairs.
  • In the object showTags, the key is used to merge multiple boolean columns into one column as tags.
  • we store the array of columns in $scope.columns and array of data in $rootScope.gridData.
  • Show and hide the columns by putting column.showColumns key on tags.
  • Similarly row data are created by iterating $scope.gridData with column key.Example :
    val[column.key]

    .

Create a grid dynamically with angularjs without hardcoding column names. AngularJS provides various features. One of them is 2 way data binding. In this article I will explain how you can create a grid dynamically from Angular.

@CsharpCorner: How To Create A Grid Dynamically Using #Angular by Sahil Saini cc @CsharpCorner

                “key” :  “Status” ,  

                “width” :  “5%” ,  

                “key” :  “ID” ,  

                “width” :  “1%” ,  

                “key” :  “Critical” ,  

                “width” :  “1%” ,  

                “key” :  “CSM” ,  

                “width” :  “1%” ,  

                “key” :  “E0/EC0” ,  

                “width” :  “1%” ,  

                “key” :  “MT2” ,  

                “width” :  “5%” ,  

                “key” :  “MT3” ,  

                “width” :  “5%” ,  

                “key” :  “Component” ,  

                “width” :  “9%” ,  

                “key” :  “Class Code” ,  

                “key” :  “Caption” ,  

                “key” :  “Dept” ,  

                “key” :  “Rank” ,  

                “key” :  “Interval” ,  

                “key” :  “Start Date” ,  

                “key” :  “End Date” ,  

                “key” :  “Date/ Hours” ,  

                “key” :  “Action” ,  

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-11” ,  

    “End Date” :  “2017-05-11” ,  

    “Critical” :  “true” ,  

    “CSM” :  “true” ,  

    “E0/EC0” :  “false” ,  

    “MT2” :  “CRI” ,  

    “Component” :  “Me Cyl. Head [6]” ,  

    “Class Code” :  “MDECYA” ,  

    “Caption” :  “OVH, TST, CLN OF Me Cyl. Head [6]” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00006” ,  

    “Interval” :  “6000 R/Hs” ,  

    “Date/ Hours” :  “6129 R/Hs” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

        “val” :  “P” ,  

        “color” :  “label label-info” ,  

        “title” :  “Planned”   

    “Start Date” :  “2017-05-09” ,  

    “End Date” :  “2017-05-11” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “false” ,  

    “Component” :  “Me Injector Valves W/Pipes [3]” ,  

    “Class Code” :  “MDECYA” ,  

    “Caption” :  “TST, INSP OF Me Injector Valves W/Pipes [3]” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “CE” ,  

    “ID” :  “00011” ,  

    “Interval” :  “500 R/Hs” ,  

    “Date/ Hours” :  “2812 R/Hs” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Due” ,  

        “color” :  “label label-success”   

    “Start Date” :  “2017-05-01” ,  

    “End Date” :  “2017-05-01” ,  

    “Critical” :  “true” ,  

    “CSM” :  “true” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Me Fo Pre-Heater” ,  

    “Class Code” :  “” ,  

    “Caption” :  “TST, CLN, INSP OF Me Fo Pre-Heater” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00150” ,  

    “Interval” :  “30 M” ,  

    “Date/ Hours” :  “5/20/2017” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-04” ,  

    “End Date” :  “2017-05-04” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Me Flowmeter” ,  

    “Class Code” :  “” ,  

    “Caption” :  “INSP, CLN OF Me Flowmeter” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00151” ,  

    “Interval” :  “30 M” ,  

    “Date/ Hours” :  “5/19/2017” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Due” ,  

        “color” :  “label label-success”   

    “Start Date” :  “2017-05-04” ,  

    “End Date” :  “2017-05-04” ,  

    “Critical” :  “true” ,  

    “CSM” :  “true” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Ae Cyl. Head [1] [3]” ,  

    “Class Code” :  “MDECYA” ,  

    “Caption” :  “OVH, INSP OF Ae Cyl. Head [1] [3]” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “3E” ,  

    “ID” :  “00164” ,  

    “Interval” :  “1500 R/Hs” ,  

    “Date/ Hours” :  “3845 R/Hs” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Due” ,  

        “color” :  “label label-success”   

    “Start Date” :  “2017-05-01” ,  

    “End Date” :  “2017-05-02” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “D/E Frequency Low [1]” ,  

    “Class Code” :  “” ,  

    “Caption” :  “TST, INSP OF D/E Frequency Low [1]” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “ETO” ,  

    “ID” :  “00922” ,  

    “Interval” :  “6 M” ,  

    “Date/ Hours” :  “11/14/2016” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-24” ,  

    “End Date” :  “2017-05-26” ,  

    “Critical” :  “true” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Boiler Fo Booster Pump Stbd” ,  

    “Class Code” :  “” ,  

    “Caption” :  “OVH, INSP OF Boiler Fo Booster Pump Stbd” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00470” ,  

    “Interval” :  “30 M” ,  

    “Date/ Hours” :  “5/6/2017” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-14” ,  

    “End Date” :  “2017-05-26” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Boiler Safety Valve” ,  

    “Class Code” :  “” ,  

    “Caption” :  “OVH, INSP OF Boiler Safety Valve” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “3E” ,  

    “ID” :  “00473” ,  

    “Interval” :  “12 M” ,  

    “Date/ Hours” :  “9/23/2016” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Due” ,  

        “color” :  “label label-success”   

    “Start Date” :  “2017-05-29” ,  

    “End Date” :  “2017-05-14” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Air Condition Condenser” ,  

    “Class Code” :  “” ,  

    “Caption” :  “TST, INSP OF Air Condition Condenser” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00554” ,  

    “Interval” :  “30 M” ,  

    “Date/ Hours” :  “6/1/2017” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-11” ,  

    “End Date” :  “2017-05-29” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Sludge Pump” ,  

    “Class Code” :  “” ,  

    “Caption” :  “OVH, INSP OF Sludge Pump” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00588” ,  

    “Interval” :  “30 M” ,  

    “Date/ Hours” :  “5/22/2017” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-13” ,  

    “End Date” :  “2017-05-11” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Bilge Filters” ,  

    “Class Code” :  “” ,  

    “Caption” :  “CLN, INSP OF Bilge Filters” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00589” ,  

    “Interval” :  “1 M” ,  

    “Date/ Hours” :  “9/5/2016” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-11” ,  

    “End Date” :  “2017-05-14” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Emergency Bilge Suction – Er” ,  

    “Class Code” :  “” ,  

    “Caption” :  “TST, INSP OF Emergency Bilge Suction – Er” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00591” ,  

    “Interval” :  “1 M” ,  

    “Date/ Hours” :  “9/5/2016” ,  

    “Action” :  “”   

data.push({  

    “Status” : [{  

        “val” :  “Overdue” ,  

        “color” :  “label label-danger”   

    “Start Date” :  “2017-05-14” ,  

    “End Date” :  “2017-05-13” ,  

    “Critical” :  “false” ,  

    “CSM” :  “false” ,  

    “E0/EC0” :  “true” ,  

    “Component” :  “Hydraulic For Operating Valve System” ,  

    “Class Code” :  “” ,  

    “Caption” :  “ANL, INSP OF Hydraulic For Operating Valve System” ,  

    “Dept” :  “ENG” ,  

    “Rank” :  “2E” ,  

    “ID” :  “00594” ,  

    “Interval” :  “6 M” ,  

    “Date/ Hours” :  “12/2/2016” ,  

    “Action” :  “”   

$rootScope.gridData = eval(data);  

How To Create A Grid Dynamically Using Angular

Comments are closed, but trackbacks and pingbacks are open.