Questions on Kendo UI for jQuery Forum

6 answers

516 views

Hi,
I have a grid and when grouped I can expand/collapse a group clicking on a small arrow on the left of the group header. I would like to expand/collapse the group clicking on any point of the groupHeader not only on the small arrow.
There's some settings that i can use in order ti obtain that effect? or some workaround?

thanks

Fabio

Grid

answered on 13 Feb 2018

5 answers

1.1K+ views

Kendo Grid: Virtual Scrolling and Grouping

Stackoverflow: https://stackoverflow.com/questions/45439666/kendo-grid-virtual-scrolling-and-grouping

General Discussions

answered on 13 Feb 2018

1 answer

2.2K+ views

Choosing by value on dropdown list, populate other fields on the page

Hello

I have a dropdown list that, on change, populates a few other fields on a page. This functionality works provided that it's taking place as a result of a user interaction.

I am trying to make the form data persistent between page refreshes. I have captured the value of the selection in local storage, and populate it on page load using the methods described https://www.telerik.com/forums/how-do-you-set-the-value-of-a-dropdownlist-after-reading-external-data and in this JSFiddle.

However, on page load, the dropdown list has the correct selection, the change() event triggers, but fails to populate data. The dataItem variable is null (I think) and I'm not clear why.

Any help is appreciated. Relevant code below...

DropDownList widget

<div class="requisitionForm-content">

@(Html.Kendo().DropDownListFor(m => m.RequisitionModel.FormDto.VendorIdentifier)

.Events(e => e.Change("onVendorChange"))

.OptionLabel("Select a vendor...")

.DataValueField("Identifier")

.DataTextField("Name")

.Filter(FilterType.Contains)

.DataSource(s => s.Read(r => r.Action("GetVendors", "RequisitionForm", new { formVendor = Model.RequisitionModel.FormDto.VendorIdentifier }).Type(HttpVerbs.Post).Data("getVendorExtraData")))

.HtmlAttributes(new { style = "width:360px" }))

</div>

onVendorChange function:

