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.

Show only Time

Thread ID:

Created:

Updated:

Platform:

Replies:

119684 Jul 21,2015 02:13 PM Jul 23,2015 08:59 AM ASP.NET Web Forms 3
loading
Tags: TreeGrid
Michael Fernandez
Asked On July 21, 2015 02:13 PM

Good Morning,
I'm using the tree grid control and i need use one column like a datetimePicker but I only need the Time options because I am using the control to define a lot of time ranges.

Also the organization is like this

Day                     Start Time              End Time
Monday
                            08:00:00 am           12:00:00 am
                            13:00:00 pm           15:00:00 pm
Tuesday
                             09:00:00 am          12:00:00 am
                            13:00:00 pm           18:00:00 pm
Wednesday
                             08:00:00 am          12:00:00 am
                             13:00:00 pm          15:00:00 pm

For example,
Now I need allow the user create a new time range but without permit create a new day, How can I to block the option to create a new day?

Mahalakshmi Karthikeyan [Syncfusion]
Replied On July 22, 2015 12:58 PM

Hi Michael,


Thankyou for using Syncfusion product.


For your kind information, it is possible to render the TreeGrid widget with time columns and we can change the start Time and End time of the TreeGrid columns using ejTimePicker close event, but currently it is not possible to split up the TreeGrid cell and hence it is not possible to render two timepicker in the same cell either for start time or for end time column ,We have prepared a workaround for this requirement using custom columns to edit start time and end time. Please refer the below code snippet to achieve the requirement.


<head>

<script type="text/javascript">

        function querycellinfo(args) {

            if (args.column.field == "startDatetime") {

                $(args.cellElement).find(".startDatepicker").ejTimePicker({

                    open: function (args) {

                       var treeObj = $("#Treegrid").data("ejTreeGrid");

              //To hide the Start time field while editing the custom column

                        treeObj.hideColumn("Start Time");

                    },

                    close: function (args) {

                        var treeObj = $("#Treegrid").data("ejTreeGrid");

              //To change the field value with the selected time

                        if (treeObj.model.selectedRowIndex)

                            treeObj.model.flatRecords[treeObj.model.selectedRowIndex].StartDate = args.value;

                        else

                            alert("please select row to edit");

                        treeObj.refreshRow(treeObj.model.selectedRowIndex);

               //To show the Start time field once completed the editing.

                        treeObj.showColumn("Start Time");

                    }

                });

            }

            if (args.column.field == "endDatetime") {

                $(args.cellElement).find(".endDatepicker").ejTimePicker({

                    open: function (args) {

                        var treeObj = $("#Treegrid").data("ejTreeGrid");

                        treeObj.hideColumn("End Time");

                    },

                    close: function (args) {

                        var treeObj = $("#Treegrid").data("ejTreeGrid");

                        if (treeObj.model.selectedRowIndex)

                            treeObj.model.flatRecords[treeObj.model.selectedRowIndex].EndDate = args.value;

                        else

                            alert("please select row to edit");

                        treeObj.refreshRow(treeObj.model.selectedRowIndex);

                        treeObj.showColumn("End Time");

                    }

                });

            }

        }

   </script>  

</head>

<body>

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

        <input type="text" class="startDatepicker" />

    </script>

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

        <input type="text" class="endDatepicker" />

    </script>

<ej:treegrid ID="Treegrid" runat="server"  AllowColumnResize="true"

//…

DateFormat="hh:mm:ss tt" QueryCellInfo="querycellinfo">


            <Columns>

                //…

                <ej:treegridcolumn HeaderText="StartDateTime" Field="startDatetime" IsTemplateColumn="true" TemplateID="startTemp"/>

                <ej:treegridcolumn HeaderText="EndDateTime" Field="endDatetime" IsTemplateColumn="true" TemplateID="endTemp"/>

            </Columns>

        </ej:treegrid>

</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/119684/ze/TimeOptions-62248595

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

Regards,

Mahalakshmi K.


Michael Fernandez
Replied On July 22, 2015 02:09 PM

Thanks,

Now I need help with the second part of my query and a new

Now I need allow the user create a new time range but without permit create a new day, How can I to block the option to create a new day?
also i need to block the edit options for the columns two and three but in the father rows: in the days, this because the information of the time range is only for the son rows.

Thanks

Mahalakshmi Karthikeyan [Syncfusion]
Replied On July 23, 2015 08:59 AM

Hi Michael,

Currently there is no support for ejTimePicker in TreeGrid edit options, so we have achieved your requirement to render the ejTimePicker in the date columns through the column Template. Since there is no built-in support for timepicker in TreeGrid ,while adding a new row using toolbar the timepicker cell will be rendered as string edit type and on continuing saving the new row timepicker cell will be rendered, we have achieved this by adding any row using context menu options. Please refer the below code snippet for details.

<head id="Head1" runat="server">

   

        function querycellinfo(args) {


            if (args.column.field == "startDatetime") {

                $(args.cellElement).find(".startDateTimepicker").ejTimePicker({

                    value: args.data.startDatetime,

                    close: function (args) {

                        alert("Start time changed to" + args.value)

                    }

                });

            }

            if (args.column.field == "endDatetime") {

                $(args.cellElement).find(".endDateTimepicker").ejTimePicker({

                    value: args.data.endDatetime,

                    close: function (args) {

                        alert("End time changed to" + args.value)

                    }

                });

            }

        }

   </script>  

</head>

  

<body>

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

        {{if !hasChildRecords}}

        <input type="text" class="startDateTimepicker" />

         {{/if}}

    </script>

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

         {{if !hasChildRecords}}

        <input type="text" class="endDateTimepicker" />

         {{/if}}

    </script>


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

   

        <ej:treegrid ID="Treegrid" runat="server

        //…

DateFormat="hh:mm:ss tt" QueryCellInfo="querycellinfo">

            <Columns>               

                //…

                <ej:treegridcolumn HeaderText="StartDateTime" Field="startDatetime" IsTemplateColumn="true" TemplateID="startTemp"/>

                <ej:treegridcolumn HeaderText="EndDateTime" Field="endDatetime" IsTemplateColumn="true" TemplateID="endTemp"/>

            </Columns>

             <ContextMenuSettings ShowContextMenu="true"

                ContextMenuItems="add,edit,delete" />

           

        </ej:treegrid>

         

  </form>      

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/119684/ze/TreegridTimeoptiones2145209965

We have also logged a feature report on implementing the ejTimePicker in the treegrid edit options. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

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

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


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.

;