Hi,

I'm using row filters in Kendo-grids with "odata-v4" specified on the data-sources. I'm writing here, because I'm not sure if this is a data-source issue or a grid issue. There are two filter scenarios where errors occur on the server side (ASP.NET MVC):

1) Kendo's current implementation still uses the old "substring" instead of the OData v4 "contains" expression. The server barks.

2) Since GUIDs are handled as strings, they are wrapped in single quotation marks. The server barks.

I'm using Kendo UI version 2015.2.624.

The following hack works around those issues. It would be great if those two scenarios could be fixed in the library.

Regards,

Kasimier Buchcik

I have Kendo UI Professional and I am trying to create a KendoGrid using data from the ViewData.Model
My script looks like this:

@model IEnumerable<WebApplication5.Models.Presentation>
..
<script>

 $(document).ready(function () {

            var dataSource = new kendo.data.DataSource({
                pageSize: 21,
                data: @Model,
                dataType: JSON,
                schema: {
                    model: {
                         fields: {
                                    Name: {},
                                    PresentationFamilyId: {},
                                    SourcePresentationId: {}
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field:"Name",
                    title:"Name"
                }, {
                    field:"PresentationFamilyID",
                    title:"Family"
                }, {

                    field:"SourcePresentationID",
                    title:"Source"
                }]
             });
        });

</script>

 My
controller looks like this:

    public ActionResult Index()
    {
         return View(db.Presentations);
    }

I cannot get it to work. I have tried every permutation for DataSource.data that I can think of
but they all generate errors. For instance, the above code complains about “Unexpected token ]”

