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

onVendorChange function:

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

Thanks in advance.

 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>

....

 <script>

  $(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>

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>&bull; #= 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.

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

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.

below is the kendo grid which is not calling the mentioned action/controller on page load hence the data to the grid is empty..

HTML Code

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<abcxksdkd.Models.DisplayUserModel>
            ()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.UserName).Filterable(false);
                columns.Bound(p => p.UserRole);
                columns.Bound(p => p.Email);
                columns.Bound(p => p.isLocked);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Admin"))
            )
                )
            </div>
        </div>
    </div>

CONTROLLER CODE

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {
            Model user = new Model();
           
            foreach (var a in DbContext.Users)
            {
                user.UserName = a.Name;
                user.UserRole = Roles.ToString();
                user.isLocked = a.Lockout;
                user.Email = a.mail;
            }
            var result = Enumerable.Range(0, 10).Select(i => new Model
            {
                UserName = user.UserName,
                Email = user.Email,
                isLocked = user.isLocked,
                UserRole = user.UserRole
            });
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }