Hi,

I'm trying to generate bar chart by using 'data-' configuration & template, but i'm unable to obtain any display.

The desired result is a listview containing several listview containing several bar graph. Each level is generated by a template.

The project can be seen here : http://dojo.telerik.com/@cco/iGix

Any help should be appreciated.
Thanks in advance.

- Mins -

I am trying to databind ASP.NET web api odata v3 to kendoui diagram
control. It works OK with local data source but I am getting error when
trying to use odata

Error:

Uncaught TypeError: Cannot read property '__count' of undefined

HTML



AngularJS
$scope.options = {
dataSource: {
type: "odata",
transport: {
read: {
url: "odata/Entities",
dataType: "json",
type: "GET"
}
}
},
shapeDefaults: {
visual: visualTemplate
},
layout: {
type: "tree"
},
schema: {
data: "value"
}
};



function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;

g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: "green"
}));

g.append(new dataviz.diagram.TextBlock({
text: dataItem.Name,
x: 85,
y: 20,
color: "#fff"
}));

return g;
}

json

{
"odata.metadata":"http://localhost/TestSPA/odata/$metadata#Entities","odata.count":"5","value":[
{
"EntityRef":7,"Name":"Test"
}
]
}

Hi, we run in a "strange" behavior of the grid when we activate the row filter on a MVC grid with ajax binding and a default group. The grouped column is invisible (visible = false) and the final effect is that under a "fake" first column I see the textbox of the row filter. I attach a screenshot.
This is our code (fragment):
@(Html.Kendo().Grid(Model).Name("Grid").Mobile()
.Columns(columns =>
 {
  columns.Bound(model => model.Segment).Title("Segmento").Groupable(true).Visible(true).Locked(true).Lockable(false).Width(220);
 columns.Bound(model => model.MainHolder).Title("Richiedente").Width(220).Locked(true).Lockable(false);
 columns.Bound(model => model.VATNumber).Title("P.IVA").Groupable(true).Width(220).Locked(true).Lockable(false);
 columns.Bound(model => model.ApplicationResult).Title("Valutazione").Groupable(true).ClientTemplate("<span class='#= ApplicationResult #'>#= ApplicationResult #</span>").Width(220);
 columns.Bound(model => model.ActualState).Title("Stato").Groupable(true).Width(220).Lockable(false);
 columns.Bound(model => model.ApplicationId).Title("Id Pratica").Width(220).Lockable(false);
 columns.Bound(model => model.FinanceType).Title("Tipo di Finanziamento").Groupable(true).Width(220).Lockable(false);
 columns.Bound(model => model.LegalForm).Title("Forma Giuridica").Groupable(true).Width(220).Lockable(false);
 columns.Bound(model => model.CCIAAREA).Title("CCIAAREA").Groupable(true).Width(220).Lockable(false);
 columns.Bound(model => model.ApplicationDate).Title("Data Apertura Pratica").Width(220).Groupable(true).ClientTemplate("#= kendo.toString(ApplicationDate, \"d MMM yyyy\") #").Lockable(false);
 columns.Bound(model => model.CreatedBy).Title("Inserita da").Width(220).Lockable(false);
 columns.Bound(model => model.UpdatedBy).Title("Aggiornata da").Width(220).Lockable(false);
})
.ToolBar(toolbar =>{toolbar.Template(@<div class="ToolbarRow row ">Stato dell'Attività</div>);})
.Groupable()
Sortable(config => config.SortMode(GridSortMode.MultipleColumn))
Selectable()
Reorderable(reordering => reordering.Columns(true))
Scrollable()
.ColumnMenu(columnMenu => columnMenu.Enabled(true).Filterable(false))
.DataSource(ds => ds
 .Ajax()
 .Read(read => read.Action("ApplicationGrid_Read", "Home"))
 .Group(config => config.Add(itm=>itm.Segment))
 .ServerOperation(false)
 .Model(config => config.Id(m => m.Id)))
.Filterable(filtering => filtering.Enabled(true).Mode(GridFilterMode.Row))
.Events(evt => evt.DataBound("ChangeCellColor"))
)

Any ideas?

Thank you,

Simone

Hi,

I'm currently evaluating the new kendo grid Row filter mode.

In an example linked bellow I try to use a drop down list filter but it fails to work in case the drop down list has an objects collection as a data source.

See: http://jsbin.com/guyot/1/edit 

In case the data is just an array of strings it works.

Could you please assist? Am I defining something wrong or is it a bug?

Thanks

I've noticed that when I create a grid where scrollable is true (or default) and the height is not specified that the progress indicator is not visible. However, if I change the _progress function on the Grid to look like the following, the indicator is displayed and hidden as expected, regardless of whether/how scrollable or height is specified.


From what I can tell, this produces the expected results in each scenario I've tested. Considering pull requests are not accepted for the Grid, I was wondering if someone can review this and, if acceptable, include in the next release.

Hi to all,

Great day...

I would like to ask or is this a bug on kendow window or may be there's something missing on my code.
I'm trying to download a different types of file (.zip, pdf. xlsx, docx, etc).
But when I'm try to click the download link (attachment name link), the data is trying to open on kendo window as garbage.
This file is a byte data type came from SQL Server database..
I use this on pop-up dialog kendo window where there's a kendo grid inside of it.

Here's my code below:

Razor:

Here's the javascript code:



Here's the controller:



Thank you in advance for your kind help.

Html :
<div id="grid"></div
 <div id="treeview"></div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Grid Column format:
columnSchema.push({ field: "Type", title: "Type", filterable: true, locked: false, lockable: true, width: 120, editor: typeDropDownEditor, template: "#=Type#" });
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Method:
        function typeDropDownEditor(container, options) {
           $("#treeview").kendoTreeView({
                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
        
            var dropdown = $('<input  id="dropdown"  />')
               .appendTo(container)
               .kendoDropDownList({
                   dataSource: [{ text: "", value: "" }],
                   dataTextField: "text",
                   dataValueField: "value",
                   open: function (e) {
                       // If the treeview is not visible, then make it visible.
                       if (!$treeviewRootElem.hasClass("k-custom-visible")) {
                           $treeviewRootElem.slideToggle('fast', function () {
                               dropdown.close();
                               $treeviewRootElem.addClass("k-custom-visible");
                           });
                       }
                   }
               }).data("kendoDropDownList");
            initailizeDDTreeViewfunction(dropdown);
        }

function initailizeDDTreeViewfunction(DDObject) {

            var $dropdownRootElem = $(DDObject.element).closest("span.k-dropdown");

            var treeview = $("#treeview").kendoTreeView({
                select: function (e) {
                    // When a node is selected, display the text for the node in the dropdown and hide the treeview.
                    $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
                    $treeviewRootElem.slideToggle('fast', function () {
                        $treeviewRootElem.removeClass("k-custom-visible");
                    });
                }
            }).data("kendoTreeView");

            $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

            // Hide the treeview.
            $treeviewRootElem.width($dropdownRootElem.width()).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });

            // Position the treeview so that it is below the dropdown.
            $treeviewRootElem.css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

            $(document).click(function (e) {
                // Ignore clicks on the treetriew.
                if ($(DDObject.element).closest("div.k-treeview").length == 0) {
                    // If visible, then close the treeview.
                    if ($treeviewRootElem.hasClass("k-custom-visible")) {
                        $treeviewRootElem.slideToggle('fast', function () {
                            $treeviewRootElem.removeClass("k-custom-visible");
                        });
                    }
                }
            });
        }

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I have tried out this example but didn't work as tree view is not consistent and positioned with respect to dropdown 
can you suggest any smoother and simple solution for this problem.
http://www.telerik.com/forums/treeview-in-dropdownlist

Html :
<div id="grid"></div
 <div id="treeview"></div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Grid Column format:
columnSchema.push({ field: "Type", title: "Type", filterable: true, locked: false, lockable: true, width: 120, editor: typeDropDownEditor, template: "#=Type#" });
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Method:
        function typeDropDownEditor(container, options) {
           $("#treeview").kendoTreeView({
                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
        
            var dropdown = $('<input  id="dropdown"  />')
               .appendTo(container)
               .kendoDropDownList({
                   dataSource: [{ text: "", value: "" }],
                   dataTextField: "text",
                   dataValueField: "value",
                   open: function (e) {
                       // If the treeview is not visible, then make it visible.
                       if (!$treeviewRootElem.hasClass("k-custom-visible")) {
                           $treeviewRootElem.slideToggle('fast', function () {
                               dropdown.close();
                               $treeviewRootElem.addClass("k-custom-visible");
                           });
                       }
                   }
               }).data("kendoDropDownList");
            initailizeDDTreeViewfunction(dropdown);
        }

function initailizeDDTreeViewfunction(DDObject) {

            var $dropdownRootElem = $(DDObject.element).closest("span.k-dropdown");

            var treeview = $("#treeview").kendoTreeView({
                select: function (e) {
                    // When a node is selected, display the text for the node in the dropdown and hide the treeview.
                    $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
                    $treeviewRootElem.slideToggle('fast', function () {
                        $treeviewRootElem.removeClass("k-custom-visible");
                    });
                }
            }).data("kendoTreeView");

            $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

            // Hide the treeview.
            $treeviewRootElem.width($dropdownRootElem.width()).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });

            // Position the treeview so that it is below the dropdown.
            $treeviewRootElem.css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

            $(document).click(function (e) {
                // Ignore clicks on the treetriew.
                if ($(DDObject.element).closest("div.k-treeview").length == 0) {
                    // If visible, then close the treeview.
                    if ($treeviewRootElem.hasClass("k-custom-visible")) {
                        $treeviewRootElem.slideToggle('fast', function () {
                            $treeviewRootElem.removeClass("k-custom-visible");
                        });
                    }
                }
            });
        }

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I have tried out this example but didn't work as tree view is not consistent and posioned with respect to dropdown 
can you suggest any smother solution for this problem.
http://www.telerik.com/forums/treeview-in-dropdownlist

Is it possible to disable specific time frames within a day?
For example: no events possible during a set lunch time..

Thanks!

Hi kendo team:
It seems inputWidth doesn't cause any effect. Please, Try this example.
The width of the input in the filter cell doesn't change.
Kind regards,
Oscar.