Server-Side event OnRowSelected not fired

[Henrique]

Hi,

I created the OnRowSelected event but it is not fired.

When the user select a row, I need :
- To SET ScheduleStartDate and ScheduleEndDate iqual the StartDate and EndDate of the Predecessor of a selected row.
- To refresh Gantt to show the new dates.

Regards

Marcelo Henrique

[Bharath Marimuthu]

Hi Marcelo,

Sorry about the inconvenience caused.

We are able to reproduce the issue for serverside event “OnRowSelected” ,and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But now we have achieved your requirement through clientside event “RowSelected” and it is possible to change the schedule startdate and enddate using “updateScheduleDates” public method . Please refer the below code snippets for changing the schedule’s start date and end date of the Gantt control with the corresponding predecessor record’s date of the selected row item.

Code Snippet:

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

RowSelected="rowselected">

</ej:Gantt>

<script>

//...

function rowselected(args) {

var selectedRowItem = args,

length = selectedRowItem.data.predecessor.length,

//Obtaining the Gantt object

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

scheduleStartDate = ganttObject.model.scheduleStartDate,

scheduleEndDate = ganttObject.model.scheduleEndDate;

//check if the record has more than one predecessor

for (var i = 0; i < length; i++) {

//Extract the predecessor record

var predecessorRecord = ganttObject.model.ganttRecords[parseInt(args.data.predecessor[i].from) - 1];

if (args.data.item["TaskID"] != predecessorRecord.item["TaskID"]) {

//Update the dates with predecessor's start date and end date

if (new Date(scheduleStartDate).getTime() != new Date(predecessorRecord.item["StartDate"]).getTime()) {

scheduleStartDate = predecessorRecord.item["StartDate"];

}

if (new Date(scheduleEndDate).getTime() != new Date(predecessorRecord.item["EndDate"]).getTime()) {

scheduleEndDate = predecessorRecord.item["EndDate"];

}

}

}

//Update the Gantt schedule startdate

ganttObject.model.scheduleStartDate = scheduleStartDate;

//UPdate the Gantt schedule enddate

ganttObject.model.scheduleEndDate = scheduleEndDate;

//Rerender Gantt schedule with new dates

$("#Gantt").ejGantt("updateScheduleDates", scheduleStartDate,scheduleEndDate);

}

</script>

Thus Gantt control will be refreshed with new dates. We have also prepare a sample for your reference based on this , please find the sample in the below location,

Sample Location: http://www.syncfusion.com/downloads/support/forum/118716/TwoColumnGantt867907094.zip

Let us know if you need further assistance on this.

Thanks,
Bharath.

[Henrique]

Hello.

Forgive me for being slow to respond, the last few days have been a lot of work.

The code you provide didn't work for me, but was very helpful to change for what I need.

But, in the new version it didn't work.

function RowSelected(args)

{

var selectedRowItem = args,

ganttObject = $("#gatAgenda").data("ejGantt"),

scheduleStartDate = ganttObject.model.scheduleStartDate, scheduleEndDate = ganttObject.model.scheduleEndDate;

if (selectedRowItem.data.level == 0) {

scheduleStartDate = selectedRowItem.data.startDate;

scheduleEndDate = selectedRowItem.data.endDate;

} else {

scheduleStartDate = selectedRowItem.data.parentItem.startDate;

scheduleEndDate = selectedRowItem.data.parentItem.endDate;

}

//Update the Gantt schedule startdate

ganttObject.model.scheduleStartDate = scheduleStartDate;

//UPdate the Gantt schedule enddate

ganttObject.model.scheduleEndDate = scheduleEndDate;

//Rerender Gantt schedule with new dates

$("#gatAgenda").ejGantt("updateScheduleDates", scheduleStartDate, scheduleEndDate);

}

<ej:Gantt

ID="gatAgenda"

runat="server"

AllowSelection="True"

AllowSorting="True"

TaskIdMapping="TaskId"

TaskNameMapping="TaskName"

EndDateMapping="EndDate"

StartDateMapping="StartDate"

ProgressMapping="Progress"

DurationMapping="Duration"

ParentTaskIdMapping="ParentId"

ChildMapping="Children"

TreeColumnIndex="1"

AllowGanttChartEditing="False"

DataSourceID="edsAgenda"

EnableResize="true"

Locale="pt-BR"

EnableCollapseAll="True"

Load="Load" RowSelected="RowSelected">

<ScheduleHeaderSettings ScheduleHeaderType="Month" MonthHeaderFormat="MMM yyyy" WeekHeaderFormat="dd/M" />

<SizeSettings Width="100%" Height="100%" />

</ej:Gantt>

Thanks again.

Regards

Henrique

[Mahalakshmi Karthikeyan]

Hi Marcelo,

Sorry for the inconvenience caused.

We would like to inform you that we have changed the records collection name “ganttRecords” to “flatRecords” in our volume 1 main release(13.0.1.21). We recommend you to follow the same in your code. Please refer the updated code snippet below for more details.

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

