Questions on Kendo UI for jQuery Forum

1 answer

2.3K+ views

selected value with Kendo UI DropDownList and angularJS

Hi,

When using kendo-drop-down-list with AngularJs the DropDownList does not take the value of ng-model associated. In addition, the ng-model is modified by the dropdownlist value and takes as the first entry in the list:

<select id ='ddl_general_qualite' kendo-drop-down-list k-ng-model = "mvEdit.CodeQualite" k-data-source = "Qualite" k-data-value-field = "' Code '" k-data-text-field = "'Libelle'"> </ select>

Do you have a solution for the drop down list as well take the value of the selected value ng-model?

thanks.

DropDownList

answered on 30 Jul 2015

15 answers

243 views

Expand columns error - Bug

Hello,

I have the problem with Pivot Grid with multiples Fields in columns and rows when expand the column, because when expand the columns after the rows, the pivot grid do a javascript exception and don't working more.

I attached files with scenarios that html file and Json Data, and please you look the video with steps of the error: http://screencast.com/t/QMNo5zuVkg

thanks

PivotGrid

answered on 30 Jul 2015

1 answer

123 views

Issue in Chrome: Window sizing and manipulation issue in Employee Selection

This is the bug: http://screencast.com/t/djgiG4OBa

Kendo.all.js focusTable function is the beginning of the problem. We worked through
from there to identify where the problem is Lines :62024-62026

We commented these lines out and then the bug been fixed.
//else {
// table[0].focus(); //because preventDefault bellow, IE cannot focus the table alternative is unselectable=on
//}

Hope this feedback can make your product better.

Window

answered on 30 Jul 2015

0 answers

169 views

Toggle Kendo Splitter on button click inside iframe

my Kendo Splitter is as below.

@(Html.Kendo().Splitter()

.HtmlAttributes(new { style = "height:590px;", id = "mainSplitter" })

.Orientation(SplitterOrientation.Horizontal)

.Panes(horizontalPanes =>

{

horizontalPanes.Add()

.HtmlAttributes(new { id = "left-pane" })

.Size("246px")

.Collapsible(true)

.Content(@<text></text>);

horizontalPanes.Add()

.HtmlAttributes(new { id = "right-pane", style = "overflow:hidden;" })

.Content(@<iframe id="tabsContent_iframe" src='' data-src='' style="width:100%;height:100%;"></iframe>

);

})

)

I have a button outside the splitter used to toggle the left-pane which worked perfectly.
Now, if I used the same button inside my iframe and make the call. It doesn't work.
I tried doing it in couple of ways as below:

1)

var parentSplitterId = parent.$('#mainSplitter').data("kendoSplitter");

var parentLeftTogglePane = parent.$('#full-pane');// , window.parent.document);

parentSplitterId[parentLeftTogglePane.width() > 0 ? "collaspe" : "expand"](parentLeftTogglePane);

2)

var parentSplitterId = window.parent.document.getElementById('mainSplitter');

var parentLeftTogglePane = $('#full-pane', window.parent.document);

var splitter = $("#parentSplitterId").data("kendoSplitter");

splitter[leftTogglePane.width() > 0 ? "collaspe" : "expand"](leftTooglePane);

I am not able to understand where I am going wrong or what I'm missing. Please guide me out here.
Thanks

Splitter

asked on 30 Jul 2015

1 answer

452 views

MVVM DropDownList data-value-field is required even if data-value-primitive is set to false

I created a demo based on standard dropdown MVVM demo which shows the behavior. For some reason DropDownList doesn't set it's value binding destination in case data-value-field attribute is not present. If you uncomment my attribute

comment-data-value-field="ProductID"

example works fine.

But it took me a while to figure out what's missing there. I can't understand why I must specify data-value-field even though I set data-value-primitive="false", so data-value-field isn't used in any case. Documentation also says that dataValueField could be absent.

DropDownList

answered on 30 Jul 2015

26 answers

2.7K+ views

SkinSelector to choose Kendo CSS templates

First off I'd just like to say how wonderful KendoUI is. I got it working on my site in a matter of minutes thanks to your great docs and demos.

One thing I can't figure, and maybe I missed something obvious. I find it easy enough to set one of the inlcuded CSS styles, and I can insert the style selector drop box with <select id="skinSelector" class="skinSelector"></select>

