We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how can i set the custom column to use checkbox view

hi ,

How can i set the custom column to use checkbox on the grid like data grid

regards,
Otto Machado



Attachment: grid_ce583570.rar

3 Replies

JR John Rajaram Syncfusion Team February 5, 2015 01:38 PM UTC

Hi Otto,

Thanks for using Syncfusion products.

We can render custom column in Gantt control with checkbox by using “Load” client side event and JSRENDER column template. Please refer the below code snippets for more details.

Code snippets:

<body style="position: static; margin: 0px; padding: 2px">

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

                        

            <div style="margin-left:20px;">{{if State}} <input class="customCheckbox" type="checkbox" checked="checked" value="" />{{else}} <input class="customCheckbox" type="checkbox" value="" />{{/if}}</div>

      

    </script>

@(Html.EJ().Gantt("Gantt").

   //...

   ClientSideEvents(eve=>

       {

           eve.Load("Load");

           eve.BeginEdit("BeginEdit");

       }).

   .Datasource(ViewBag.dataSource)

 )

@(Html.EJ().ScriptManager())

<script>

        function Load(args) {

            var columns = this.getColumns();

            columns.splice(4, 0,

                {

                    field: "State",

                    headerText: "State",

                    isTemplateColumn: true,

                    templateID: "customColumnTemplate",

                    width: "80px",

                   

                });

        }

       

        // To prevent the string edit while editing check box

        function BeginEdit(args) {

          

            var columnIndex = args.columnIndex;

            if (columnIndex == 4) {

                args.cancel = true;

            }

        }

        //Get checked row and select or unselect corresponding records

        $("#Gantt").on("change", ".customCheckbox", function (e) {

            var $tr = $(e.target).closest('tr'),

                ganttObj = $("#Gantt").data("ejGantt"),

                checkStatus = $(e.target).is(':checked'),

                 $gridRows = ganttObj._gridRows,

                 rowIndex = $gridRows.index($tr),

                 record = ganttObj._currentViewData && ganttObj._currentViewData[rowIndex];

                 record["State"] = checkStatus;

          

        });

    </script>

 </body>

We have also prepared a sample based on this for your reference. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118140/MVC09NewSampleCheckbox-9825191.zip

 

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

Regards,
John. R




OM Otto Moura Machado Filho February 5, 2015 04:08 PM UTC

Thanks for your reply,

but I saw at the example, that some values initializes with true to the field State, but when Gantt renders, all checkboxes are unchecked, and some of them should be checked.

I tried to fix it, but had no success.

Regards,
Otto Machado.


JR John Rajaram Syncfusion Team February 6, 2015 10:11 AM UTC

Hi Otto,

Sorry about the inconvenience caused.

We have achieved your requirement by using “Load” client side event for enabling the check boxes while rendering the Gantt control based on the data source field in the controller.

Please refer the below code snippets for more details.

Code snippets:

<body style="position: static; margin: 0px; padding: 2px">

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

<div style="margin-left:20px;">{{if State}} <input class="customCheckbox" type="checkbox" checked="checked" value="" />{{else}} <input class="customCheckbox" type="checkbox" value="" />{{/if}}div>

script>

@(Html.EJ().Gantt("Gantt").

//...

ClientSideEvents(eve=>

{

eve.Load("Load");

}).

.Datasource(ViewBag.dataSource)

)

@(Html.EJ().ScriptManager())

<script>

function Load(args) {

var columns = this.getColumns();

columns.splice(4, 0,

{

field: "State",

headerText: "State",

isTemplateColumn: true,

templateID: "customColumnTemplate",

width: "80px",

});

var proxy = this, ganttItems = proxy.model.ganttRecords;

for (var k = 0; k < ganttItems.length; k++)

ganttItems[k]["State"] = ganttItems[k].item["State"];

}

</script>

</body>

We have prepared a sample based on this. Please find the sample in the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118140/MVC09NewSampleCheckBoxUp692737922.zip

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

Regards,
John. R



Loader.
Live Chat Icon For mobile
Up arrow icon