Other widgets inside a grid column

[Amarjot]

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]

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]

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]

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 (27^th May, 2014).

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P

[Madhu Sudhanan P]

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