Tried in controller:            return View(db.Presentations.ToArray()); -- Unexpected Token ]
Changed javascript:

                                        data: @Model.ToArray()     -- Unexpected Token ]

                                        data:  @Model.ToList()

                                                   – The browser shows: data: System.Collections.Generic.List`1[WebApplication5.Models.Presentation],
                                                      with error:
                                                               Unterminated template literal 

                                                      (this is because of the unmatched quote mark)
How do I
specify @Model as my datasource?

Hi,

 I have created an AngularJS project containing an image gallery. Now I would like to display a Telerik Kendo UI Window widget containing a scrollview in order to create a lightbox-effect. Most of it works fine, but I need to be able to dynamically set the initial page. I know that I can set the k-page option, but I'm not sure how to set this value when the user clicks an image. Please observe the following HTML:

<div class="gallery-content">
    <div class="container">
        <div class="gallery-grid" data-ng-show="item.Files.length">
            <div class="picture" data-ng-repeat="File in item.Files"><a ng-href="#" ng-click="openImageLayer($event, File, $index)"><img data-ng-src="/Admin/Public/GetImage.aspx?Image=/Files/Files/Intranet/{{File.FileName}}&amp;Width=200" /></a></div>
            <a href="#" class="btn-add-new hidein-mobile"><span class="icon icon-add-new"></span></a>
        </div>
    </div>
</div>

<div class="popup-holder" kendo-window="imageLayer" k-title="'Billede'" k-on-open="win1visible = true" k-on-close="win1visible = false" k-visible="false" k-modal="true" k-options="kendoWindowOptions">
    <div kendo-mobile-view="view" k-stretch="true" id="scrollview-home">
        <div kendo-mobile-scroll-view="scrollview"
             k-data-source="photos"
             k-content-height="'100%'"
             k-enable-pager="true"
             k-pager-overlay="true"
             k-options="galleryOptions" k-page="{{page}}">
        </div>
    </div>
</div>

When the user clicks an image, the following function is called:

        $scope.openImageLayer = function ($event, file, index) {
            $event.preventDefault();
            $scope.activeFile = file;
            $scope.page = index;
            console.log($scope.page);
            $scope.imageLayer.open().center();
        }

However, the Scrollview does not observe the $scope.page value. I suspect this is due to the fact that the Scrollview has already been initialized.

Regards,

Peter

I have used KendoUI grid in my web application. It runs at batch editing mode, and a date column is in the grid.
For some reasons, I can't using KendoUI datepicker to show the date when a cell in the column clicked. Instead,I must use the jQueryUI datepicker in edting mode.
But when I was showing the jquery date picker, the date can not be displayed with the format which I have set.
Following is my configuration.

Seen on the stock demo of custom editor, if you click to activate the dropdown editor cell, then use the down arrow, it immediately saves the grid row with the next item in the DDL selected. I've tried every event hook possible to prevent this behavior but haven't had success. We still don't have the ability to enable/disable keyboard controls for elements so aside from modifying the source I am kind of stuck here.

Any suggestions? Can we change this behavior in the future?

Hi, I'm trying to open a context menu on TreeView drop event, but the code below is not working.

HTML:

TypeScript File:


Thanks!

 Original question here: http://stackoverflow.com/questions/31138694/kendo-ui-bug-kendo-grid-pager-not-aligned-with-bottom-of-grid

  Recently, I have been using Kendo UI and I have run into the following problem: The pager for my Kendo grid is not flush with the bottom of my grid. I've tried editing the CSS styling of `k-grid-pager` but it does not solve the problem. For added clarification, the pager used to be in the upper left corner BEFORE I made the top margin of the pager 450px (to simply shift it down). However, I would like a fix that is dynamic in the sense that it can adapt to the overall height of the grid. Also note the black border floating off to the side-that is part of the pager, how? They must be hiding a class from me... Or I just don't know it. Anyhow, here is an image of what my messed up grid looks like: ![KendoPls][1]

The CSS code I used to modify the grid and its styling:

#konTable2 {
position:absolute;
left: 150px;
margin-right: -50%;
background-color: rgba(0,0,0,0);
border:0px solid rbga(0,0,0,0);
}
.k-grid tr th {
   border-bottom: 1px solid black;
   text-align: center;
   height:25px;
}
.k-grid tr td{
background-color: #494949;
border-bottom: 1px solid black;
text-align: left;
mix-blend-mode:hard-light;
}
.k-grid-pager {
position: relative !important;
float: left !important;
background-color: lime;
width:900px;
left:50%;
margin-right: -450px;
margin-top:450px;
}

And finally the html/js used to layout the grid: 

    <div id="konTable2"></div>
    <script src="../json/Koncerts.jsonp"></script>
    <script type="text/javascript">
    var myConcerts = concerts;
    $(function() {

    var dataSource = new kendo.data.DataSource({
    data: myConcerts
    });

     $('#konTable2').kendoGrid({
    columns: [{ title: "Artist", field: "artist", template: "<div class='name' style='width:200px'>#= artist #</div>"},
    {title: "Concert", field: "concert", template: "<div class='name' style='width:250px'>#= concert #</div>"},
    {title: "Date", field: "date", template: "<div class='date' style='width:150px'>#= date #</div>"},
    {title: "City", field: "location.city", template: "<div class='name' style='width:150px'>#= location.city #</div>"},
    {title: "State", field: "location.state",template: "<div class='name' style='width:150px'>#= location.state #</div>"}
    ],
    dataSource: {
    data: myConcerts,
    pageSize: 5
    },
    selectable: true,
    sortable: true,
    scrollable: false,
    pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
    });
    });
    </script>
**<h1>UPDATE</h1>**
I have modified the CSS. I am now mainly modifying `k-pager-wrap` to change the positioning of my pager, and it looks a little better, and more like this:
![KendoGRid Update][2]
*Notice:* I did not include the vertical translation as in the previous example. Now you can see how the pager just wants to chill at the upper left corner of the grid... Also, here is the new relevant CSS:

.k-pager-wrap {
width:900px;
position: relative;
float:right;
left:50%;
margin-right: -450px;
mix-blend-mode: normal !important;
}
.k-grid-pager {
width:900px;
}


  [1]: http://i.stack.imgur.com/fKn7F.png
  [2]: http://i.stack.imgur.com/957GI.png

Hi!

So I know I can do this for inline editing, a cell at a time, for example:

Is there a 'closeRow()' equivalent or anything like that?

Thank you!

Hello!

When using the grid in a kendo-window the databound event is not triggered. When using the same grid outside of the kendo window the event is triggered like expected.

Has anyone else experienced issues like this? Any solutions for this problem?

I'm trying to set the location of the cursor to the end of the text in my editor.

 Please let me know how I can achieve this goal.

Dennis