Datepicker template as function

[Josetuttu]

How can I use javascript function for defining template for datepicker. Only strings are working now for templates. And if I use strings for template the corresponding function used inside the template should be global.

 

$("#datepicker").kendoDatePicker({
                        value: today,
                        dates: birthdays,
                        weekNumber: true,
                        month: {
                            // template for dates in month view
                            content: function (e) { alert(e);},
                            weekNumber:  '<a class="italic">#= data.weekNumber #</a>'
                        },
                        footer: "Today - #=kendo.toString(data, 'd') #",
                    });

[Anton Mironov]

Hello Josetuttu,

Thank you for the code snippet provided.

In order to achieve the desired behavior, I would recommend building the following syntax for the needed global function handler:

// DatePicker content property for the month:
month: {
        // template for dates in month view
         content: returnContent(),
         weekNumber:  '<a class="italic">#= data.weekNumber #</a>'
},

// Function handler:
function returnContent(){
         return "test"
}

The complete implementation and behavior could be found in the following dojo example:

• https://dojo.telerik.com/@anton.mironov/oLoWIvOy

Give a try to the approach above and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Josetuttu]

Hello Anton,

I'm afraid the given solution doesn't take into consideration the parameter "e". Usually, the arg for the function for template contains the current item/context of the template. 

In the example for template https://demos.telerik.com/kendo-ui/datepicker/template , the comparison function is declared globally. If we are able to use function syntax we will be able to use a local method within the context where the datepicker is created. Hope you understood what I mean.
So if I have 2 or more datepickers with in a page in different sections, I can define different comparison methods for each without conflict.

 

[Tsvetomir]

Hi Josetuttu,

My name is Tsvetomir and I will be temporarily covering for my colleague Anton. 

If you would like to pass the data item within the JavaScript function handler, declare the template as follows:

content: "#=returnContent(data)#",

Check out the updated Dojo sample here:

https://dojo.telerik.com/eRoXoyuJ

 

Regards,
Tsvetomir
Progress Telerik

[Josetuttu]

Dear Tsvetomir,

Thanks for the reply. Unfortunately the function returnContent in this case should be defined in the global/window context which is not what I want. I am looking for a solution similar to how we define function as a template in grid>column>template. In that case, I can bind a local function instead of a global function.

 

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: function(dataItem) {
      return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

 

[Anton Mironov]

Hi Josetuttu,

Thank you for the additional details provided.

Talking about the DatePicker the syntax for the content could include a global function that will work per the context of the current instance of the object that is calling it.

In order to use this functionality locally in the component, I would recommend trying the "data" property with the "#=#" syntax. It includes all the needed information:

• "cssClass"
• "date"
• "dateString"
• "dates" - a collection of all dates
• "linkClass"
• "ns"
• "title"
• "url"
• "value"

Here is an example with the syntax above that includes the value parameter:

• https://dojo.telerik.com/@anton.mironov/isAzACAL

Find more information about the Kendo UI Templates in the following article:

• https://docs.telerik.com/kendo-ui/framework/templates/overview

I hope this information helps.


Kind Regards,
Anton Mironov
Progress Telerik

[Josetuttu]

Dear Anton,

This is the problem I face when I use string templates for datepicker.
https://dojo.telerik.com/OnOVaWIb
As you can see everything is inside a self executing function. As a result the function isInArray is not accessible for the template.
On the other hand if there is a provision for function as template like we have for grid columns, this error will not come.

[Anton Mironov]

Hi Josetuttu,

Thank you for the dojo example.

I dive deeply into the implementation and assume that there is two nested "document.ready" event handlers. Try to use the "isInArray" function in the global scope and observe the result. Here is an example:

https://dojo.telerik.com/@anton.mironov/ogIYuDAd

 

Kind Regards,
Anton Mironov