Telerik Forums
Kendo UI for jQuery Forum
9 answers
539 views
I've got a bit of a scenario, I'm loving the fact you can bind a full DataSource to a grid now, but the data-columns section of it is what's troubling me.

Currently, I have
data-columns='[{"field": "ID"}]'

in which works fine, but I'm wanting a *lot* of more intense functionality than that, in which has to be done on one line in HTML otherwise the templates break in Kendo. An example of this is just one row (I have 10):

{ field: "id", title: "Actions", template: "<span class='k-icon k-arrow-next'></span> <span class='k-icon k-delete deleteLink'></span>", width: 60, filterable: false, sortable: false },

What I was looking for was something like data-columns="source: dataColumns" but this doesn't seem to work. I'd settle for being able to do the data-columns="" code on multiple lines on my HTML document. Right now, on one line, it's completely unreadable.

I'm surprised more people aren't asking how to do this, unless I'm missing something?
Alex Hajigeorgieva
Telerik team
 answered on 24 Oct 2017
2 answers
69 views

Here's a derivative of an another plunk:

http://plnkr.co/edit/6s4lauofvTVDnSgs5Ix2?p=preview

The only change I made was to set the February red point to zero. The marker there is clipped and you only see half the circle.

I read old threads on setting margins, turning off clipping etc but none of those worked for me. Can someone provide a change to the above plunk that shows how to get that marker to show in full?

 

 

Rob
Top achievements
Rank 1
 answered on 23 Oct 2017
2 answers
196 views

Hello! I'm trying to make a filter on scheduler resources, it's a quite "heavy" filter because it has to hide not only filtered tasks but also the rows in the DOM. I've succeded to do this behaviour in Timeline* views, as you can see in this dojo example => https://dojo.telerik.com/OxafU/4

The problem is to do such same thing in Month view...seems quite hard because the scheduler html table is very different from Timeline ones.

Could you help me please?

Thanks,
Mattia T.

Mattia
Top achievements
Rank 1
 answered on 23 Oct 2017
4 answers
165 views

Hello,

i have a question to the server-side grouping option. The grid is configured with server-side sorting and server-side grouping. The column-sorting runs without errors, but as soon as i group the table is the sorted Data (from a sorted column) not sorted anymore.

After that i logged the data from the server and the data is sorted as it should. Furthermore i tried to sort the data directly on the server, and then i grouped the grid two times (no column sorting in the grid). The result was that the server-sorted column was not sorted anymore. With this test is clear that the grid is sorting the incoming (already sorted) data. Does somebody has any idea how i can fix that issue.

I attached two files with the grid and the server data. The blue rectangle marks the relevant part and the red one the sorted column.

 

Marcel
Top achievements
Rank 1
 answered on 23 Oct 2017
5 answers
472 views

Is there an accepted way to force a grid with incell editing to invoke an update when the user remove focus from the edited cell? We currently use the approach below but it has become unreliable and sometimes does not properly update the UI elements (loading spinner never disapears, dirty indicator doesn't disappear, etc)

 

 

             ev.Save(@"function(e){
                    setTimeout(function(){
                        $('#ExecutionPartGrid').data('kendoGrid').dataSource.sync()})}"
                  );

Preslav
Telerik team
 answered on 23 Oct 2017
1 answer
296 views

I know I'm new to these control, and I've researched, but can't seem to find an answer that works.

I have a grid, and thats now working 100%, but I can't seem to navigate to a url on the selected row click / change?  I'm getting a window.location undefined error.  I know it's probably something simple I'm overlooking, but I'm just not seeing it yet?

Here is what I have...

$("#agencyListGrid").kendoGrid({
columns: [{
field: "agencyName",
title: "Agency"
},
{
field: "agencyID",
title: "View",
width: 100,
headerAttributes: {
style: "text-align:center"
},
template: '<div style="text-align:center" onclick="navigateToAgency"><i class="fa fa-search fa-lg" aria-hidden="true"></i></div>'
},
{
field: "agencyID",
title: "Archive",
width: 100,
headerAttributes: {
style: "text-align:center"
},
template: '<div style="text-align:center"><i class="fa fa-archive" aria-hidden="true"></i></div>'
}],
dataSource: {
data: this.agencyList.agencies,
pageSize: 15
},
height: 500,
selectable: "row",
scrollable: false,
pageable: {
pageSizes: true,
buttonCount: 5
},
change: function() {
var tempView = $("#agencyListGrid").data("kendoGrid");
//Getting selected item
var selectedItem = tempView.dataItem(tempView.select());
this.window.location = "agencies/" + selectedItem.agencyID;
}
});
}

ERROR MESSAGE:

ERROR TypeError: Cannot set property 'location' of undefined
    at init.change (agency-list.component.ts:84)
    at init.trigger (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)

Georgi
Telerik team
 answered on 23 Oct 2017
3 answers
359 views

Hello,

The Context: We have a grid that has locked content. But the problem is the height of each row is too large, so I want to reduce it. Adding css to tr doesn't work because kendo will add height attribute to the dom after _adjustRowsHeight.

 

The solution I have is to adjust the height of the locked table and scollable table in dataBound function, but I want to sync the height of each row in the two tables after this. My question is: Is there a way to sync the height of locked table and the scrollable table without manually calling _adjustRowsHeight method?

 

Best regards,

Yajing

Stefan
Telerik team
 answered on 23 Oct 2017
