I'm fairly new to Kendo UI/Angular and I've run into a problem which I hope is not a biggie.Basically I want to allow users to dynamically create a grid.. that means setting data source, selecting columns.. grid options etc.The data source (which is SharePoint but it ain't part of the issue...) can sometime bring a "user" field which is the id of the user rather than the name. So after doing a little bit of research I opted to use column template function to get the actual name.Below is a portion of the Column object function that I use to dynamically create columns which will be pushed into an array.The piece of code that sets template works like a charm. However, if the grid has grouping enabled, when this column is dragged to be grouped by, then it shows the id. So I thought - too easy, I'm just going to do the same thing for the groupHeaderTemplate.. but it didn't work :( .It appears that this portion of the code * dataItem." + userId + " * is not valid when grouping. It just sends an undefined to the function. I've tried different things.. like use 'value', which kendo uses in some of their examples.. but no party so far.

Any help would be greatly appreciated!

function Column(Field, Title, Type) {
if(Type == "User"){
var userId = Field + "Id";
this.field = userId
this.template = "<span ng-bind=getUserName(dataItem." + userId + ")></span>";
this.groupHeaderTemplate = "<span ng-bind=getUserName(Dont Know What to put here)></span>";
} .....
}

 

Btw. when debugging this thing, I noticed that the getUSerName function gets call an stupid amounts times when rendering the grid. Is this normal? or am I doing something wrong? I'm a bit concern about the impact it could have on the performance. I mean, my test data source had 3 results, but the function was being called like 15 times.. odd.

Do we have a way to turn all grid header verticaly?

I try:
But that not give the exepected result.
thanks

I noticed that the thembuilder appears to download the full CSS for the entire framework, which would be expected. Is there an existing option or a planned future option to download only the CSS needed? For example if I wanted to do a custom build of Kendo Ui for only the grid widget, would I be able to use the themebuilder to create a theme that contains only the CSS needed for grid (and any required base CSS stuff as well) ?

Just curious as it would be nice to be able to generate a smaller CSS file to match a custom build.

Thanks,
Alan

 

Hello,

the problem which I have encountered is as following. When using DropDownList when items are long text and there are a lot of them on Chrome browser(IE and Edge works fine). There can be seen a difference in time which is needed for drop down to appear. This gives UX.

It can be easily observed on demo with list with short items and long ones in Chrome vs Edge.

Any suggestions how to proceed with it?

Demo: http://dojo.telerik.com/ImOtevOq

 On the Dojo Example   have split  The Items in Opening of are hidden behind div. How to show on top of

Hi,

I have a requirement in my project to transpose a grid (i.e. displaying tabular data in the flip axis so rows becomes columns and vice versa).

For example: Below is the data we typically display in kendo grid. It has 3 columns : Name, Age and City

 

I want to display above data in below manner: 

I noticed a server side solution of what I am looking for in a teleric blog (http://www.telerik.com/blogs/transpose-or-just-rows-as-columns), however I am looking as client side solution for it as rows will be added dynamically at run time on client event.

I also found few solutions on internet which partially solve the problem but they require to destroy the grid and then creating it all over again which I don’t want to do as I will lose existing unsaved data.

Please let me know if it’s possible to achieve using Kendo Grid.?  We use KendoUI for ASP.NET MVC and Kendo UI for HTML5.

I have a contextmenu that is targetting elements with a certain class, for example: $('#menu').kendoContextMenu(target: '.my-class'). Now I adding new DOM elements dynamically after creation of the contextmenu that have the class 'my-class'. How can I reuse the existing contextmenu?

Hi, 

As the title says, Im trying to remove a row from my grid without it affecting the datasource. The reason for this is that I have a list of ACTIVE users and if one is updated to be INACTIVE I need to remove it from the grid.

Things I've tried in the dataSource requestEnd(), if the type is an update, and the response object is inactive:
 1) Remove it from the datasource. This does not work, becuase the next DS sync thats run, calls the destroy method on the deactivated record
 2) execute a filter() on the dataSource to only display ACTIVE users but I get a JavaScript error "Uncaught TypeError: Cannot read property 'status' of undefined" and it points to the lie where the filter is executed.

Any advice would be appreciated.

Thanks and Kind Regards,
Grant

I initialize a list view in the ini handler of a bootbox.dialog (http://bootboxjs.com/examples.html) from a button in a grid:

$("#listview").kendoListView({...

The content of the dataSource is different from each grid row.

This initialization happen every time the button is clicked.

Can/Should I initialize only once and just update the dataSource.

Thanks in advance

Regards

Morten

It works:

$(function() {
    $("#dropdownlist").kendoDropDownList({
    dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Todos", value: 0 },
{ text: "Valor 1", value: 1 },
{ text: "Valor 2", value: 2 }
]
 
            });
var valor = $("#dropdownlist").data("kendoDropDownList");


function loadGrid(){
$("#grid").kendoGrid({
dataSource:{
transport:{
read: {url:"http://localhost/php/lerdados.php", dataType:"json", data:{"Ordem": valor.value()}, type: "post"}
},
schema:{
type: "json",
data: "xData"
}
}, 
columns: [
                    { field: "Ordem", title: "Ordem"},
{ field: "Data", title: "Data", width: "100px" },
                    { field: "Total", title: "Total", format: "{0:c}", width: "100px" }
],

})};



$("#getValue").click(function() {
               loadGrid();
  

});
    });

 

when i declare datasource as variable doesn't work.

$(function() {
    
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Todos", value: 0 },
{ text: "Valor 1", value: 1 },
{ text: "Valor 2", value: 2 }
]
 
            });
var valor = $("#dropdownlist").data("kendoDropDownList");



var mdataSource = new kendo.data.DataSource({
transport:{
read: {url:"http://localhost/php/lerdados.php",  dataType:"json", data:{"Ordem": valor.value()}, type: "post"}

},
schema:{
type: "json",
data: "xData"
}
        });

function loadGrid(){

$("#grid").kendoGrid({
dataSource: mdataSource,

columns: [
{ field: "Ordem", title: "Ordem"},
{ field: "Data", title: "Data", width: "100px" },
{ field: "Total", title: "Total", format: "{0:c}", width: "100px" }
],


})
};





$("#getValue").click(function() {
               
   loadGrid();
  

});
    });