custom display in treegrid cell

[David Price]

My TreeGrid has a column which displays numbers 

How can I make the items display a small box each number showing a different colour e.g. 1 = Red , 2 = yellow

I have css which can display different boxes 

style.css:333

.icon_div.noiorange.orange i {

1. background: #c65911;

}

style.css:333

.icon_div.noiorange i {

1. height: 20px;
2. width: 20px;
3. line-height: 20px;
4. color: #c65911;
5. font-size: 12px;

}

So it would look like this for example

I need some way to create custom CSS boxes in each cell?

David

[Punniyamoorthi Elangovan]

Hi David, 

Thank you for contacting Syncfusion support. 

We have analyzed your attached screenshot and your requirement. We can achieve this by using queryCellInfo client side event with column template support. Please refer the below code snippet. 

<style> 

        .customcolor1 {         

        background-color: #c65911 !important; 

        left: 202px; 

        top: 10px;   

              

       } 

        .customcolor2 {         

        background-color:#0000FF !important; 

        left: 202px; 

        top: 10px;   

           

       } 

        .customcolor3 {         

        background-color: #008000 !important; 

        left: 202px; 

        top: 10px;   

          

       } 

      .ganttcolorCell { 

        margin-left: 59px; 

        height: 14px !important; 

        width: 14px !important;                 

       } 

     </style> 

 

<ej:TreeGrid runat="server" Height="10px" ID="TreeGrid" ChildMapping="SubTasks" QueryCellInfo="queryCellInfo" 

//.. 

    <Columns> 

       <ej:TreeGridColumn HeaderText="&#10004;" Field="xxxx3" AllowFreezing="true" /> 

       <ej:TreeGridColumn  HeaderText="Head5" IsTemplateColumn="true" TemplateID="colorBox"> 

       </ej:TreeGridColumn> 

    </Columns> 

</ej:TreeGrid> 

 

 

<script> 

        function queryCellInfo(args) { 

            if (args.column.headerText == "Head5") { 

                if (args.data.xxxx3 == 1) 

                    $(args.cellElement).find("div").addClass("customcolor1"); 

                else if (args.data.xxxx3 == 2) 

                    $(args.cellElement).find("div").addClass("customcolor2"); 

                else if (args.data.xxxx3 == 3) 

                    $(args.cellElement).find("div").addClass("customcolor3"); 

            } 

        } 

</script> 

 

<script type="text/x-jsrender" id="colorBox"> 

        <div class="ganttcolorCell"></div> 

</script> 

 

We have prepared the sample with your requirement please find the sample like below 

http://www.syncfusion.com/downloads/support/forum/136595/ze/custom_cell999933921 

 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

 

[David Price]

Hi,

Is there a way using Javascript and a checkbox without a postback to hide an entire row in the treegrid where for example the class = customcolor1

David

[Punniyamoorthi Elangovan]

Hi David, 

Thank you for contacting Syncfusion support. 

We have analyzed your requirement and we need some clarification on this. Please let us know whether you need to hide the entire row while loading or dynamically, it will be very helpful for us to understand your requirement clearly and provide the better solution. 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[David Price]

Hi,

The goal is after the treegrid has loaded and displayed all the rows . Some rows will have been given a class e.g.

$(args.cellElement).find("div").addClass("customcolor1"); 

Is there a way to have a checkbox on the page that would remove the entire row that has the cell customcolor1 in it.

So for example on checkbox click all rows e.g. 8 rows that have the cell customcolor1 would be hidden.

David

[Punniyamoorthi Elangovan]

Hi David, 

Thank you for your update. 

We have analyzed your query. We have removed the rows in TreeGrid on checkbox click action. Please find the below code snippet to achieve your requirement, 

<div id="checkBox"> 

        <input type="checkbox" style="height:20px;width:20px"   id="hideShow" /> <label>HideRow</label> 

</div> 

 

<script> 

            $("#hideShow").click(function (e) { 

                var removeRecords = [], 

                treeObj = $("#TreeGrid").data("ejTreeGrid"), 

                flatRecords = treeObj.model.flatRecords, 

                removeRecords = flatRecords.filter(function (record) { 

                    return record.xxxx3 == 1 

                }); 

                for (i = 0; i < removeRecords.length; i++) { 

                    var args = []; 

                    args.requestType = ej.TreeGrid.Actions.Delete; 

                    args.data = removeRecords[i]; 

                    treeObj._removeRecords(args); //Method to remove the row 

                } 

                treeObj._ensureDataSource(args); 

                treeObj.updateHeight(); 

            }) 

</script> 

 

We have prepared the sample with your requirement please find the sample below 

http://www.syncfusion.com/downloads/support/forum/136595/ze/custom_cell2018614860 

 

Regards, 

Punniyamoorthi 

[David Price]

Thank you for your example but you are deleting the rows from the tree grid and all I want to achieve is to hide them. So when you click back on the checkbox they appear again.

Many Thanks

David

[Punniyamoorthi Elangovan]

Hi David, 

Thank you for your update. 

We have analyzed your requirement and we have modified the sample to meet your requirement, we have hidden the TreeGrid rows virtually while checking the checkbox and have refreshed the TreeGrid content on checkbox unchecking action. Please refer the below code snippet. 

<div id="checkBox">  

        <input type="checkbox" style="height:20px;width:20px"   id="hideShow" /><label>HideRow</label>  

</div>  

 

<script>  

      var parentItemcollection = []; 

            $("#hideShow").click(function (e) { 

                e = e || window.event; 

                var targetEle = e.target, 

                checkStatus = $(targetEle).is(':checked'); 

                var removeRecords = [], 

               treeObj = $("#TreeGrid").data("ejTreeGrid"), 

               flatRecords = treeObj.model.flatRecords; 

                if (!checkStatus) { 

                    treeObj.option("dataSource", parentItemcollection); 

                    parentItemcollection = []; 

                } 

                if (checkStatus) { 

                    for (i = 0; i < treeObj.model.parentRecords.length; i++) { 

                        parentItemcollection.push($.extend(true, {}, treeObj.model.parentRecords[i].item)); 

                    } 

                    removeRecords = flatRecords.filter(function (record) { 

                        return record.xxxx3 == 1 

                    }); 

                    for (j = 0; j < removeRecords.length; j++) { 

                       var args = []; 

                        args.requestType = ej.TreeGrid.Actions.Delete; 

                        args.data = removeRecords[j]; 

                        treeObj._removeRecords(args); //Method to remove the row 

                    } 

                    treeObj._ensureDataSource(args); 

                    treeObj.updateHeight(); 

                } 

             }) 

</script>  

We have prepared the sample with your requirement please find the sample below  

http://www.syncfusion.com/downloads/support/forum/136595/ze/custom_cell_sample150988904 

Regards,  

Punniyamoorthi