function onVendorChange(e) {

var phone = "";

var address = "";

var fax = "";

var email = "";

var vendorDropList = $('#RequisitionModel_FormDto_VendorIdentifier').data("kendoDropDownList");

var dataItem = vendorDropList.dataItem();

if (dataItem) {

phone = dataItem.Phone ? dataItem.Phone : "";

address = dataItem.Address ? dataItem.Address : "";

fax = dataItem.Fax ? dataItem.Fax : "";

email = dataItem.Email ? dataItem.Email : "";

var requisitionList = $('#RequisitionModel_FormDto_RequisitionType').data("kendoDropDownList");

var reqType = requisitionList.dataItem();

if (dataItem.BlanketOrderPo &&

reqType &&

reqType.Identifier == "@RequisitionType.BlanketOrder.Identifier.ToString()") {

$('#RequisitionModel_FormDto_PoNumber').val(dataItem.BlanketOrderPo);

}

$('#RequisitionModel_FormDto_VendorContactPhone').val(phone);

$('#RequisitionModel_FormDto_VendorAddress').val(address);

$('#RequisitionModel_FormDto_VendorFax').val(fax);

$('#RequisitionModel_FormDto_VendorEmail').val(email);

}

Page document.ready() to get data from local storage

var WipRequisition = localStorage.getItem(employeeGuid);

if (WipRequisition !== null) {

var formObject = JSON.parse(WipRequisition);

stringToForm(formObject, $("#requisitionFormForm"));

// Now deal with the dropdown list elements.

var kendoDropDownElements = [

"RequisitionModel_FormDto_VendorIdentifier",

"RequisitionModel_FormDto_RequisitionType",

"RequisitionModel_FormDto_DeliveryLocationIdentifier",

"RequisitionModel_JobIdentifier",

"RequisitionModel_FormDto_CostCodeIdentifier",

"RequisitionModel_FormDto_CurrencyIdentifier",

"RequisitionModel_Officer1Identifier",

"RequisitionModel_Officer2Identifier"

];

for (var element in kendoDropDownElements) {

$("#" + kendoDropDownElements[element]).data('kendoDropDownList').value(formObject[kendoDropDownElements[element]]);

$("#" + kendoDropDownElements[element]).data('kendoDropDownList').trigger("change");

}

Thanks in advance.

DropDownList

answered on 12 Feb 2018

3 answers

4.8K+ views

[Solved] How to change a button's text

I'm simply too stupid for that. Why does the following not work?
Debugging the lines there the function is called without any error.

<button class="k-button" id="myTextButton" type="button">Enable</button>

....

$(document).ready(function () {

    $("#myTextButton").click(function () {
                    ("#myTextButton").enable(true);
                    ("#myTextButton").value = "value text";
                    ("#myTextButton").text = "text text";
                    ("#myTextButton").html = "html text";
                    ("#myTextButton").innerHTML = "innerHTML text";
                });

</script>

Button

answered on 12 Feb 2018

2 answers

207 views

Kendo MVVM Menu: openOnClick doesnt work

Hello,
I have created for my problem I want to It is not running as expected

Menu

answered on 12 Feb 2018

2 answers

3.9K+ views

Horizontal grid lines

How to display horizontal grid lines in Kendo UI grid?

The following works...any elegant way to do it?

var kendoGrid = $(grid).data("kendoGrid");
var dataSource = kendoGrid.dataSource.data();

$(grid).find('table[role="grid"]').each(function() {
$(this).css("border-collapse", "collapse");
});

$.each(dataSource, function(i, row) {
$('tr[data-uid="' + row.uid + '"]').css("border-bottom", "1pt solid black");
});

Thanks, Alon

Grid

answered on 09 Feb 2018

1 answer

466 views

ScrollView on web multiple pages showing

Hello,

I'm using a kendo scrollview for a web application with a local datasource populated by a call to a controller. The data retrieval and feeding seems to be working properly and there is no issue there.

The issue I am having is making the scroll view look good. It seems that when the scroll view renders that it renders all the pages and the width of my page becomes elongated. If you scroll you see the other pages and their items.

We are trying to show users the latest creative they are able to order. It will usually consist of at least 2 pages.

I tried to follow the demo as best as I could but I think the scrollview behaves different with a local datasource. My markup is below as well as with the template.

$("#scrollview").kendoMobileScrollView({
dataSource: creatives,
itemsPerPage:4,
contentHeight: "150px",
//contentWidth: "400px",
enablePager: false,
template: kendo.template($("#template").html())
});

$("#prev-img").click(function (e) {
var scrollView = $("#scrollview").data("kendoMobileScrollView");
scrollView.prev();
});

$("#next-img").click(function (e) {
var scrollView = $("#scrollview").data("kendoMobileScrollView");
scrollView.next();
});

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

@*<div data-role="page">*@
#for (var i = 0; i < data.length; i++) { #
<div style="float: left; display: table; border: solid; border-width: 1px; border-color: gray; margin: 2px; text-transform: uppercase;">
<div style="padding:2px">
<a class="thumb thumbshow">
<img src="#= data[i].ImagePath #" style="width:150px;height:194px" alt="" onerror="this.src='@Url.Content("~/Content/images/No_Image_Available.png")'">

</a>
</div>
<div style="display:table-cell;vertical-align:top;padding-left:5px;height:215px; width:110px;padding-right:5px;position:relative">
<div style="font-weight:bold; margin-bottom:10px;margin-top:5px;">
#= data[i].Description#
</div>
<div style=" display: inline-block; overflow-y: hidden; width:110px">
<div style=" display: inline-block; height: 215px; width:139px">
<div class="CreativeInventory" style="display: inline-block; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; padding-right: 7px; margin-bottom: 4px; text-transform: none; ">
# for(var j=0; j < data[i].CreativeList.length; j++){ #
<p>• #= data[i].CreativeList[j].Media #</p>
# } #

@*#= data[i].CreativeList[0].LongDescription #*@
</div>
</div>
</div>
</div>
</div>
#}#
@*</div>*@
</script>

I will also attach 2 images showing how the scrollview renders - mainview shows the first page of the scroll view and notice the window scroll bar at the bottom. scrolledview shows the other pages which seem to be rendered far right of what should be the main viewing area. The positioning of each of the items is weird too not sure if that is because of our styling or if it is related to my scrollview issues.

We ideally want to show 4 to 5 items per page next to each other and same sized boxes.

Thanks for your help.

ScrollView (Mobile)

answered on 09 Feb 2018

6 answers

617 views

'undefined' after add node

Hi, I'm try to insert node in treeview like demo

this is my code

var treeviewData = $("#treeview").data("kendoTreeView");
var selectedNode = treeviewData.select();
treeviewData.append({text: Name}, selectedNode);

,but after insert at child node is undefined data

can I fix this problem

TreeView

answered on 09 Feb 2018

3 answers

228 views

Custom filters enhancements

In Kendo UI for Angular 2 we have a custom filter (very similar to your provided example http://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-reusable-custom-filter-components), it works nicely, but we get a compilation warning:

export 'CompositeFilterDescriptor' was not found in '@progress/kendo-data-query'

Additionally would it not make sense to extend the base class BaseFilterCellComponent with properties

@Input() public column: ColumnComponent;
@Input() public filter: CompositeFilterDescriptor;

as they are needed by all filters (also seen in your example in dropdownlist-filter.component.ts). so custom filter implementors dont need to add them. Decorators on properties are inherited now in Angular/typescript

Grid

answered on 09 Feb 2018

3 answers

856 views

Setting row count after set up

I am trying to set the max row count after I retrieved the data from AJAX call. The default option for the number of rows is 200. I am needing to be able to change this number based on the number of rows returned from AJAX call. I want the page to have to have the default of 200 when the page loads.

The user then chooses from a dropdown on the page to query the backend for data which will have a different number of rows each time. I was hoping to be able to just set the rows property on the sheet.options object, but it does not look like these values are re-read after initialization.

How should I do this? Especially if I am going to have multiple tabs of data with different number of rows.

Thanks.

Spreadsheet

answered on 08 Feb 2018