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.
Unfortunately, activation email could not send to your email. Please try again.

Custom column rendered as checkbox.

Thread ID:

Created:

Updated:

Platform:

Replies:

118644 Mar 27,2015 06:03 AM Sep 21,2015 08:33 AM ASP.NET Web Forms 5
loading
Tags: Gantt
OneTx
Asked On March 27, 2015 06:03 AM


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

John Rajaram [Syncfusion]
Replied On March 30, 2015 04:40 AM

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


OneTx
Replied On April 7, 2015 05:36 AM

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

John Rajaram [Syncfusion]
Replied On April 8, 2015 03:00 AM

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


Sam Nguyen
Replied On September 18, 2015 10:20 PM

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"
                });

Mahalakshmi Karthikeyan [Syncfusion]
Replied On September 21, 2015 08:33 AM

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.


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.

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.

;