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
  1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Custom column rendered as checkbox.

Custom column rendered as checkbox.


Hello,

Can we add a custom column rendered as checkbox control ?

We need add customs columns rendered as controls, i.e. select, checkbox, links, ...

We use the following code but the Gantt ignore the 'ColumnTemplate' and it render all columns as <td> :

<body>
    <form id="form1" runat="server">
    <ej:Gantt ID="GanttControlDefault" runat="server" AllowSelection="true" AllowColumnResize="true"
        Locale="es-ES" TaskIdMapping="TaskID" TaskNameMapping="TaskName" ScheduleStartDate="01/01/2015"
        ScheduleEndDate="01/03/2015" StartDateMapping="StartDate" EndDateMapping="EndDate" DurationMapping="Duration"
        ProgressMapping="Progress" ChildMapping="SubTasks" TreeColumnIndex="1"  DurationUnit="Hour"
        DateFormat="dd/MM/yyyy hh:mm:ss" Load="load">
        <ScheduleHeaderSettings ScheduleHeaderType="Day" DayHeaderFormat="dd MMMM yy" HourHeaderFormat="HH" />
        <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="cellEditing" />
    </ej:Gantt>
    
    
    <script type="text/x-jsrender" id="columnTemplate">   
        <div>{{:#data['PartNumber']}}</div>
    </script>

    <script type="text/x-jsrender" id="columnTemplateBool">
        <input id="groupCheckBoxList" name="groupCheckBoxList"  type="checkbox" value="{{:#data['Dispatched']}}" />
    </script>   
    
    <script type="text/javascript">
        function load(args) {
            var columns = this.getColumns();
            columns.splice(10, 0,
               {
                   field: "PartNumber",
                   headerText: "PartNumber",
                   columnTemplate: true,
                   templateId: "columnTemplate",
                   width: "220px"
               });
            columns.splice(10, 0,
               {
                   field: "Dispatched",
                   headerText: "Dispatched",
                   columnTemplate: true,
                   templateId: "columnTemplateBool",             
                   width: "120px"
               });
        }
    </script>
    </form>




Thanks for your support.

Attachment: Gantt_8561a0f2.zip

5 Replies
JR John Rajaram Syncfusion Team March 30, 2015 08:40 AM UTC

Hi OneTx,

Thanks for using Syncfusion products.

We would like to let you know that, In Gantt control we can customize the Gantt columns with Check box (Boolean edit), combo box (Drop Down List) and String Textbox for links using LOAD client side event and column template.

Please refer the below code snippets for more details.

Code snippets:

<body>

<form id="form1" runat="server"

<ej:Gantt ID="Gantt" runat="server"

//...

Load="Load" BeginEdit="BeginEdit">

</ej:Gantt>

<%--Column template for check box column--%>

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

<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>

<%--Column template for Link column--%>

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

<div style="margin-left:20px;">{{if Links}} <a rel='nofollow' href="{{:#data['Links']}}" target="_blank">Details</a>{{/if}}</div>

</script>

<script type="text/javascript">

//Sample Data for dropdown box

var dropDownData = [

{ text: "Open", value: "Open" },

{ text: "Progress", value: "Progress" },

{ text: "Testing", value: "Testing" },

{ text: "Completed", value: "Completed" }];

function Load(args) {

var columns = this.getColumns();

//Checkbox column with boolean edit

columns.splice(2,0,

{

field: "State",

headerText: "State",

editType: "booleanedit",

isTemplateColumn: true,

templateID: "customColumnTemplate1",

width: "80px",

});

//Column with drop down list

columns.splice(3, 0,

{

field: "TaskStatus",

headerText: "Task Status",

editType: "dropdownedit",

mappingName: "TaskStatus",

dropdownData: dropDownData,

width: "180px",

});

//Column with string edit for links

columns.splice(4, 0,

{

field: "Links",

headerText: "HyperLink",

editType: "stringedit",

mappingName: "Links",

isTemplateColumn: true,

templateID: "customColumnTemplate2",

width: "180px",

});

}

//To block double click event on checkbox column

function BeginEdit(args) {

var columnIndex = args.columnIndex;

if (columnIndex == 2) {

args.cancel = true;

}

}

//checked or unchecked checkbox and update the datasource

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

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

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

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

rowIndex = ($tr).index(),

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

record["State"] = checkStatus;

});

</script>

</form>

</body>

We have also prepared a sample based on this and you can find the sample under the following location:

Sample: http://www.syncfusion.com/downloads/support/forum/118644/GanttCustomColumnLinks668864302.zip

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

Regards,
John R


ON OneTx April 7, 2015 09:36 AM UTC

Thanks for your support.

This approach runs correctly, but we should change the customtemplate with the following code:

<%--Column template for check box column--%>
<script type="text/x-jsrender" id="customColumnTemplate">

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

</script>

Regards

JR John Rajaram Syncfusion Team April 8, 2015 07:00 AM UTC

Hi OneTx,

Thanks for the update.

We can also modify the code snippets of the column template as per your suggestion for rendering custom column with check box in Gantt control.

Please let us know if you require further assistance on this.
Regards,
John. R


SN Sam Nguyen September 19, 2015 02:20 AM UTC

Can you show me an sample of using dropdown with remote data?


my custom column look like this

 columns.splice(2, 0, {
                    field: "Progress",
                    headerText: "DropDown",
                    editType: "dropdownedit",
                    dataSource: dropdownvalues,
                    text: "name",
                    value: "id",
                    isTemplateColumn: false,
                    templateID: "customDropDownTemplate1"
                });

MK Mahalakshmi Karthikeyan Syncfusion Team September 21, 2015 12:33 PM UTC

Hi Sam,

Thanks for contacting Syncfusion support.

It is possible to load the custom drop down column with remote data in Gantt Control using “Load” client side event. Please refer the below code example for details.

<form id="form1" //…>

<ej:Gantt ID="Gantt" runat="server"

//…

Load="load">

</ej:Gantt> 

  <script type="text/javascript">          

            var projectResources = [

                { resourceId: 1, resourceName: "Project Manager" },

                { resourceId: 2, resourceName: "Software Analyst" },

                { resourceId: 3, resourceName: "Developer" },

                { resourceId: 4, resourceName: "Testing Engineer" }

            ];

            var resourceData = ej.DataManager(projectResources).dataSource.json;

           

            //To load resource from remote server

            //ej.DataManager({url:"http://(service url)"}); // drop down data in JSON format.

           

            function load(args) {

                var columns = this.getColumns();

                var columnData = {

                    field: "DropDown",

                    headerText: "DropDown",

                    mappingName: "DropDown",

                    editType: "dropdownedit",

                    dropdownData: resourceData,

                    editParams: { fields: { text: "resourceName", value: "resourceName" } }

                }

                columns.splice(2, 0, columnData);

            }

   </script>              

    </form>

Here we have referred the local ej.DataManager data as drop down data for custom column. Instead of the local data we can also pass the remote data in the ej.DataManager URL for oData as the drop down value. And which must be in JSON format. We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/118644/ze/GanttDropDown-1565092718

Regards,

Mahalakshmi K.


Loader.
Up arrow icon