Questions on Kendo UI for jQuery Forum

1 answer

167 views

Hello,

We are evaluating kendo Scheduler to display custom events for configurable days (1-31) and number of resources in different views.
MultiDayView with horizontal grouping shows configured grouping dates side by side.
(like Telerik Kendo UI Demos and sample: http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-horizontal ).
Is it possible to show resources side by side to instead of days? So grouping events by date and then by resource? (see attachment)

Regards,

Udo

Scheduler

answered on 18 Nov 2015

1 answer

68 views

What component is used in the Kendo UI Demo screen?

Hi,

On the UI demo page, there's a nice panel navigator used to list all the different components, allowing you to navigate all the demos etc. (see attachment)

Is this available as a component in Kendo UI itself?

Jamie

General Discussions

answered on 18 Nov 2015

16 answers

1.4K+ views

[Solved] k-ng-model is not updated on first data load

Hi,
I really appreciate your efforts to integrate event better AngularJS and I love flexibility about binding included in last kendoui release... I was waiting for it.

With settings below SelectedProductId contains the value of ProductID property of selected data item.
With k-value-primitive="true" and k-ng-model=".." I also have in SelectedProductId the same data type of ProductID property (number, string, object, etc.) and this is important for me.

<select kendo-drop-down-list="remote"

k-data-text-field="'ProductName'"

k-data-value-field="'ProductID'"

k-data-source="productsDataSource"

k-ng-model="SelectedProductId" k-value-primitive="true"

style="width: 200px"></select>

The issue happen on first load, because after dropdownlist loaded data the variable SelectedProductId is not set to the right value.
Only selecting a new value from list, SelectedProductId is set to the right value.

I attached a simple test to reproduce issue.

Thanks

DropDownList

answered on 18 Nov 2015

2 answers

153 views

AngularJS {{message}} not shown inside tabestrip

Inside ContentURL of the tab i.e. "occupancy.html", it did not show {{message}} of controller.

{{message}} <== show in here, but not inside occupancy.html (i.e. inside tab)
        <ul>
   <li class="k-state-active">Occupancy</li> <== click & travel to occupany.html but not show {{message}}
    <li>Revenue</li>
</ul>
</div>

$(document).ready(function () {
var ts = $("#fundingTab").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
contentUrls: [
'clientApp/views/funding/occupancy.html',
'clientApp/views/funding/revenue.html'
]
}).data('kendoTabStrip');
ts.tabGroup.on('click', 'li', function (e) {
ts.reload($(this));
});
});

TabStrip

answered on 18 Nov 2015

1 answer

613 views

reusable template

I have a one confirmation template and one information template that i want to use across my application in many files. Right now I am using the template in all the places and calling it in all pages. But I want to do something like this, where I can have these templates common and javascript method that takes message and returns true if clicked yes and returns false if clicked no. My application is asp.net mvc application.

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

<p class="delete-message">#= data #</p>

<button class="delete-confirm k-button">Yes</button>

<button class="delete-cancel k-button">No</button>

</script>

<script id="template-information" type="text/x-kendo-template" style="align-content:center">

<p class="delete-message" style="text-align:center">#= data #</p>

<p style="text-align:center">

<button class="delete-confirm k-button">OK</button>

</p>

</script>

function dialogConfirm() {

var kendoWindow = $("<div />").kendoWindow({

title: "Confirm",

resizable: false,

modal: true,

height: "100px",

width: "300px"

});

kendoWindow.data("kendoWindow")

.content($("#"+templatename+"").html())

.center().open();

kendoWindow

.find(".delete-confirm,.delete-cancel")

.click(function () {

if ($(this).hasClass("delete-confirm")) {

kendoWindow.data("kendoWindow").close();

return true;// if it is returned true I want to perform something

}

else if ($(this).hasClass("delete-cancel"))

kendoWindow.data("kendoWindow").close();

return false;// if it is returned false I want to perform something else

})

.end()

}

Thanks,

Veena

Templates

answered on 18 Nov 2015

2 answers

587 views

TreeList - need to expand only one level deep on each image click

Hello,
I have a TreeList that has 64 rows, with 24 being expandable rows.
6 rows are the parent rows that populate on loading of the TreeList.
the remaining rows are child rows that can be one row below a parent row, or they can be multiple child rows deep.

I have an image that I click to expand my rows. The first time I click it, i only want the 1st level of child rows to expand just one level.
The second time I click it, I want the child rows of this now expanded 1st level of child rows to expand only one level.
Each time I click the image, I want only one level of expansion to happen for rows that are expandable from the last level of rows that was just expanded.
I want to do the reverse for collapsing as well.

I have the following code that gets all the rows that can be toggled. However when I loop through it expanding these rows, I obviously end up expanding every row.
var rowsThatCanToggle = treelist.content.find("tr.k-treelist-group", treelist.tbody);
for (var i = 0; i < rowsThatCanToggle.length; i++) {
treelist.expand(rowsThatCanToggle[i]);
}

I have looked through documentation that shows how to expand a specific row using "tr:eq(<some index number>)" but my problem is identifying the last set
of expanded rows. Do you have any documentation or actual examples that specifically shows how to get the most recent set of expanded rows only, and how to expand their child rows?
Thank you...

TreeList

answered on 17 Nov 2015

1 answer

343 views

How to hide FakePath part of filename...

When I use the upload control, the users see "C:\fakepath\filename.jpg"...I read that this is part of the HTML 5 spec to hide such info. When I looked at your demo: http://demos.telerik.com/kendo-ui/upload/index

I noticed that just the filename is showing. Is there a property I can set for that? Did you use some type of custom JQuery to remove the C:\fakepath?

Thanks

Upload

answered on 17 Nov 2015

5 answers

634 views

Easy grid auto-complete filter with local data?

Hi,

until now I used the grid with odata-v4 data-sources. Auto-complete source configuration was easy: either omit the source and the Kendo grid fetches the data automatically or provide an odata data-source to be used for auto-complete values.

Today I have a scenario where I have local data and would like to filter the columns with auto-complete filters (row-filters).

From what I've read one has to set up the filter UI widget explicitly for each column. E.g.:

filterable: {

ui: function (element) {

element.kendoAutoComplete({

dataSource: someDataSource,

dataTextField: "Name"

})

}

This seems tedious because: 1) the data-source is the same as for the grid, 2) the field Name is the same as for the grid's column, 3) one has to have a reference to the data-source.

Is there a built-in mechanism to easily configure the filter to use auto-complete with the grid's own data-source and the grid column's field? After all, in the local data scenario, we would like to filter the stuff, that's in the grid already. So I wonder if we can avoid the ceremony.

Does an option like "filterable.autocomplete: true" maybe exist that I just overlooked?

Regards,
Kasimier Buchcik

Grid

answered on 17 Nov 2015

1 answer

148 views

[Solved] Inline Editor with AngualrJS

Is there an example of how to accomplish inline editing (such as you have in this demo: http://demos.telerik.com/kendo-ui/editor/inline-editing) in AngularJS?

Many thanks,

Jayme

Editor