Questions on Kendo UI for jQuery Forum

1 answer

90 views

Hi

I'm using Kendo widgets extensively with changeable theme.
Colors work just fine on Kendoui elements, the problem is with all the other elements on the pages.
How to make them easily follow the selected theme?

I could do a little with the help of
http://docs.kendoui.com/getting-started/web/appearance-styling
E.g. setting the "k-content" class for the body (that would only take care of the text and background color), "k-button" for all buttons, "k-link" for all links, etc.
Would it be possible to automatically wrap the colors from the theme for all input/link/table/... elements on the page?
Thanks.

Raido

General Discussions

answered on 11 Oct 2013

3 answers

730 views

Ajax.BeginForm in Window not working

I'm trying to place a form inside a Kendo Window, and not having any success. Basically, the problem is that the generated html contains an empty form tag, instead of having the fields placed within the form tag.

Here's my cshtml file. I place two identical forms on the page, one 'normal' and one inside a Kendo Window.

@model SkyBooks.Web.Models.EmailInfo

@{

ViewBag.Title = "title";

}

<div style="float:right">

<span id="btnCreateRole" class="k-button">Create New User Role</span>

</div>

<div style='clear: both'></div>

<h2>Kendo UI Window with Ajax Form test</h2>

@* Plain Ajax Form Without Kendo Window *@

<div id="personalDetail">This is where the feedback goes</div>

@using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading" }))

{

@Html.ValidationSummary(true)

<fieldset>

<legend>Ajax.BeginForm Demo</legend>

<div class="editor-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.EmailAddress)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.EmailAddress)

@Html.ValidationMessageFor(model => model.EmailAddress)

</div>

<input type="submit" value="Submit" />

<div id="divLoading" style="display:none">

@* loader image created at: http://www.ajaxload.info/ *@

<img src="@Url.Content("~/Content/images/ajax-loader.gif")" />

</div>

</fieldset>

}

@* And this is an attempt at an ajax form inside a Kendo Window *@

@(Html.Kendo().Window()

.Name("window")

.Title("New User Role")

.Content(@<text>

@using (Ajax.BeginForm("AjaxCreate", "KendoWindowAjax", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "personalDetail", LoadingElementId = "divLoading2" }))

{

@Html.ValidationSummary(true)

<fieldset>

<legend>Ajax.BeginForm Demo</legend>

<div class="editor-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.EmailAddress)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.EmailAddress)

@Html.ValidationMessageFor(model => model.EmailAddress)

</div>

<input type="submit" value="Submit" />

<div id="divLoading2" style="display:none">

@* loader image created at: http://www.ajaxload.info/ *@

<img src="@Url.Content("~/Content/images/ajax-loader.gif")" />

</div>

</fieldset>

}

</text>)

.Draggable()

.Events(ev => ev.Close("onClose"))

.Visible(true)

.Modal(true)

)

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

}

<script>

function onClose() {

$("#btnCreateRole").removeClass("k-state-disabled");

}

$(document).ready(function () {

$("#btnCreateRole").bind("click", function () {

if (!$("#btnCreateRole").hasClass("k-state-disabled")) {

$("#window").data("kendoWindow").center().open();

$("#btnCreateRole").addClass("k-state-disabled");

}

});

</script>

I’ve included the generated html below. Notice that the first form is surrounded by a form tag, as expected. But the form tag inside the window is empty.

Not surprisingly, given the generated html, the forms behave differently. When I click on Submit without entering anything, the normal form displays validation errors, while the one in the window does nothing. When I enter valid data and click on Submit, the normal form submits the ajax post, while the one in the window does nothing.

If I replace the Ajax.BeginForm statement inside the window with the raw form tag html, then both forms work as expected.

Any suggestions for how to put a form inside a Kendo UI window without resorting to the raw html would be appreciated.
Thanks,
Ken

<section id="main">

<div style="float:right">

<span id="btnCreateRole" class="k-button">Create New User Role</span>

</div>

<div style='clear: both'></div>

<h2>Kendo UI Window with Ajax Form test</h2>

<div id="personalDetail">This is where the feedback goes</div>

<form action="/KendoWindowAjax/AjaxCreate" data-ajax="true" data-ajax-loading="#divLoading" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#personalDetail" id="form0" method="post"> <fieldset>

<legend>Ajax.BeginForm Demo</legend>

<div class="editor-label">

<label for="Name">Name</label>

</div>

<div class="editor-field">

<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

</div>

<div class="editor-label">

<label for="EmailAddress">EmailAddress</label>

</div>

<div class="editor-field">

<input data-val="true" data-val-length="The EmailAddress must be from 6 to 20 characters long." data-val-length-max="20" data-val-length-min="6" data-val-required="The EmailAddress field is required." id="EmailAddress" name="EmailAddress" type="text" value="" />

<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>

</div>

<input type="submit" value="Submit" />

<div id="divLoading" style="display:none">

<img src="/Content/images/ajax-loader.gif" />

</div>

</fieldset>

</form>

<form action="/KendoWindowAjax/AjaxCreate" data-ajax="true" data-ajax-loading="#divLoading2" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#personalDetail" id="form1" method="post"></form><div id="window">

<fieldset>

<legend>Ajax.BeginForm Demo</legend>

<div class="editor-label">

<label for="Name">Name</label>

</div>

<div class="editor-field">

<input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

</div>

<div class="editor-label">

<label for="EmailAddress">EmailAddress</label>

</div>

<div class="editor-field">

<input data-val="true" data-val-length="The EmailAddress must be from 6 to 20 characters long." data-val-length-max="20" data-val-length-min="6" data-val-required="The EmailAddress field is required." id="EmailAddress" name="EmailAddress" type="text" value="" />

<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>

</div>

<input type="submit" value="Submit" />

<div id="divLoading2" style="display:none">

<img src="/Content/images/ajax-loader.gif" />

</div>

</fieldset>

</div><script>

jQuery(function(){jQuery("#window").kendoWindow({"close":onClose,"modal":true,"iframe":false,"draggable":true,"title":"New User Role","resizable":false,"content":null,"actions":["Close"]});});

</script>

<script>

function onClose() {

$("#btnCreateRole").removeClass("k-state-disabled");

}

$(document).ready(function () {

$("#btnCreateRole").bind("click", function () {

if (!$("#btnCreateRole").hasClass("k-state-disabled")) {

$("#window").data("kendoWindow").center().open();

$("#btnCreateRole").addClass("k-state-disabled");

}

});

</script>

</section>

Window

answered on 10 Oct 2013

4 answers

110 views

Can't find .Click() on custom commands in grids (in asp.net mvc wrapper) as showed in demo

Using the asp.net mvc kendoui wrapper,

I cannot use the .click("") command on custom commands as shown off in the web demos...

Any help would be appreciated !

Grid

answered on 10 Oct 2013

4 answers

106 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

230 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

161 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

256 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

93 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.2K+ 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

107 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