Telerik Forums
Kendo UI for jQuery Forum
1 answer
141 views

i want to change the axis-gird to the kendo-grid in the controller add

{{key: "sttsNm", label:"status" ,width:140 ,fomatter: function(){

return(jsonpath($scope.codeData, "$.sttsCd[?(@.dataCd =='" + this.item.sttsCd + '")].strProp")+

"").trim();}};

i want to change the template of kendo grid how do i change it?

 

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

What kind of conversion should be done in kendo grid?

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

I want to change the axis-grid to the kendo-grid. In the controller, add

{{ key: "sttsNm", label: "Status", width: "140", align:"center", formatter: function(){ return (jsonPath($scope.codeData, "$.sttsCd[?(@.dataCd=='" + this.item.sttsCd + "')].strProp") + "").trim(); }},

Konstantin Dikov
Telerik team
 answered on 27 Apr 2017
13 answers
958 views
Hello,

I have MVC application that inserts some texts into the grid template.
MVC encodes quotes (') to (') and it is fine but after that the template stops working!

Here is an example: http://jsfiddle.net/GFV52/8/
Why the template cannot work with html encoded symbols and how to fix this?

Vova
Tsvetina
Telerik team
 answered on 13 Apr 2017
8 answers
75 views

I have the following in side an HTML page:

<!-- Template for simple search row -->
<script id="simple-search-row" type="text/x-kendo-template">
    <div class="simple-search-row">
        <input name="fieldName"
            data-role="dropdownlist"
            data-text-field="columnDisplayName"
            data-value-field="columnName"
            data-bind="
                value: field,
                source: columnsDataSource"></input>
        <span data-for="fieldName" class="k-invalid-msg"></span>
        <input name="filter"
            data-role="dropdownlist"
            data-text-field="displayName"
            data-value-field="name"
            data-bind="
                value: type,
                source: filterTypesDataSource,
                events: { change : criteriaChanged, dataBound : simpleSearchDDLDataBound }"
            style="width: 15em;"></input>
        <span data-for="filter" class="k-invalid-msg"></span>
        <input id="value-1" name="value-1" type="text"
            data-bind="
                value: values[0]"></input>
        <span data-for="value-1" class="k-invalid-msg"></span>
        <span id="value-and" style="display: none;">#: translate('between_and') #</span>
        <input id="value-2" name="value-2" type="text" style="display: none;"
            data-bind="
                value: values[1]"></input>
        <span data-for="value-2" class="k-invalid-msg"></span>
        <a href="\\\\#" data-bind="events: { click : removeSimpleSearchRow }">
            <span class="k-icon k-i-cancel"></span>
        </a>
        <a href="\\\\#" data-bind="events: { click : addSimpleSearchRow }">
            <span class="k-icon k-i-plus"></span>
        </a>
    </div>
</script>
 
<div id="simple-search-rows" class="ui relaxed grid" data-template="simple-search-row" data-bind="source: searchFilter.criteria"></div>

 

"searchFilter.criteria" is a JS array object.  And then I have a custom validator:

var simpleSearchValidator = $('#simple-search').kendoValidator({
        messages : {
            fieldname : '',
            filter : '',
            valueone : '',
            valuetwo : ''
        },
        rules: {
            fieldname : function (input) {
                if (input.is('[name|=fieldName]')) {
                    if(input.val() === ''){
                        return false;
                    }
                }
 
                return true;
            },
            filter : function (input) {
                if (input.is('[name|=filter]')) {
                    if(input.val() === ''){
                        return false;
                    }
                }
 
                return true;   
            },
            valueone : function (input) {
                if (input.is('[name|=value-1]')) {
                    let filter = input.parent().find('[name|=filter]'),
                        criteria = (filter ? filter.val() : '');
                     
                    switch(criteria){
                        case 'EQUAL_TO':
                        case 'NOT_EQUAL_TO':
                            return true;
                    }
 
                    if(input.get(0).style.display === 'none') {
                        return true;
                    }
 
                    if(input.val() === ''){
                        return false;
                    }
                }
 
                return true;   
            },
            valuetwo : function (input) {
                if (input.is('[name|=value-2]') && input.is('')) {
                    if(input.val() === ''){
                        return false;
                    }
                }
 
                return true;   
            }
        }       
    }).data('kendoValidator');

 

The issue is that the validator's .validate() is called, it correctly identifies incorrect data based on the custom rule, however if say the fieldName input field is invalid, it displays the k-invalid-msg for EVERY row, not just the single row with the invalid data.  I am guessing this is because the name attributes for each row are not unique.   I tried creating a unique id in the template:

<!-- Template for simple search row -->
<script id="simple-search-row" type="text/x-kendo-template">
    <div class="simple-search-row">
        # var uid = windows.util.genUniqueId(); #
        <input name="fieldName#= uid #"
            data-role="dropdownlist"
            data-text-field="columnDisplayName"
            data-value-field="columnName"
            data-bind="
                value: field,
                source: columnsDataSource"></input>
        ....
    </div>
</script>
 
<div id="simple-search-rows" class="ui relaxed grid" data-template="simple-search-row" data-bind="source: searchFilter.criteria"></div>

 

Unfortunately, that did not work as the uid was only created once, at the time the template was loaded, not for each row.

Is there an easy way to generate a unique form name for the input elements in each row?

Vasil
Telerik team
 answered on 09 Mar 2017
1 answer
85 views

Hello,

I want to create a link inside my Kendo template, but I always get the Error 'Invalid Template ...'

Is there anyone who can help me with this? 

<a href="/#/Kontakt/Info/#:KONTAKTID#" target="_blank">

Tank you in advance

Dimiter Madjarov
Telerik team
 answered on 06 Jan 2017
1 answer
106 views

I currently have the following template

 

    <script id="tmplOptionsMenuItemRowAll" type="text/x-kendo-tmpl" >
        <div>#:uid#</div>
        <div class="col-xs-12"
            data-role="listview"
            data-template="tmplOptionsMenuItemRowAll"
            data-bind="source: allMenuItems"
            data-selectable="false"
            id="kendoLVOptionsAllMenuItems">
        </div>
    </script>

 

I am trying to manually calculate the HTML and then inserting it somewhere in the DOM (its a long story)

I currently call the following code to do this:

               var templateContent = $(options.templateId).html();

                var template = kendo.template(templateContent);
                //now resolve the HTML
                var result = kendo.render(template, [options.appModel]); //render the template
                return result;

 

However when I look at 'result' I can see that the UID has been correctly resolve BUT the list view has not been executed at all. Am I missing something?

Alon
Top achievements
Rank 1
Veteran
 answered on 28 Nov 2016
4 answers
224 views

Hi,

 

I'm using MVVM paradigm with the kendo scheduler. I am attempting to add custom templates for editing and display of tasks. Using the following code the templates seem to be ignored and the default templates used instead. These templates are fine, I use them in non MVVM mode. 

 

<div id="responsiveCalendarView">
    <div class="k-content wide">
        <div>
            <div id="responsiveCalendar" 
            
                 data-role="scheduler"
                             
                 
                 data-views="[{ type: 'day', title: 'Day' },
                              { type: 'week', title: 'Week', eventTemplate: $('#event-template').html()},
                              { type: 'workWeek', title: 'Work Week'},
                              { type: 'agenda', title: 'Agenda' },
                              { type: TasksView, title: 'Tasks' }]"
                              
                 data-editable= "{template: $('#customEditorTemplate').html()}"   
                 
                 data-bind="source: tasks,
                            visible: isVisible,
                            events: {edit: onEdit, requestStart: requestStart, requestEnd: requestEnd, navigate: navigate, dataBound: dataBound, dataBinding: dataBinding}"  style="height: 800px"></div>
        </div>
    </div>
</div>

 

Has anyone else had similar problems using templates with MVVM on the scheduler? Has anyone successfully used templates in the scheduler with MVVM?

 

Appreciate any assistance.

 

John
Top achievements
Rank 1
 answered on 17 Nov 2016
1 answer
139 views

I've been using #:xx# or#=xxx# until I saw the usage of ${xxx} in this example:

http://demos.telerik.com/kendo-ui/sparklines/remote-data-binding

The template documentation (http://docs.telerik.com/kendo-ui/framework/templates/overview) seem not to mention the ${xxx} syntax.

Can your clarify what syntax is preferable in what context?

 

 

Eduardo Serra
Telerik team
 answered on 24 Oct 2016
1 answer
678 views

In my cshtml, I am rendering a template that will be used via javascript.

<script id="my-template" type="text/x-kendo-tmpl">
    <select id="myType">
        @foreach (var src in Model.MyTypes)
        {
            <option value="@Html.Raw(@src.Key)">@Html.Raw(@src.Value)</option>
        }
    </select>
</script>

Note that I'm using @Html.Raw to output the value and text of the select items. This is necessary because we support several languages and without the @Html.Raw, the result is an invalid template.

If I keep the @Html.Raw, I'm exposing a potential hole for XSS because this data is supplied by the user.

How can I allow multiple locales and not expose an XSS vulnerability (without having to encode the data stored in the DB)?

Thanks,

--Ed

Ivan Danchev
Telerik team
 answered on 19 Oct 2016
15 answers
696 views

I'm using kendo Telerik.UI.for.AspNet.Mvc5 version 2016.2.607 in .net 452

inside one of my templates i have a reference to a localization string, like this:

<script type="text/x-kendo-tmpl" id="msgTemplate">
    <div class="media">
        <a class="pull-left" href="#=RelevantURL#" target="_blank" title="@CoBRALocalization.MVC.RootResource.ClickToAccess">
            <img  src="@Url.Content("~/Content/images/incAlert.png")?h=30&mode=max" alt="Active" />
        </a>
        <div class="media-body">
            <div class="media-heading">
                <small><time datetime="#=UnixDateCreated#">#= kendo.toString(DateCreated, 'G') #</time></small>
            </div>
            <p>#=FriendlyMessage#</p>
        </div>
    </div>
</script>

 

look at the @CoBRALocalization.MVC.RootResource.ClickToAccess reference.  works fine if the localization value is in english or something like that, but trying a turkish value like 

Erişim'i tıklatın

will give me an error saying the template is invalid, and the title looks like:

title="Erişim&#39;i tıklatın"

clearly the hashtag is causing the problem, but i can't find a way around that.  Solutions like 

http://www.telerik.com/forums/escaping-with-new-syntax

don't really fit this case.  Any other ideas?

Daniel
Telerik team
 answered on 14 Sep 2016
7 answers
411 views

Hello, 

I am very new at html and javascript so basic reponses would be better. Using this template location in a .html file 

 <ul data-role="listview" data-source="app.data" data-template="LED-template"></ul>

   <script id="LED-template" type="text/x-kendo-template">
    <a href="page/LEDlist/details.html?##id=#: LEDPartNumber #">   
            <div class="Manufacturer">#: LEDManufacturer #</div>
            <div class="Partnumber">#: LEDPartNumber #</div>
        </a>
    </script> 

gives me a list of all the data in app.data. Once any of the links are clicked this is executed 

 var location = window.location.toString();
 var partNumber = location.substring(location.lastIndexOf('?') + 4);

it is able to get the partnumber which I can use to filter the total data to find the right data and create a page based on the information. The problem I am having is that after going back once and choosing a second partnumber the above code fails to return a valid reponse. I've attached the console that is outputing 
location and the partNumber 

Thank you for any help!

Dimo
Telerik team
 answered on 31 Aug 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?