So how do I populate it with the available styles such as you have in most of your demos?

Thanks.

Templates

answered on 29 Jul 2015

2 answers

1.7K+ views

Hiding the DatePicker TextBox

Hello,

is is possible to hide the input TextBox of the Kendo UI DatePicker to only show the button which opens the date selection?

Best regard

DatePicker

answered on 29 Jul 2015

1 answer

198 views

MVVM Kendo grid hierarchy data does not display

I have an MVVM application using Kendo Grid, and I want to display hierarchy (nested grid). I am not able to display the hierarchy data. How can I get the hierarchy records to display?

cshtml code:

<div id="custOrderGrid"

data-role="grid"

data-resizable="false"

data-navigatable="true"

data-editable="true"

data-pageable="false"

data-scrollable="true"

onscroll="true"

data-detail-template="child-template"

data-columns="[

{ 'field': 'OrderID', 'title': '<b>Order #', 'width': 65 },

{ 'field': 'LineNo', 'title': '<b>Line Number', 'width': 65 },

{ 'field': 'ItemNo', 'title': '<b>Item Number', 'width': 65 },

{ 'field': 'Desc', 'title': '<b>Description', 'width': 150 }

]"

data-bind="source: orderSearchResults"

style="height: 55%">

</div>

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

<div data-role="grid"

data-bind="source: obj2"

data-columns="[

{ field: 'name' },

{ field: 'oid' }

]"></div>

</script>

typescript code

orderSearchResults = new kendo.data.DataSource({

    schema: {

        model: {

            id: "OrderID",

            fields: {

                LineNo: { type: "string" },

                ItemNo: { type: "string" },

                Description: { type: "string" }

            }

        }

    },

            data: [

                {

                    OrderID: "L44ZX4", LineNo: "15", ItemNo: "*X1WCJH", Description: "CDF9X2XSB",

                    obj2: [{

                        name: 'a1',

                        oid: 1

                        },

                        {

                            name: 'b1',

                            oid: 2

                        },

                        {

                            name: 'c1',

                            oid: 3

                        }]

                }

            ]

        });

How can I get the hierarchy data to display?

Grid

answered on 29 Jul 2015

3 answers

1.4K+ views

Change tab title dynamicly

hi

changing the tab title dynamically does not run correctly. style is wrong...
how do i get that right?

changing the title with jquery:

$("#organizationTab").text("new tab text");

my html:
<div id="tabstrip" style="border-width:0px;">
<ul>
      <li class="k-state-active" id="organizationTab">Tab1</li>
      <li id="businessunitTab">Tab2</li>
      <li id="userTab">Tab2</li>
</ul>
<div class="tabdiv">tab1</div>
<div class="tabdiv">tab2</div>
<div class="tabdiv">tab3</div>
</div>

regards
adrian

TabStrip

answered on 29 Jul 2015

7 answers

813 views

Hierarchy grid using client row template problem

I am creating a hierarchy grid similar to the example at http://demos.kendoui.com/web/grid/hierarchy.html. This works good but I need to also to use the grid.ClientRowTemplate method to draw specific data items in the grid. When doing so the icon that expands and collapses the child grid goes missing. It looks as if the ClientRowTemplate data I am providing overwrites this. So is there a way to use the ClientRowTemplate and also use a hierarchy grid together.

An example of the ClientRowTemplate method that I am using is below.

.ClientRowTemplate("<tr>" +
                "<td><span onclick='javascript:OpenDepartmentWindow(\\#=DepartmentName\\#\\#=DepartmentId\\#);'>\\#=DepartmentName\\#</a></td>" +
                "<td>\\#=DepartmentName\\#</td>" +
                "<td>\\#=Validity\\#</td>" +
                "<td>\\#=CanAmount\\#</td>" +
                "<td>\\#=CanActual\\#</td>" +
                "<td>\\#=StaticPercentage\\#</td>" +
                "<td>\\#=YearlyAmount\\#</td>" +
                "<td>\\#=UnitOfMeasure\\#</td>" +
                "\\#=GroupButtonCellHtml\\#" +
                "</tr>")

Grid

answered on 29 Jul 2015