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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how can i set the custom column to use checkbox view

Thread ID:

Created:

Updated:

Platform:

Replies:

118140 Feb 4,2015 01:36 PM UTC Feb 6,2015 10:11 AM UTC ASP.NET MVC 3
loading
Tags: Gantt
Otto Moura Machado Filho
Asked On February 4, 2015 01:36 PM UTC

hi ,

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

regards,
Otto Machado



Attachment: grid_ce583570.rar

John Rajaram [Syncfusion]
Replied On 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



Otto Moura Machado Filho
Replied On 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.

John Rajaram [Syncfusion]
Replied On 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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;