Telerik Forums
Kendo UI for jQuery Forum
or
Ask question
All Questions
Unanswered
Answered
28,697 questions
1 answer
288 views
Drag and Drop between Listviews

I needed to be able to edit arrays of objects. Not finding a working example I finally came across a flawed example, sort of, at www.codeproject.com/Tips/678743/Kendo-UI-Drag-Drop-between-Listviews-Step-by-Step by Nasir M@hmood. So, I built it in Dojo and fixed it to work for my purposes.

I needed the user to be able to move tags back and forth and have their array objects move back and forth as well. This does that.

I hope it can help other people.

It is attached as a zip file. I am also putting it into this message in case folks can't read the zip file.

Bon appétit.

Rick

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Drag and Drop between Listviews 07</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<script type="text/x-kendo-tmpl" id="mappedtagtemplate">       
  <div style=""display:inline-block"">
    <div class="tags k-block"> #:Name# </div>
  </div>
</script>
<div style="padding:30px;">
    <table>
        <tr>
            <td><h2>Unmapped Tags</h2></td>
            <td><h2>Mapped Tags</h2></td>
        </tr>
        <tr>
            <td>
                <div id="unmappedtag_listview"
                class="tagcontainer"></div>       
            </td>
            <td>
                <div id="mappedtag_listview"
                class="tagcontainer"></div>
            </td>
        </tr>
    </table>
</div>
<script>
 
var mappedtag_taglist = [{ "ID": 100, "Name":
"Razor View" }, { "ID": 101, "Name": "JQuery"},
{ "ID": 102, "Name": "MS Sql"},
{ "ID": 103, "Name": "My Sql"},
{ "ID": 104, "Name": "Ruby"},
{ "ID": 105, "Name": "SQL"}];
   
var mappedtag_datasource = new kendo.data.DataSource({
    data: mappedtag_taglist
});
 
var unmappedtag_taglist = [{ "ID": 1,
"Name": "ASP.NET" },
{ "ID": 2, "Name": "Kendo UI"},
{ "ID": 3, "Name": "CSharp"},{ "ID": 4,
"Name": "Java Script"},
{ "ID": 5, "Name": "PHP"},{ "ID": 6,
"Name": "Java"},{ "ID": 7, "Name": "CSS"},
{ "ID": 8, "Name": "HTML"},{ "ID": 9,
"Name": "Unix"},{ "ID": 10, "Name": "Mac"}];
   
var unmappedtag_datasource = new kendo.data.DataSource({
    data: unmappedtag_taglist
});
 
$("#mappedtag_listview").kendoListView({
    dataSource: mappedtag_datasource,
    template: '<div class="tags move k-block">  #:Name# </div>'
});
   
$("#unmappedtag_listview").kendoListView({
    dataSource: unmappedtag_datasource,
    template: '<div class="tags move k-block">  #:Name# </div>'
});
 
   
$("#mappedtag_listview").kendoDraggable({
    filter: ".move",
    hint: function (element) {
        return element.clone();
    }
});
 
$("#unmappedtag_listview").kendoDraggable({
    filter: ".move",
    hint: function (element) {
        return element.clone();
    }
});
    
$("#mappedtag_listview").kendoDropTarget({
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.6);                 
    },
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);                 
    },
    drop: function (e) {                                                       
        var item = unmappedtag_datasource.getByUid(e.draggable.hint.data().uid);
        mappedtag_datasource.add(item);                   
        unmappedtag_datasource.remove(item);
        console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));
        console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));
    }
});
   
$("#unmappedtag_listview").kendoDropTarget({
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.6);                 
    },
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);                 
    },
    drop: function (e) {                                                       
        var item = mappedtag_datasource.getByUid(e.draggable.hint.data().uid);
        unmappedtag_datasource.add(item);                   
        mappedtag_datasource.remove(item);
        console.error("MappedTags", kendo.stringify(mappedtag_datasource.data()));
        console.error("UnmappedTags", kendo.stringify(unmappedtag_datasource.data()));
    }
});
</script>
<style>
.move
{
    cursor: move;
}
.tagcontainer
{
    float: left;
    margin-left: 10px;
    min-width: 400px;
    min-height: 510px;
    width: 400px;
}
.tagitemcls
{
    width: 24px;
    float: left;
    margin-left: -18px;
    margin-top: 10px;
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 2px;
}
.tags
{
    margin: 10px;
    padding: 10px;
    float: left;
    color: #000;
}
table > div
{
    border:1px solid #CDCDCD;
}
</style> 
</body>
</html>

