Questions on Kendo UI for jQuery Forum

3 answers

374 views

Hi,

As I could see the legends in any Kendo Chart, all the legend items are placed one by one (according to the available space and placment). Is it possible to group them in a tabular format so that we can specify the legend area to be 3 x 2 or 2 x 3, to get more professional look & feel. I have attached a sample to explain the same.

Best regards,
Suresh

Charts

answered on 21 Oct 2013

1 answer

736 views

dynamically generated anchor need to have onclick event

<!DOCTYPE html>
<html>
<head>
    <title></title>


    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>

    <script>
        var app = new kendo.mobile.Application($(document.body));    </script>
</head>
<body id="body">
    <div data-role="layout" data-id="search-layout">
    </div>
    <div id="searchView" data-role="view" data-layout="search-layout">
        <ul data-template="ul-template" data-bind="source: serviceTypeView">
        </ul>
        <script id="ul-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span><br/>
                    ID: <span data-bind="text: ProductID"></span><br/>
                    Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
            </li>
        </script>
    </div>
     <div data-role="layout" data-id="result-layout">
    </div>
    <div id="resultView" data-role="view" data-layout="result-layout">
        <ul data-template="ul-template" data-bind="source: resultTypeView">
        </ul>
        <script id="res-template" type="text/x-kendo-template">
             <li>
                    Name: <span data-bind="text:ProductName"></span>
                    ID: <span data-bind="text: ProductID"></span>
                    <a id="button1" data-click="GetDetail">#=ProductName#</a>
            </li>
        </script>
    </div>
    <script>
        var serviceTypeDataSource;
        var viewModelService;
        $(window).load(function () {
            serviceTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelService = kendo.observable({
                        serviceTypeView: [],
                        serviceTypeValue: {},
                        serviceTypeDisplayValue: function () {
                            return kendo.stringify(this.get("serviceTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelService.serviceTypeView = serviceTypeDataSource.view();

                    kendo.bind("#searchView", viewModelService);
                }
            }); //end of DataSource

            serviceTypeDataSource.read();
        });

        var resultTypeDataSource;
        var viewModelResult;

        function GetDistinct(e) {
            resultTypeDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products"
                    }
                },
                change: function () {
                    viewModelResult = kendo.observable({
                        resultTypeView: [],
                        resultTypeValue: {},
                        resultTypeDisplayValue: function () {
                            return kendo.stringify(this.get("resultTypeValue"));
                        }
                    }); //end of viewModel

                    viewModelResult.serviceTypeView = resultTypeDataSource.view();

                    kendo.bind("#resultView", viewModelResult);
                }
            }); //end of DataSource

            resultTypeDataSource.read();

        }

        function GetDetail(e) {
            alert("detail");
        }
    </script>
</body>
</html>

In my above example I am trying to achieve the following.
1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".

I have 2 problems.
1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
2)How do I show the result of GetDistinct function inside "result-layout"
I have my code in http://jsbin.com/ebuhOLU/1/edit
Please help
jsbin.com/ebuhOLU/1
Thanks
Subbu

Button (Mobile)

answered on 21 Oct 2013

2 answers

173 views

"SCRIPT16386: No such interface supported" when calling splice on array

Hi,

I have an observable object that contains an array which is binded as a source to a div:

<div data-bind="source: Fields" data-template="field-template"></div>

where field-template looks like this:

<script id="field-template" type="text/x-kendo-template">

<div>

<div data-bind="text: FieldName"></div>

<button data-bind="events: { click: removeField }">Remove</button>

</div>

</script>

When I try to remove an element from an array by calling splice, kendo.web.js breaks in IE at line 6753. Apparently I would say the problem is at the source binding because at the specified line, element.children.length is 0 but this happens only in IE. In Chrome and Firefox element.children contains template instances for each element from the array. Why Internet Explorer breaks?

The MV looks as follows:

var SectionVM = function (section) {

var self = this;

this.Fields = [];

if (section.Fields) {

var fieldIndex = 0;

$.each(section.Fields, function () {

var field = this;

var fvm = new FieldVM(field); // FieldVM is similar with this VM

self.Fields.push(fvm);

});

}

this.removeField = function

(e) {

           var FieldIndex = self.get("Fields").indexOf(e.data);

var removedItem = self.get("Fields").splice(FieldIndex, 1);

}

self = kendo.observable(this);

return self;

}

and finally the binding:

var secVM = new SectionVM(someSection); // someSection it's an object comming from the server and matches the VM structure

kendo.bind($(".section"), secVM); // .section is a div wrapping the div with the source binding

Thank you!

<script id="field-template" type="text/x-kendo-template"><br> <div><br> <div data-bind="text: FieldName"></div><br> <div><br> <button data-bind="events: { click: removeField }">Remove</button><br> </div><br> </div><br></script>

MVVM

answered on 21 Oct 2013

5 answers

96 views

edit data-views on drawer

I have a drawer with a default list of data-views. after a user signs in, I would like to add additional views to this list. how can i accomplish that?

EDIT:

a) sorry this is in the wrong forum.

b) I used data-before-show="prevent" to hide it at the onset. now, how do I get it to appear?

EDIT 2:

I would have thought: $("#left_drawer").data("kendoMobileDrawer").show(); would do the trick, but that doesn't do anything.

General Discussions

answered on 21 Oct 2013

1 answer

92 views

Bootstrap 3 + Kendo UI CSS Issue in IE 8

Good morning,

When using the attached MVC 4 project, IE 8 will shift the layout in a very visible and jarring way when loading each page in the application.

If the Kendo UI styles are commented out, then the shift no longer occurs.

What can be done to work around this to be able to use Bootstrap 3 and Kendo UI together?

Note: the nuget packages were not included in the zip to keep the file size down.

Thanks,
Calvin

General Discussions

answered on 21 Oct 2013

4 answers

620 views

Radio and data-change : event not triggered

Hi guys,

My code is live here:
http://www.semiconductorconnect.org/kendo/#categorylist

I want to use data-change along with a radio button, but the JS function is not triggered, see the abbreviated code below:

<div id="categorylist" data-role="view" data-title="Category List" data-layout="checklayout">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Category List

<ul>

<li>

<label>

<input name="categorylistradio" type="radio" value="1" data-change="categoryswitch" />

<div style=

"height: 8px; width:8px; background: #67e667; border:1px; border-style:solid; float:left; margin-right: 3px; margin-top: 7px;"

></div>Academic </label>

</li>

</ul>

</li>

</ul>

</div>

<script>

function categoryswitch(e) {

alert('test');

}

kendo.init($("#categorylist"));

</script>

Regards

Application

answered on 21 Oct 2013

3 answers

3.6K+ views

Hide/remove scrollbars

I have a pop-up window that keeps appearing with vertical and horizontal scrollbars. If I don't specify the height/width, they don't appear (but the window ends up being WAY to tall). As soon as I specify the height/width, the scrollbars appear. Is there a way to turn them off?

<div id="newBatchWindow"></div>

$("#newBatchWindow").kendoWindow({

width: "425px",

height: "375px",

title: "New Batch",

visible: false,

resizable: false,

modal: true,

content: "/Batch/Create"

});

Window

answered on 21 Oct 2013

2 answers

185 views

Kendo-UI DataSource leveraging Angular $resource

I am attempting to implement a abstraction over a RESTful back-end for my persistence layer and have ran into something I find a little confusing. I am using the angular framework and more specifically the ngResource module to get access to the $resource service. I can execute my queries and work against the back-end without issue. My problem comes when integrating back into my kendo-ui datasource, the datasource never recognizes when the query has returned. From my understanding the $resource will immediately return a empty collection (array) for possible assignment and then populate that array with the results of the query when it finishes. Kendo-ui's DataSource should watch this variable and upon update reflect this back to anyone leveraging the datasource. I have successfully implemented this using a slightly different model (passing a object literal that I update myself as required) and the DataSource has no problem recognizing the updates. Any insight would be helpful!

app.provider('remotePersistence', function () {

this.$get = function ($resource) {

var definitions = {

widgets: $resource('http://127.0.0.1:3000\:3000/widget.json',{},{

archive: { method: 'POST', params: { archive: true }},

active: { method: 'POST', params: { active: true }}

})

};

var datastore = {}

var namespaces = ['widgets'];

namespaces.forEach(function (namespace) {

datastore[namespace] = {

endpoint: definitions[namespace],

cache: definitions[namespace].query()

};

});

return datastore;

};

});

