Telerik Forums
Kendo UI for jQuery Forum
3 answers
1.6K+ views
Hi there,

Probably me overlooking something obvious. I read a couple of threads that the grid currently can't be configured with dynamic columns on refresh. No big deal was my first reaction just destroy it and create a new one, whenever changing from one column set to the next.

However I couldn't find a destroy method on $('#grid').kendoGrid, so what would be the recommend way to completely remove an existing kendoGrid instance?

When trying things like $('#grid').removeData().empty(); or using an wrapper object to use .remove()

 $('#gridWrapper').find('div').remove().append($('<div id="grid"></div>')); I receive an error message from kendo.core stating that one the columns names are no longer defined.

So somewhere there must be some lingering data that isn't cleaned up by the process above, but I couldn't figure out where that is ...yet.
Any hints welcome :).

Thanks,

Rainer

var crudServiceBaseUrl = "../_vti_bin/listdata.svc/",
     kendo = window.kendo,
     App = window.App = {
           columMap : {
               'Tasks' : [
                   { title : "Title", field : "Title" },
                   { title : "Created", field : "Created" },
                   { title : "Created By", field : "CreatedBy.Account" }
               ],
               'Contacts' : [
                   { title : "Last Name", field : "LastName" },
                   { title : "Created", field : "Created" },
                   { title : "Created By", field : "CreatedBy.Account" }
               ]
           },
           Model : {
               gridMeta : kendo.observable({
                   listName : 'Contacts',
                   total : 0
               })
           }
       };
 
 
   App.DS = {
       sharableDataSource : new kendo.data.DataSource({
           type : "SP2010",
           serverPaging : true,
           serverSorting : true,
           serverFiltering : true,
           sort : [
               { field : "Created", dir : "desc" }
           ],
           pageSize : 40,
           transport : {
               read : {
                   url : function () {
                       return crudServiceBaseUrl + App.Model.gridMeta.get('listName')
                   },
                   dataType : "json"
               }
           },
           change : function (e) {
               App.Model.gridMeta.set('total', this.total() || 0);
           }
       })
   };
 
 
   App.createGrid = function(options) {
       var options = options || {};
       $('#grid').kendoGrid({
                  dataSource : App.DS.sharableDataSource,
                  autoBind : options.autobind || false,
                  height : 400,
                  sortable : true,
                  navigatable : true,
                  selectable : 'row',
                  scrollable : {
                      virtual : true
                  },
                  columns : App.columMap[App.Model.gridMeta.get('listName')] || []
              });
   };
// Currently KendoUI grid doesn't support column modifying of an existent grid
   App.refreshGrid = function() {
        
       $('#gridWrapper').find('div')
           .remove()
           .append($('<div id="grid"></div>'));
 
       // This throws an error when changing from one column set to another
       App.createGrid({autobind: true});
   };
 
   App.init = function () {
 
       kendo.bind($("span.total"), App.Model.gridMeta);
 
       App.createGrid();
 
       };
Jason
Top achievements
Rank 1
 answered on 14 Dec 2018
3 answers
345 views
it's not work when i change to "ja-JP", why?
i used demo
http://demos.telerik.com/kendo-ui/grid/localization
Tsvetomir
Telerik team
 answered on 14 Dec 2018
1 answer
165 views

Grid is coming up fine. the detail page , when I attempt to expand... fails:

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            { field: "org_name" },
            { command: ["edit"], width: 180 }
        ],
        toolbar: ["create", "excel"],
        dataSource: {
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: "ef_org_Read"
                },
                create: {
                    url: "ef_org_Create"
                },
                update: {
                    url: "ef_org_Update"
                }
            },
            schema: {
                data: "Data",
                model: {
                    id: "org_id",
                    fields: {
                        org_id: { type: "number" },
                        org_name: { type: "string" }
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverSorting: true,
        },
        columnMenu: true,
        editable: "popup",
        pageable: true,
        detailInit: detailInit,
        dataBound: function () {
            this.collapseRow(this.tbody.find("tr.k-master-row").first());
        },
        navigatable: true,
        selectable: "single row",
        sortable: {
            mode: "single"
        },
        filterable: true,
        scrollable: true
    })

    function detailInit(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: "/admin/ef_sites_Read"
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 10,
                filter: { field: "org_id", operator: "eq", value: e.data.org_id }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
                { field: "Name", width: "110px" },
            ]
        });
    }
   
</script>

Teya
Telerik team
 answered on 14 Dec 2018
1 answer
158 views
Hi all,

does the Kendo UI Grid support selecting an entry on a different page if the Ajax-bound mode is used?

Thanks in advance.

Georgi
Telerik team
 answered on 14 Dec 2018
1 answer
120 views

Hi, 

I want to create multiple zoom shortcuts for my kendo chart stock. ex: 3 months,6 months, 1 year and all.

Basically, when a user click on the zoom button "3 months", the navigator must cover only three months and the chart must display only three months of data. When "all" is clicked on , the navigator must cover all the available time and the chart must display all data.

Basically the behavior that I want is shown in this link  : behavior wanted

Is there a way to do that using the kendo stock chart ?

 

 

 

 

Tsvetina
Telerik team
 answered on 13 Dec 2018
3 answers
109 views

Hi-