RowSelected="rowselected">

ej:Gantt>

<script>

//...

function rowselected(args) {

var selectedRowItem = args,

length = selectedRowItem.data.predecessor.length,

//Obtaining the Gantt object

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

scheduleStartDate = ganttObject.model.scheduleStartDate, scheduleEndDate = ganttObject.model.scheduleEndDate;

//check if the record has more than one predecessor

for (var i = 0; i < length; i++) {

//Extract the predecessor record

var predecessorRecord = ganttObject.model.flatRecords[parseInt(args.data.predecessor[i].from) - 1];

if (args.data.item["TaskID"] != predecessorRecord.item["TaskID"]) {

//Update the dates with predecessor's start date and end date

if (new Date(scheduleStartDate).getTime() != new Date(predecessorRecord.item["StartDate"]).getTime()) {

scheduleStartDate = predecessorRecord.item["StartDate"];

}

if (new Date(scheduleEndDate).getTime() != new Date(predecessorRecord.item["EndDate"]).getTime()) {

scheduleEndDate = predecessorRecord.item["EndDate"];

}

}

}

//Update the Gantt schedule startdate

ganttObject.model.scheduleStartDate = scheduleStartDate;

//UPdate the Gantt schedule enddate

ganttObject.model.scheduleEndDate = scheduleEndDate;

//Rerender Gantt schedule with new dates

$("#Gantt").ejGantt("updateScheduleDates", scheduleStartDate,scheduleEndDate);

}

</script>

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/118716/TwoColumnGantt867907094-668030167.zip

Please let us know if you need more information on this.

Regards,

Mahalakshmi K.

[Henrique]

Hi, 

The code you provided don't work for me because I'm not using [predecessor], I'm using [parentItem].

I ran another test right now and I find the solution

WORKS ON 12.4.0.34 BUT NO IN 13.1.0.21

Using Syncfusion 12.4.0.34: 

ganttObject = $("#gatAgenda").data("ejGantt")

.

.

//Rerender Gantt schedule with new dates

$("#gatAgenda").ejGantt("updateScheduleDates", scheduleStartDate, scheduleEndDate);

SOLUTION

After Update Syncfusion to 13.1.0.21:

ganttObject = $("#cphConteudo_gatAgenda").data("ejGantt")

.

.

//Rerender Gantt schedule with new dates

$("#cphConteudo_gatAgenda").ejGantt("updateScheduleDates", scheduleStartDate, scheduleEndDate);

[cphConteudo] is id of my ContentPlaceHolder in MasterPage:

<div id="masConteudo">

<asp:ContentPlaceHolder ID="cphConteudo" runat="server"></asp:ContentPlaceHolder>

</div>

The code I'm using :

function RowSelected(args)

{

var selectedRowItem = args,

ganttObject = $("#cphConteudo_gatAgenda").data("ejGantt"),

scheduleStartDate = ganttObject.model.scheduleStartDate,

scheduleEndDate = ganttObject.model.scheduleEndDate;

if (selectedRowItem.data.level == 0) {

scheduleStartDate = selectedRowItem.data.startDate;

scheduleEndDate = selectedRowItem.data.endDate;

} else {

scheduleStartDate = selectedRowItem.data.parentItem.startDate;

scheduleEndDate = selectedRowItem.data.parentItem.endDate;

}

//Update the Gantt schedule startdate

ganttObject.model.scheduleStartDate = scheduleStartDate;

//UPdate the Gantt schedule enddate

ganttObject.model.scheduleEndDate = scheduleEndDate;

//Rerender Gantt schedule with new dates

$("#cphConteudo_gatAgenda").ejGantt("updateScheduleDates", scheduleStartDate, scheduleEndDate);

}

Again, thanks a lot for the help.

Regards

Henrique

[Mahalakshmi Karthikeyan]

Hi Marcelo,

Sorry for the inconvenience caused.

In our previous update we have provided you a simple web application for Gantt control without any masterpage, but in your case when you are a using master page for the application you need to include the ContentPlaceHolder Id also in the selector for any elements in the Gantt control. To overcome this problem you must include ClientIDMode="Static" in your sample while initiating Gantt .Please refer the code snippets below

<ej:Gantt ClientIDMode="Static" ID="GanttControlLocalization" runat="server">

//...

</ej:Gantt>

In this case you no need to use

‘ganttObject = $("#cphConteudo_gatAgenda").data("ejGantt")’

Simply

‘ganttObject = $("#gatAgenda").data("ejGantt")’ is enough.

Also please refer the below link for more details.

https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode%28v=vs.110%29.aspx

Also in our previous updates we have prepared sample validated using Predecessors for the selected row item based on your first update. We can also do the same with parentItem of the selected row item.

We have prepared a sample based on this and you can find the sample under the below location.

Sample: http://www.syncfusion.com/downloads/support/forum/118716/OnRowSelected1974037648.zip

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

Regards,

Mahalakshmi K.