Drag and Drop
Rick
Top achievements
Rank 2
 answered on 21 Apr 2016
1 answer
150 views
Kendo Combobox automation using Coded UI

Hi All,

i am trying to automate kendo Combobox.

the issue i am facing is i am not able to identify the Combobox.

please let me know if we need to add any dlls for identifying kendo controls using coded ui.

i have written customized code using searchcollections which resulted in reading the values from the Combobox, but i am not able to select the value.

Could any one help me on this. working despirately on this from couple of days and not finding any solution.

Thanks in advance,

Siva Kumar.

ComboBox
Helen
Telerik team
 answered on 21 Apr 2016
6 answers
218 views
Grid height on Chrome

Hello,

I'm having an issue with my grid height. It looks like the table content is not following the grid height.

The issue is not happening on IE or Firefox. It only happens at first loading. It disappear when I switch page or sort the table.

 

I'm working with Angular JS 1.5.3 and Angular Material 1.1 rc2.

 

Thank you very much.

Grid
Konstantin Dikov
Telerik team
 answered on 21 Apr 2016
3 answers
541 views
Kendo Editable Grid with custom editable cell templates in angular js
Hi,

I have a requirement to build a Kendo Editable Grid for bulk records update in my Angular project

my requiremnts are

  1)Custom editor controls for each cell based on types, all custom controls defined as angular directives

when user clicks on the cell based on the type i need to load a custom directive 

 2) each row should be in a same scope and should react with the data changes in other cell
for example if user Edit/change the selection of column A, the Column B should run some business rules to  display a mask(hide) on it or it should load new data(in case of drop downs)
 

Please help me with any example or the approach how to achieve this scenario.

Thanks in Advance
Grid
Kiril Nikolov
Telerik team
 answered on 21 Apr 2016
1 answer
137 views
Retaining dropdown state while changing it's position on web page

After opening dropdownlist, if due to some reason my dropdownlist position change on my web page, can i retain it's open state (whatever state dropdown is in before it's position change) while dropdown position is changing. Is this natively supported by control.

 

Please help me on this.

Thanks,

Gaurav Prajapati

DropDownList
Georgi Krustev
Telerik team
 answered on 21 Apr 2016
2 answers
106 views
"Can not type" error state