I'm trying to create master-details grid with Add, edit and delete functionality in both, In details grid i have two columns "Name" (Drop Down) and "Value" (Run time Control). When i will select name than value control should get created in value column as per type mention in Data. So for example if select XXX name and it's type is Date then Date control should be created in value column, if i select other name "ZZZZ" and it's type is list then drop down control should be created in value column at run time. I have 5 types as of now to create run time value control (String, date, Numeric, currency and Drop Down). Along with this i should be able to add, edit and delete master/detail rows.

Any help with code sample in achieving this is deeply appreciated. Below my Master/Detail data where Attributes will get bind to detail section and type will let know which control to create run time.

var Data = [
    {
        "LR_Name": 'Long Term',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'Y',
        "LPVR_Active": 'Y',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "ABR Duration",
                    "Value": "2",
                    "Type": 'list'

                },
                {
                    
                    "Name": "EBR Duration",
                    "Value": "2",
                    "Type": 'Number'
                    
                }
            ]

        }
    },
    {
        "LR_Rider_Name": 'LTCR',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "LTCR Supp Date",
                    "Value": "01-01-2018",
                    "Type": 'date'

                },
                {
                    
                    "Name": "LTCR Supp Amount",
                    "Value": "2500",
                    "Type": 'Currency'
                }
            ]

        }
    },
    {
        "LR_Rider_Name": 'Extended Benefit',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                   
                    "Name": "Benefit Type",
                    "Value": "5% Simple",
                    "Type": 'String'

                },
                {
                    
                    "Name": "Benefit",
                    "Value": "10% Simple",
                    "Type": 'String'
                }
            ]

        }
    }
];

Alex Hajigeorgieva
Telerik team
 answered on 12 Dec 2018
1 answer
284 views

Is there a way I can have detail template kind of view on treelist as we have for Grid in the following link.

    https://dojo.telerik.com/uqULUsIk

I need to have detail template for every leaf node of the treeList.

It can be any other component as well as long as it gives the similar look (View occupying 100% width below a leaf element)

 

Please let me know if there is anyway to achieve this in KendoUI for jQuery.

Konstantin Dikov
Telerik team
 answered on 12 Dec 2018
3 answers
422 views

     Hi,

I'm using Kendo DataSource with templates.But also I've to using Kendo.Tooltip with this Itemtemplate.

I'm wondering if i have any chance to get data without givin a div or any html tag as a data attirbutes from my ItemTemplate to myTooltip template?

Normally you can set data tag with any html tag like this

<div class="col1" data-HistoryType="#:HistoryType#"></div>

and reach data in tooltip like #=target.data('HistoryType')# 

 

But my problem is a have many data to need to pass tooltip like that.

Here is my code example,

//I'm reach the model data using like #:HistoryType# etc.
 
<script type="text/x-kendo-template" id="newsfeedsItemTemplate">
    <li id="items">
        <div class="col1">
            <div class="cont">
                <div class="cont-col1">
                    <div class="label label-sm #:IconColor#">
                        <i class="#:FontAwesomeIconName#"></i>
                    </div>
                </div>
                <div class="cont-col2">
                    <div class="desc">
                        #:shortenText(Description,49)#
                    </div>
                </div>
            </div>
        </div>
    </li>
</script>
<script type="text/x-kendo-template" id="newsFeedsToolTipTemplate">
     //I want to reach here model data  I didnt use in Itemtemplate like ObjectName
    <div>#:ObjectName#</div>
</script>
Dimitar
Telerik team
 answered on 12 Dec 2018
3 answers
1.2K+ views

How can I make the grid save when the enter key is pressed? I have tried binding the keycode in the edit handler and that doesn't work.

I have added a kendoNumericTextBox editor for the cell and binded the change event and keydown event to the input. When I edit a cell and then press enter, the keydown event will been fired but the oldValue and newValue are always the same. It seems like the data source for the grid has been changed. 

My code as below:

grid.tbody.on("change", "input.txtTimeAllocation", function (e) {
  e.preventDefault();
  var row = $(e.target).closest("tr");
  var cell = $(e.target).closest("td");
  var colIndex = cell.index();
  var dataItem = grid.dataItem(row);
  var oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
  var newValue = Number(this.value);
  if (oldValue != newValue) {
    //save the change
    window.alert("Hours changed");
  }
}).on("keydown", "input.txtTimeAllocation", function (e) {         
  if (e.keyCode === kendo.keys.ENTER) {             
    e.preventDefault();
    var row = $(e.target).closest("tr");
    var cell = $(e.target).closest("td");
                
    var colIndex = cell.index();
    var dataItem = grid.dataItem(row);
    var oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
    var newValue = Number(this.value);
    if (oldValue != newValue) {
      //save the change
      window.alert("Hours changed");
    }
  }
});

 

 

Nana
Top achievements
Rank 1
 answered on 12 Dec 2018
1 answer
67 views

var dataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory",
            dataType: "jsonp"
        }
     }
});

We have a defined url here so the data is requested from this single URL and stored.

In my use-case, I need to make 3 sequential server calls before I get the actual data.

That is why I need to intercept the read  function of transport where I can make all the necessary backend calls and combine the results to move forward.

 

Dimitar
Telerik team
 answered on 12 Dec 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?