Questions on Kendo UI for jQuery Forum

4 answers

120 views

Kendo UI charts are not being rendered(working) in IE8..How to fix this?

Hi,

Kendo UI charts are not being rendered(working) in IE8..How to fix this?.This is vital for us ..Please help me in this regrad.

Thanks,
Prabhakar Manne

General Discussions

answered on 10 Oct 2013

3 answers

282 views

Binding Grid to local Json

Hello,
I'm trying to build a grid by retrieving the data from a JSON object, but I can't crearly get how to do it.

I would like to define the Grid in C# with no data model specified and then defining the model(columns) and populating the rows at client-side time. Is it possible or it's just senseless?

I can't find clear examples on how to build the grid from a Json, could I have some?

Thanks anticipately

Grid

answered on 10 Oct 2013

1 answer

217 views

Hover and selected background not full width when using scrollbar

Hi,

There are issue with the treeview on hover and selected item.

In the attachment, "1. first load treeview.png" show that the treeview data is generated and there are words that cannot be view.

So, we use the scroll bar to scroll to the back to see the whole word and we encounter the layout issue which is show in "2. after scrolled treeview.png".

Please help to provide a solution.

TreeView

answered on 10 Oct 2013

1 answer

297 views

Access value of Dependent Method after Binding in JavaScript

I'm trying to access a Dependent Method's calculated value in JavaScript after the binding. Why doesn't this work?

// Create an observable view model object.

var person = kendo.observable({

firstName: "John",

lastName: "DeVight",

// Create a dependent method (calculated field).

fullName: function() {

// The "get" function must be used so that changes to any

// dependencies will be reflected in the dependent method.

return this.get("firstName") + " " + this.get("lastName");

}

});

// Bind the view model to the personFields element.

kendo.bind($('#personFields'), person);

// This produces the function() without handing off the value to the JS variable

var fullName = person.get("fullName");

Or trying it by replacing the "this" with "person"...

// Create an observable view model object.

var person = kendo.observable({

firstName: "John",

lastName: "DeVight",

// Create a dependent method (calculated field).

fullName: function() {

// The "get" function must be used so that changes to any

// dependencies will be reflected in the dependent method.

return person.get("firstName") + " " + person.get("lastName");

}

});

// Bind the view model to the personFields element.

kendo.bind($('#personFields'), person);

var fullName = person.get("fullName");