Do these steps on en empty editor and you come to a state, where can not type any character:

  • add a bullet and add some text
  • add another bullet
  • press backspace(the second bullet is removed and a paragraph is added instead)
  • press backspace(the paragraph is gone and it looks like you have press SHIFT + ENTER(for softbreak) on a bullet, but you can not type anymore

I think this is an error. In my opinion, the second time I press backspace the paragraph should be gone(as ist is) and the cursor should be at the end of line of the bullet and not beneath.

This is not critical and I don't know if the forum is the best way to report an error, but I did not find a place to do so.

Editor
Detlef
Top achievements
Rank 1
 answered on 21 Apr 2016
2 answers
1.2K+ views
Pie chart labels getting cut off

When the chart's width is constrained it does not scale to fit and the labels get cut off. I found this post but do not see any of these settings in the Html/Javascript version of the pie chart

http://www.telerik.com/forums/pie-chart-labels-are-being-cut-off

Changing the margins/paddings is not an ideal solution as we have dynamic data populating the pie charts so one setting that may work might not work for another dataset.

Charts
Jay
Top achievements
Rank 1
 answered on 20 Apr 2016
2 answers
643 views
AngularJS not working in a column template inside the detail grid template

I am using Angular and Kendo, and have set up a simple grid with a detail template. Everything works fine, until I try to use Angular inside a column template in the detail grid.

I am using these two templates:

<script id="order-checked-template" type="text/x-kendo-template">
    <input type="checkbox" #: Checked ? 'checked="checked"' : '' # ng-click="ctrl.toggleLines($event)" />
</script>
 
<script id="line-checked-template" type="text/x-kendo-template">
    <input type="checkbox" #: Checked ? 'checked="checked"' : '' # ng-click="ctrl.toggleOrder($event)" />
</script>

The first template order-checked-template is a column template for the main grid. It creates a checkbox for a boolean field and triggers the toggleLines function on the angular controller. This part works!

The second template, line-checked-template, is a column template for the detail grid. It also creates a checkbox for a boolean field, and should trigger the toggleOrder function on the angular controller. However, it seems that the ng-click directive is not parsed when the detail grid is generated and the template is parsed.

Following the tutorial on a hierarchy grid, I configured the grid like this:

01.vm.gridOptions = {
02.    columns: [
03.        { field: 'Checked', template: kendo.template($("#order-checked-template").html()) }
04.        // other columns
05.    ],
06.    dataSource: {
07.        schema: {
08.            model: {
09.                id: 'VO_URID',
10.                fields: {
11.                    Checked: { type: 'boolean' }
12.                    // other fields
13.                }
14.            }
15.        }
16.    },
17.    detailInit: detailInit,
18.};

Where detailInit is:

01.function detailInit(e) {
02.    $("<div class=\"detailGrid\"/>").appendTo(e.detailCell).kendoGrid({
03.        columns: [
04.            { field: 'Checked', template: kendo.template($("#regel-checked-template").html()) }
05.            // other columns
06.        ],
07.        dataSource: {
08.            schema: {
09.                model: {
10.                    id: 'VOR_URID',
11.                    fields: {
12.                        Checked: { type: 'boolean' }
13.                        // other fields
14.                    }
15.                }
16.            }
17.        }
18.    });
19.}

And the grid is created like this in the HTML template:

<div id="grid-vo" kendo-grid k-options="ctrl.gridOptions"></div>

Grid
Genady Sergeev
Telerik team
 answered on 20 Apr 2016
3 answers
252 views
Preselect items on load example - not working .

I tried to run the dojo. However, I don't see " Not loaded 1" and "Not loaded 2" appear in the example .

http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/AngularJS/pre-select-items

Please advice.
MultiSelect
Georgi Krustev
Telerik team
 answered on 20 Apr 2016
1 answer
687 views
Kendo MVC Grid Uncaught Error: Invalid template

Hi, I'm trying to create a MVC Grid on Razor, but by the time I enter to my view page I get an error on the debugger console:

 

<div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="tabStrip_#=IdAlumno#"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link" href="\#tabStrip_#=IdAlumno#-1">Notas de conducta</a></li></ul><div class="k-content k-state-active" id="tabStrip_#=IdAlumno#-1" style="display:block">
<div class="k-widget k-grid" id="gridAlumnos_#=IdAlumno#"><table><colgroup><col style="width:56px" /><col style="width:150px" /><col style="width:350px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header k-filterable" data-field="IdConductaGeneral" data-index="0" data-title="Id" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=IdConductaGeneral-asc">Id</a></th><th class="k-header k-filterable" data-field="Fecha" data-index="1" data-title="Fecha" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Fecha-asc">Fecha</a></th><th class="k-header k-filterable" data-field="Observaciones" data-index="2" data-title="Observaciones" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Observaciones-asc">Observaciones</a></th><th class="k-header k-filterable" data-field="Conducta" data-index="3" data-title="Conducta" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Conducta-asc">Conducta</a></th></tr></thead><tbody><tr class="k-no-data"><td colspan="4"></td></tr></tbody></table><div class="k-pager-wrap k-grid-pager"><a class="k-link k-pager-nav k-state-disabled k-pager-first" data-page="1" href="\#" title="Ir a la primera página"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-pager-nav k-state-disabled" data-page="0" href="\#" title="Ir a la página anterior"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-pager-nav k-state-disabled" data-page="2" href="\#" title="Ir a la página siguiente"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-pager-nav k-state-disabled k-pager-last" data-page="1" href="\#" title="Ir a la última página"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">No hay datos.</span></div></div><script>
    jQuery(function(){jQuery("\#gridAlumnos_#=IdAlumno#").kendoGrid({"columns":[{"title":"Id","headerAttributes":{"data-field":"IdConductaGeneral","data-title":"Id"},"width":"56px","field":"IdConductaGeneral","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Fecha","headerAttributes":{"data-field":"Fecha","data-title":"Fecha"},"width":"150px","template":"#= kendo.toString(FechaInicio, \"MM/dd/yyyy \") #","field":"Fecha","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Observaciones","headerAttributes":{"data-field":"Observaciones","data-title":"Observaciones"},"width":"350px","field":"Observaciones","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Conducta","headerAttributes":{"data-field":"Conducta","data-title":"Conducta"},"width":"100px","field":"Conducta","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true}],"pageable":{"buttonCount":10,"messages":{"display":"Elementos mostrados  {0} - {1} de {2}","empty":"No hay datos.","page":"Página","of":"de {0}","itemsPerPage":"artículos por página","first":"Ir a la primera página","previous":"Ir a la página anterior","next":"Ir a la página siguiente","last":"Ir a la última página","refresh":"Actualizar","morePages":"Mas paginas"}},"sortable":true,"filterable":{"extra":false,"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Conducta/ObtenerNotasConductaGeneral?matricula=#=Matricula#"},"prefix":""},"pageSize":5,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"IdConductaGeneral":{"type":"number"},"Matricula":{"type":"number"},"Fecha":{"type":"date"},"Conducta":{"type":"string"},"IdUsuario":{"type":"number"},"Observaciones":{"type":"string"},"Status":{"type":"number"}}}}}});});
<\/script>
                
</div></div></div><script>
    jQuery(function(){jQuery("\#tabStrip_#=IdAlumno#").kendoTabStrip({"animation":{"open":{"effects":"fade:in","duration":400}}});});
<\/script>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="k-tabstrip-wrapper"><div class="k-widget k-tabstrip k-header" id="tabStrip_'+(IdAlumno)+'"><ul class="k-reset k-tabstrip-items"><li class="k-item k-state-default k-state-active"><a class="k-link" href="#tabStrip_'+(IdAlumno)+'-1">Notas de conducta</a></li></ul><div class="k-content k-state-active" id="tabStrip_'+(IdAlumno)+'-1" style="display:block">\n<div class="k-widget k-grid" id="gridAlumnos_'+(IdAlumno)+'"><table><colgroup><col style="width:56px" /><col style="width:150px" /><col style="width:350px" /><col style="width:100px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header k-filterable" data-field="IdConductaGeneral" data-index="0" data-title="Id" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=IdConductaGeneral-asc">Id</a></th><th class="k-header k-filterable" data-field="Fecha" data-index="1" data-title="Fecha" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Fecha-asc">Fecha</a></th><th class="k-header k-filterable" data-field="Observaciones" data-index="2" data-title="Observaciones" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Observaciones-asc">Observaciones</a></th><th class="k-header k-filterable" data-field="Conducta" data-index="3" data-title="Conducta" scope="col"><a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-filter"></span></a><a class="k-link" href="/Conducta/ObtenerNotasConductaGeneral?matricula=%23%3DMatricula%23&gridAlumnos_%23%3DIdAlumno%23-sort=Conducta-asc">Conducta</a></th></tr></thead><tbody><tr class="k-no-data"><td colspan="4"></td></tr></tbody></table><div class="k-pager-wrap k-grid-pager"><a class="k-link k-pager-nav k-state-disabled k-pager-first" data-page="1" href="#" title="Ir a la primera página"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-pager-nav k-state-disabled" data-page="0" href="#" title="Ir a la página anterior"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-pager-nav k-state-disabled" data-page="2" href="#" title="Ir a la página siguiente"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-pager-nav k-state-disabled k-pager-last" data-page="1" href="#" title="Ir a la última página"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">No hay datos.</span></div></div><script>\n\tjQuery(function(){jQuery("#gridAlumnos_'+(IdAlumno)+'").kendoGrid({"columns":[{"title":"Id","headerAttributes":{"data-field":"IdConductaGeneral","data-title":"Id"},"width":"56px","field":"IdConductaGeneral","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Fecha","headerAttributes":{"data-field":"Fecha","data-title":"Fecha"},"width":"150px","template":"'+( kendo.toString(FechaInicio, \"MM/dd/yyyy \") )+'","field":"Fecha","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Observaciones","headerAttributes":{"data-field":"Observaciones","data-title":"Observaciones"},"width":"350px","field":"Observaciones","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true},{"title":"Conducta","headerAttributes":{"data-field":"Conducta","data-title":"Conducta"},"width":"100px","field":"Conducta","filterable":{"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"encoded":true}],"pageable":{"buttonCount":10,"messages":{"display":"Elementos mostrados  {0} - {1} de {2}","empty":"No hay datos.","page":"Página","of":"de {0}","itemsPerPage":"artículos por página","first":"Ir a la primera página","previous":"Ir a la página anterior","next":"Ir a la página siguiente","last":"Ir a la última página","refresh":"Actualizar","morePages":"Mas paginas"}},"sortable":true,"filterable":{"extra":false,"messages":{"info":"Mostrar filas con valor que","isTrue":"Si","isFalse":"No","filter":"Filtrar","clear":"Limpiar filtro","and":"Y","operator":"Operador","value":"Valor","cancel":"Cancelar"},"operators":{"string":{"eq":"Es igual a","neq":"No es igual a","startswith":"Comienza con","endswith":"Termina en","contains":"Contiene","doesnotcontain":"No contiene","isnull":"Is null","isnotnull":"Is not null","isempty":"Is empty","isnotempty":"Is not empty"},"number":{"eq":"Es igual a","neq":"No es igual a","gte":"Es mayor o igual que","gt":"Es mayor que","lte":"Es menor o igual que","lt":"Es menor que","isnull":"Is null","isnotnull":"Is not null"},"date":{"eq":"Es igual a","neq":"No es igual a","gte":"Es posterior o igual a","gt":"Es posterior","lte":"Es anterior o igual a","lt":"Es anterior","isnull":"Is null","isnotnull":"Is not null"},"enums":{"eq":"Es igual a","neq":"No es igual a","isnull":"Is null","isnotnull":"Is not null"}}},"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports[\'aspnetmvc-ajax\']){return \'aspnetmvc-ajax\';} else{throw new Error(\'The kendo.aspnetmvc.min.js script is not included.\');}})(),"transport":{"read":{"url":"/Conducta/ObtenerNotasConductaGeneral?matricula='+(Matricula)+'"},"prefix":""},"pageSize":5,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"IdConductaGeneral":{"type":"number"},"Matricula":{"type":"number"},"Fecha":{"type":"date"},"Conducta":{"type":"string"},"IdUsuario":{"type":"number"},"Observaciones":{"type":"string"},"Status":{"type":"number"}}}}}});});\n<\/script>\n                \n</div></div></div><script>\n\tjQuery(function(){jQuery("#tabStrip_'+(IdAlumno)+'").kendoTabStrip({"animation":{"open":{"effects":"fade:in","duration":400}}});});\n<\/script>\n';}return $kendoOutput;'

 

I know there's an error on my code but I can't find it, i appreciate the help. Thanks.

Code: 

@(Html.Kendo().Grid<SIEV.Modelos.Alumno>()
    .Name("gridAlumnos")
    .Columns(columns =>
    {
    columns.Bound(c => c.Matricula).Title("Matricula").Width(100);
    columns.Template(@<text>@item.Nombre @item.Paterno @item.Materno</text>)
                         .ClientTemplate("#=Nombre# #=Paterno# #=Materno#")
                         .Title("Nombre");
 
    columns.Template(@<text>@item.Calle @item.Colonia @(item.NumInt == "null" ? "" : item.NumInt) @item.NumExt</text>)
                           .ClientTemplate("#=Calle# #=Colonia# #=NumInt# #=NumExt#")
                           .Title("Direccion");
    })
    .Sortable()
    .Pageable()
    .Scrollable()
    .Filterable(f => f.Extra(false))
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height: 100%; width: 100%; -webkit-align-content: center;", id = "gridAlumnos" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(model => model.Id(p => p.IdAlumno))
        .Read(read => read.Action("Alumno_Read", "Alumno"))
    )
    .Events(events => events.DataBound("dataBound"))
)
 
<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("tabStrip_#=IdAlumno#")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Notas de conducta").Content(@<text>
    @(Html.Kendo().Grid<SIEV.Modelos.ConductaGeneral>()
                        .Name("gridAlumnos_#=IdAlumno#")
                        .Columns(columns =>
                        {
                            columns.Bound(c => c.IdConductaGeneral).Title("Id").Width(56);
                            columns.Bound(c => c.Fecha).Width(150).ClientTemplate("#= kendo.toString(FechaInicio, \"MM/dd/yyyy \") #");
                            columns.Bound(c => c.Observaciones).Width(350).Title("Observaciones");
                            columns.Bound(c => c.Conducta).Width(100).Title("Conducta");
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .Read(read => read.Action("ObtenerNotasConductaGeneral", "Conducta", new { idalumno = "#=IdAlumno#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .Filterable(f => f.Extra(false))
                        .ToClientTemplate())
                </text>
                );
 
            })
            .ToClientTemplate())
</script>
 
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
 
<style>
    .k-detail-cell .k-tabstrip .k-content {
        padding: 0.2em;
    }
 
    .employee-details ul {
        list-style: none;
        font-style: italic;
        margin: 15px;
        padding: 0;
    }
 
        .employee-details ul li {
            margin: 0;
            line-height: 1.7em;
        }
 
    .employee-details label {
        display: inline-block;
        width: 90px;
        padding-right: 10px;
        text-align: right;
        font-style: normal;
        font-weight: bold;
    }
</style>

Grid
Dimiter Madjarov
Telerik team
 answered on 20 Apr 2016
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Learn how
946 947
948
949 950
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how