4 answers
193 views

Hi, 

Im not going to pretend to know what is happening here, so I'll just explain how to duplicate it.

I have a demo (https://dojo.telerik.com/iQEtE). Monitor the web console.

1. Create an event, at 10:30am (for example).
2. Resize the event so it starts at 10:00

In the console, I've printed the event object which displays the start time as 10:00, the new time of the event. But on the next line I've explicitly printed the start value and it reads as 10:30, the original time.

I have no idea what is happening, please advise.

Thanks,
Grant

Veselin Tsvetanov
Telerik team
 answered on 23 Oct 2017
1 answer
132 views

Hi,

I am trying to display a diagram with the following code. I took this from the "Editing" sample posted in Telerik site. After ensuring that it works with the Telerik's data services on my page, I am trying to use it with my own service. This doesn't work. Can someone please help?

Please note: I have intentionally commented the connection piece to first debug the data source piece. I am also attaching a sample of my connections service which returns connections between two entities using LE_Code & F_LE_Code (whose values can be same sometimes. So, we need to add a filter to filter out the items where LE_Code & F_LE_Code are the same). Please suggest how should I specify the connections code and schema? 

 

Code

 
 function visualTemplate(options) {
                        var dataviz = kendo.dataviz;
                        var g = new dataviz.diagram.Group();
                        var dataItem = options.dataItem;
                         
                            g.append(new dataviz.diagram.Rectangle({
                                width: 240,
                                height: 67,
                                stroke: {
                                    width: 0
                                },
                                fill: "#e8eff7"
                            }));
 
                        return g;
                    }
 
                    function onDataBound(e) {
                        var that = this;
                        setTimeout(function () {
                            that.bringIntoView(that.shapes);
                        }, 0);
                    }
 
                    //function createDiagram() {
                        //var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
 
                        var shapesDataSource = {
                            batch: false,
                            transport: {
                                read: {
                                    url: "Server/SQLService.svc/GetLEData",
                                    dataType: "jsonp"
                                }//,
                                //update: {
                                //    url: serviceRoot + "/DiagramShapes/Update",
                                //    dataType: "jsonp"
                                //},
                                //destroy: {
                                //    url: serviceRoot + "/DiagramShapes/Destroy",
                                //    dataType: "jsonp"
                                //},
                                //create: {
                                //    url: serviceRoot + "/DiagramShapes/Create",
                                //    dataType: "jsonp"
                                //}
                            },
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { from: "PID", type: "number", editable: false },
                                        LE_Code: { type: "string" },
                                        LE_Country: { type: "string" }
                                    }
                                }
                            }
                        };
 
                        var connectionsDataSource = {
                            batch: false,
                            transport: {
                                read: {
                                    url: serviceRoot + "/DiagramConnections",
                                    dataType: "jsonp"
                                }
                            },
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { from: "Id", type: "number", editable: false },
                                        from: { from: "FromShapeId", type: "number" },
                                        to: { from: "ToShapeId", type: "number" },
                                        fromX: { from: "FromPointX", type: "number" },
                                        fromY: { from: "FromPointY", type: "number" },
                                        toX: { from: "ToPointX", type: "number" },
                                        toY: { from: "ToPointY", type: "number" }
                                    }
                                }
                            }
                        };
 
                        $("#diagram").kendoDiagram({
                            dataSource: shapesDataSource,                           
                            layout: {
                                type: "tree",
                                subtype: "tipover",
                                underneathHorizontalOffset: 140
                            },
                            shapeDefaults: {
                                visual: visualTemplate,
                                content: {
                                    template: "#= dataItem.JobTitle #",
                                    fontSize: 17
                                }
                            },
                            connectionDefaults: {
                                stroke: {
                                    color: "#586477",
                                    width: 2
                                }
                            },
                            dataBound: onDataBound
                        });

 

Sample JSON data returned from my GetLEData service

[{"LE_Code":"CO001","LE_Country":"USA","PID":1},{"LE_Code":"CO002","LE_Country":"Canada","PID":2},{"LE_Code":"CO100","LE_Country":"USA","PID":3},{"LE_Code":"CO101","LE_Country":"China","PID":4},{"LE_Code":"CO105","LE_Country":"United States","PID":5},{"LE_Code":"CO110","LE_Country":"United States","PID":6},{"LE_Code":"CO180","LE_Country":"Canada","PID":7},{"LE_Code":"CO210","LE_Country":"Brazil","PID":8}]

 

Sample JSON data returned from my connections service

[{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":1,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":2,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":58,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":59,"Performed":1,"Return":20,"Treatment":"% Sales","TreatmentID":1},{"AccountID":5,"Country":"Isle Of Man","F_LE_Code":"CO790","Function":2,"LE_Code":"CO790","Label":"CSP","PID":60,"Performed":1,"Return":1,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":61,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":62,"Performed":1,"Return":-2,"Treatment":"% Sales","TreatmentID":1}]

 

Appreciate your help!

Thanks,

Stefan
Telerik team
 answered on 23 Oct 2017
1 answer
270 views

Hi,

When I set "selectable: true" to help to select multiple events on desktop screen but in mobile I can not do it. Is it possible to select multiple events on mobile?

For other things after selecting multiple events how I can open the editor form with these values, currently the scheduler open dialog editor form when we click on one cell.

Thanks in advance!

Plamen
Telerik team
 answered on 20 Oct 2017
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?