If I did something similar in KnockoutJs, it would be like this below (and this works): (jsFiddle: http://jsfiddle.net/piercove/S6Q8D/2/)

var ViewModel;

// Create an observable view model object.

var person = function() {

var self = this;

self.firstName = ko.observable("John");

self.lastName = ko.observable("DeVight");

// Create a dependent method (calculated field).

self.fullName = ko.computed(function () {

return self.firstName() + " " + self.lastName();

});

};

// Match to the global JS object

ViewModel = new person();

// Bind the view model to the personFields element.

ko.applyBindings(ViewModel, document.getElementById("result"));

var fullName = ViewModel.fullName();

$("#result").html(fullName);

So, the question is, how do I pull off the equivalent in Kendo MVVM. I try to keep my code in JS files and not in the web page itself (Razor view in ASP.NET MVC to be exact). In my JS files, I have a unique "ViewModel" object that creates a new instance of the view model for that page, so that all the observables and internal functions can be accessed by any other functions in that same JavaScript file. I'm wondering how to pull off something similar with Kendo MVVM.

Thanks!

MVVM

answered on 10 Oct 2013

3 answers

120 views

Filter Menu Customization Error

Hi guys,
I'm having some issues trying to customize a filter (as a dropdownlist ) in a grid.
The result is that if I use "is equal to", the result is always nothing... (no errors, just no records)
while if I use "contains" or "starts with" I get an error like "Object 1 has no method 'toLowerCase'" (that goes deep into kendo's and jquery's js)

here my code

column definition:

{

field: "Role",

title: "ruolo",

template : "<span>${Role.Name}</span>",

filterable: {

ui: RoleFilter,

extra: false

},

editor: function (container, object) {

SetRoleSelect(container, object);

}

},

dataSource definition

fields: {

prop1 : {type:"string"}

Role: {

Id: { type: "int", editable: false },

Name: { type: "string", editable: true, validation: { required: true } },

Descrizione: { type: "string", editable: true, validation: { required: false } },

Visible: { type: "boolean", editable: true },

Rango: { type: "number", editable: true, validation: { required: true, min: 0 } }

}

and my function

RoleFilter: function (element) {

element.kendoDropDownList({

dataTextField: "Name",

dataValueField: "Id",

dataSource: {

transport: {

read: {

url: "my url returning a list of Role object",

cache: true

}

},

optionLabel: "Select a Role"

});

}

My guess is that there's a kind of mismatch between the object inside the filter and the in the grid's datasource...
but objects are actually the same!

Where I am doing wrong? thanks!
Fabio

Grid

answered on 10 Oct 2013

7 answers

1.3K+ views

Closing a window after a HttpPost action is fired successfully

In my MVC project, I have a view which displays a list of roles (as in user roles), and an add button, which pops up a KendoUI window, rendering a Create view.
This is how my window snippet looks like:

@(Html.Kendo().Window()
           .Name("window")
           .Title("Role")
           .Content("loading...")
           .LoadContentFrom("Create", "RolesPermissions", Model.Role)
           .Modal(true)
           .Width(550)           
           .Height(300)                      
           .Visible(false)
          )

And this is what I use to open(popup) and close the window

    $(document).ready(function () {
        var wnd = $("#window").data("kendoWindow");
 
        wnd.bind("refresh", function (e) {
            var win = this;
            $("#close").click(function() {
                win.close();
            });
        });
 
        $("#open").click(function (e) {
            wnd.center();
            wnd.open();
        });
 
    });

My question is, how do I close the window, if and only if the action is successful?

        [HttpPost]
        public ActionResult Create(RoleModel model)
        {
 
            if (ModelState.IsValid)
            {
                RoleDto role = new RoleDto
                    {
                        Name = model.Name,
                        Description = model.Description
                    };
 
                var roleAdded = _rolePermissionsRepository.AddRole(role);
                if (roleAdded != null)
                {
                    //CLOSE KENDOUI WINDOW
                }
                else
                {
                    //PRINT ERROR MSG TO KENDOUI WINDOW
                }
            }
            return View();
        }

I would like to know how to handle the portions that I have commented.

Basically, if the role is added succesfully, I would like the window to close automatically, taking me back to my list of roles, which I will then update. If there's any kind of error, the window will remain open, showing an error msg.

Window

answered on 10 Oct 2013

1 answer

130 views

Themebuilder Output

Hi,

I used the theme builder and got the theme where I wanted. I saved the output CSS into a CSS file and referenced it after kendo.common.min.css. I was using the default theme, so I commented that line out. I've double checked spellings and file locations and they are correct.

When I load my page, I get a completely different look than I intended in my theme builder work. Also, no images for the listview pager or, anywhere else Kendo for that matter.

I believe I followed the instructions as stated on the page. Am I missing something?

Here are the include lines:

<link href="@Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

@*<

link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.default.min.css")" rel="stylesheet" type="text/css"

/>*@

<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />

THIS IS MY CUSTOM THEME....

<link href="@Url.Content("~/Content/kendo/2013.2.918/WFHCustom/KendoCustomTheme.css") rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

General Discussions

answered on 10 Oct 2013

5 answers

274 views

TabStrip inside TabStrip displays unwanted bullet points in IE

Hi,

I have 2 tabstrips, one parent and one child. In IE this renders bullet points beside each tab. Works fine in Chrome, but my target browser is IE (unfortunately).

I have created a very simple example on JS Bin to illustrate this http://jsbin.com/EPoDUpE/2. Click Tab 3. This shows the child tabstrip with items Tab3.1, Tab3.2 etc. You will see each of these tabs have bullet points beside them. Am I doing something wrong? Or is this a bug with the framework?

I have another issue with the display of the child tabstrip and that is, it indents itself, I can't seem to prevent this. I would like it to be the exact width and inline with the parent tabstrip. How do I correct this?

Thanks,
Ade

TabStrip

answered on 10 Oct 2013

3 answers

92 views

Multi-grouping, in IE10, is not displayed well

Dear Kendo Team,
As you could see in the attach files, if I group with multiple columns, the behavior of the subrows seem to be a bit strange....but it's well displayed if I expand the group
This issue doesn't appear with chrome...
Could you provide me a solution for this issue?
Thanks in advance

Grid

answered on 10 Oct 2013

1 answer

98 views

Data not rendering in grid

Hi
I get the data back just fine, but I am not able to render it in the grid. My grid rendering function is here:

function RenderDetailedBvtResults(data) {
debugger;
$('#gridBvtDetails').kendoGrid({
data: data,
scrollable: false,
toolbar: 'Details',
});
}

General Discussions

answered on 10 Oct 2013