app.controller(

"WidgetsSearchController",

function ($scope, remotePersistence){

$scope.widgets = undefined;

$scope.visibleWidgets = new kendo.data.DataSource({

// data: remotePersistence.widgets.cache,

transport: {

read: function (options) {

options.success(remotePersistence.widgets.cache);

}

});

//This works but is not desirable style

//$scope.widgets = remotePersistence.widgets.query(function(){ $scope.visibleWidgets.data($scope.widgets) });

Data Source

answered on 20 Oct 2013

2 answers

131 views

Toolbar Error

Hello, In my cshtml the Toolbar is having a red underline and shows this error message:kendo.mvc.ui.fluent.gridresizingsettingsBuilder doesn not contain a defination for 'Toolbar' and not extention methiod.. What do I need to get this working ?
I am trying to implement the Grid Custom Editing from the Demo's example
this is how my gridd is defined:

@(Html.Kendo().Grid<SurveyMaintenance.Models.SurveyItem>()
.Name("idComplexGridSurveyItems")
.HtmlAttributes(new { ID = "idComplexGridSurveyItems", Class = "k-grid-header" })

.Columns(columns =>
{
columns.Bound(p => p.UPC).Width(100);
columns.Bound(p => p.Brand).Width(80);
columns.Bound(p => p.ShelfTagDesc).Width(150);
columns.Bound(p => p.CasePack).Width(60);
columns.Bound(p => p.UnitSize).Width(60);
})
.Sortable()
.Scrollable()
.Events(events => events.DataBound("SurveyItemGridDataBound"))
.Resizable(resize => resize.Columns(true)
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("grid_error_handler"))
.Read(
read => read.Action("GetSurveyItems", "Survey").Data("SurveyComplexFunctions.additionalData")

)
.Model(model =>
{
model.Id(p => p.ItemId);
model.Field(p => p.ItemId).Editable(false);
})
.Create(create => create.Action("EditingCustom_Create", "idComplexGridSurveyItems"))
.Update(update => update.Action("EditingCustom_Update", "idComplexGridSurveyItems"))
.Destroy(destroy => destroy.Action("EditingCustom_Destroy", "idComplexGridSurveyItems"))
　
)
)

I have scripts included:

<link rel="stylesheet" href="@Url.Content(baseUrl + "/CDN/Kendo_2013.2.918/Content/kendo.common.min.css")">
<link rel="stylesheet" href="@Url.Content(baseUrl + "/CDN/Kendo_2013.2.918/Content/kendo.silver.min.css")">

<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/kendo.modernizr.custom.js"></script>
<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/kendo/2013.2.918/jquery.min.js"></script>
<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/jquery-ui.min.js"></script>

<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/kendo/2013.2.918/kendo.all.min.js"></script>

<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/kendo/2013.2.918/kendo.web.min.js"></script>
<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/kendo/2013.2.918/kendo.aspnetmvc.min.js"></script>

<script type="text/javascript" src="@baseUrl/CDN/Scripts_2013.2.918/knockout-2.2.0.js"> </script>

Grid

answered on 18 Oct 2013

5 answers

490 views

Upgrading Cascading DropDown Lists Not Working

We're upgrading from Telerik MVC to Kendo, and have followed the migration instructions and looked at docs and forum posts for two cascading dropdown lists. However, the revised code is not working - the cascading controller event never fires (it's in the same controller as the view). One caveat is that the dropdowns are inside a grid detail, so the controller method had to peek into Request.Form[0] to get the argument. But, that controller method isn't even firing in the revised code. UI-wise, it looks as if the cascading code is trying to refresh the dropdown, but no data ever shows up.

Old code:
                    @(Html.Telerik().DropDownListFor(i => item.CountryCodeID)
                   .Name("addressEditCountryCodeID_" + item.ListIndex)
                   .BindTo(new SelectList(countries, "key", "value", item.CountryCodeID))
                   .CascadeTo("addressEditState_" + item.ListIndex)
                   .HtmlAttributes(new { @class = "dropDownList", style = "width: 250px; float:left; margin-right: 10px;" })
                   )
...
                @(Html.Telerik().DropDownListFor(model => item.State)
                   .Name("addressEditState_" + item.ListIndex)
                   .DataBinding(binding => binding.Ajax().Select("GetStatesByCountryCode", "Recipients"))
                    .ClientEvents(c => c.OnDataBound("getStateValue"))
                   .HtmlAttributes(new { @class = "dropDownList", style = "width: 90px; float:left; margin-right: 10px;" })
                   )

New code:
                    @(Html.Kendo().DropDownListFor(i => item.CountryCodeID)
                   .Name("addressEditCountryCodeID_" + item.ListIndex)
                   .BindTo(new SelectList(countries, "key", "value", item.CountryCodeID))
                    .DataTextField("Text")
                    .DataValueField("Value")
                   .HtmlAttributes(new { @class = "dropDownList", style = "width: 250px; float:left; margin-right: 10px;" })
                   )
...

                @(Html.Kendo().DropDownListFor(model => item.State)
                   .Name("addressEditState_" + item.ListIndex)
                    .CascadeFrom("addressEditCountryCodeID_" + item.ListIndex)
                   // .DataBinding(binding => binding.Ajax().Select("GetStatesByCountryCode", "Recipients"))
                    .DataSource(source => {
                        source.Read(read =>
                        {
                            read.Action("GetStatesByCountryCode", "Recipients");
                        })
                    .ServerFiltering(true);
                    })
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .Events(c => c.DataBound("getStateValue"))
                   .HtmlAttributes(new { @class = "dropDownList", style = "width: 90px; float:left; margin-right: 10px;" })
                   )

Controller method:
        [AcceptVerbs(HttpVerbs.Post)]
       public ActionResult GetStatesByCountryCode()
       {
           // Because we can have multiple addresses and Telerik hard-codes the control name as a parameter,
           // we're using Request.Form[0] in order to extract the value.
           List<USState> result = new List<USState>();
           int countryCodeId;
           if (int.TryParse(Request.Form[0].ToString(), out countryCodeId))
           {
               result = LookupService.GetStateListByCountryCode((int)countryCodeId).ToList();
               if (result.Count > 0)
               {
                   result.Insert(0, new USState() { Code = "", Name = "" }); // add a blank at the beginning.
               }
           }
           return new JsonResult { Data = new SelectList(result, "Code", "Code") };
       }

Ideas? (Or just another pair of eyes?)

Jim Stanley
Blackboard Connect

DropDownList

answered on 18 Oct 2013