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.

Other widgets inside a grid column

Thread ID:

Created:

Updated:

Platform:

Replies:

116344 May 16,2014 10:27 AM May 28,2014 02:36 AM JavaScript 4
loading
Tags: ejGrid
Amarjot
Asked On May 16, 2014 10:27 AM

Hi,

As seen in one of the samples where we have a couple of buttons in a column for each row, can we similarly have any other widget, may be a calendar, in one of the columns of a grid?

Maithiliy K [Syncfusion]
Replied On May 19, 2014 10:40 AM

Hi Amarjot,

 

Thanks for using Syncfusion Products.

 

We can achieve your requirement of adding ejDatePicker as one of the grid column through Column template feature. Please refer the below code snippet

 

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

    <input id="Calendar_{{: OrderID}}" type="text" />

</script>

 

$(function () {

     $("#Grid").ejGrid({

          . . . . .  

          columns: [

             . . . .

             { headerText: "Calendar", columnTemplate: true, templateId: "#columnTemplate", textAlign: "center", width: 110 }],

          queryCellInfo: "cellValue"

     });

});

 

Using queryCellInfo event the input tag which is added in the template has to be changed as ejDatePicker. Please refer the below code snippet.

 

function cellValue(args) {

            if (args.column.headerText == "Calendar") {

                $(args.Element).addClass("coltemp");

                $($(args.Element).find("input")).ejDatePicker({

                    value: args.Data.OrderDate,

                    dateFormat: "MM/dd/yyyy"

                });

            }

        }

 

For your convenience we have created a sample and the same can be downloaded from the following attachment.

 

For more information please refer the below online sample.

 

http://js.syncfusion.com/demos/#!/azure/grid/Columns/ColumnTemplate

 

Please let me know if you have any queries.

 

Regards,

Maithiliy K


Attachment: ColumnTemplate_e45ba831.zip

Amarjot
Replied On May 20, 2014 06:13 AM

Hi Maithiliy,

Thanks a lot for the response!
First question, is this information present in the documentation that's available online?
Secondly, I actually want to have a schedule widget in the grid column, will it be similar to the way datepicker has been used in the example that you have provided? It would be really great if you can provide a sample with the schedule widget in the grid column.

Regards,
Amarjot Kaur

Madhu Sudhanan P [Syncfusion]
Replied On May 21, 2014 08:40 AM

Hi Amarjot,

 

Please find the response.

 

Query #1: “is this information present in the documentation that's available online?”

 

Currently the documentation for the Essential Javascript controls is in drafting state and it is tentatively scheduled to available online at the mid of month June, 2014.

 

Query #2: “I actually want to have a schedule widget in the grid column,”

 

We are working on this sample and while render the schedule control within Grid we are facing some issues like “CSS Overrides the controls Behaviour” and also “Scroll bar not displayed when we set the minimum width” and we are checking those cases. Therefore, we will update you the sample in four business days (27th May, 2014).

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P


Madhu Sudhanan P [Syncfusion]
Replied On May 28, 2014 02:36 AM

Hi Amarjot,

 

Sorry for the inconvenience caused.

 

Based on your request, we have created simple sample in which the schedule is rendered in one of the grid columns using column template and the same can be downloaded from the below location.

 

Sample Location: Grid_with_Schedule.zip

 

In the sample, we have used the following template to place the schedule in grid.

 

 

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

     <div id="Calendar_{{: OrderID}}" class="scheduleClass" />

</script>

 

 

And the schedule in the grid column is rendered using the create and actionComplete event. Please refer the below code snippet.

 

 

The create and actionBegin event will be initialized during grid initialization as follow,

 

$("#Grid").ejGrid({

               

                dataSource: window.gridData,

                . . . . .

                create: renderSchedule,

                actionComplete: renderSchedule

            });

 

The schedule is rendered in the renderSchedule function as follow,

 

window.renderSchedule = function (args) {

                                

                if (args.type == "create" || args.requestType == "paging")

                    $("div.scheduleClass").ejSchedule({

                        width: "600",

                        height: "380px",

                        timeMode: "24",

                        currentView: "day",

                        views: ["Day"],

                        fields: {

                            dataSource: list,

                            idField: "Id",

                            subjectField: "Subject",

                            startTimeField: "StartTime",

                            endTimeField: "EndTime",

                            categorizeField: "Categorize",

                            alldayField: "AllDay",

                            recurrenceField: "Recurrence",

                            recurrenceRuleField: "RecurrenceRule"

                        },

                        startHour: 0,

                        endHour: 6

                    });

              

            }

 

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P


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.

;