Hello,

I will try to expain as best as I can, it's not straighforward issue.

In my project we had grids with virtual scrolling AND paging. As we know, this is not a good idea. 

In order to fix that, I removed the paging, leaving only virtual scrolling. Following the best practices I could find, the grid height and row height are fixed:

.k-virtual-scrollable-wrap td {     white-space: nowrap; }

.k-virtual-scrollable-wrap tr {     height: 40px; }

Scrolling works great but the grid always has some empty space in the bottom (grid_empty_bottom.png). After some investigation, it seems the k-grid-content element is always rezised to less height than the specified height (grid_html.png).

The only way I could find to fix it is to, on dataBound event, to change grid's css to match the k-grid-content element height:

const groupingHeaderHeight = this.widgetElement.find('.k-grouping-header').outerHeight();
const columnHeaderHeight = this.widgetElement.find('.k-grid-header').outerHeight();
this.widgetElement.find('.k-grid-content').height((this.activeGridOptions.height as number) - groupingHeaderHeight - columnHeaderHeight);

For reference, the grid work with client side data, the data is fetched from the server and the dataSource is added to grid (grid.setDataSource method) after grid instantiation.

The grid is also filterable, sortable, groupable and reorderable.

I am using following code alongside multiple other inputs:

     @(Html.Kendo().DropDownListFor(m => m.CountryId)
                              .HtmlAttributes(new { id = "CountryId" })
                              .OptionLabel("Select country")
                              .DataTextField("CountryName")
                              .DataValueField("CountryId")
                              .BindTo(UnityConfig.GetConfiguredContainer().Resolve<ISlViewModelBaseData>().GetCountries(SlLanguage.DefaultLanguageId))
                              .Enable(true)
                            )

    @Html.ValidationMessageFor(m => m.CountryId)

Problem:

After sending the form without selecting any value from the list the dropdown box is bound, the form validation prevents from further action indicating an input error. That's fine.

But after selecting a value and resending the form, the dropdown value is set back to OptionLabel "Select country".

Inspecting with Fiddler reveals that the submitted form did not contain the field CountryId anymore.

Sending the form directly with a selected value works fine, thogh.

I assumed, that something on the post back after the sent invalid form went wrong but the response seems to be just fine.

Could this be a bug?

kind regards

Kay

Hi,

I am using Kendo Grid for the first time. The existing page already has the kendo UI grid, I am trying to add a filter dropdown to one of the existing columns. I want the dropdown to show the unique list of values from the grid itself. 

<asp:Content ID="Content1" ContentPlaceHolderID="MyPage" runat="server">
    <script>


        function RefreshTables() {

            var viewType = document.getElementById('<%=hfEmployeeTypeId.ClientID%>').value
            var myChartModel = kendo.data.Model.define({
                id: "myChartId",
                fields: {
                    PatientId: {
                        type: "number"
                    },
                    PatientName: {
                        type: "string"
                    },                    
                    DoctorFullName: {
                        type: "string"
                    },
                    Impression: {
                        type: "string"
                    }
                }
            });

            $("#gvMyChart").kendoGrid({
                sortable: true,
                dataSource: {
                    schema: {
                        model: myChartModel
                    }
                },
                pageable: {
                    pageSize: 20,
                    pageSizes: true
                },
                filterable: {
                    extra: false
                },
                columns: getColumns(viewType),
                resizable: true
            });


            if ($("#gvMyChart").data("kendoGrid")) {
                $("#gvMyChart").data("kendoGrid").hideColumn("PatientId");
            }
        }
        function getColumns(viewType) {
            var Columns = [{
                width: 1,
                field: "PatientId"
            }, {
                width: 180,
                field: "PatientName",
                title: "Patient Name",
                attributes: { style: "text-decoration: none;color: White;white-space: nowrap;" },
                template: "<a href='javascript:openPatientSummaryWindow(#=PatientId#)'>#=PatientName#</a>",
                filterable: false
            }, {
                width: 180,
                field: "ReferringDoctorDescription",
                title: "Referring Doctor",
                filterable: true
            }, {
                field: "Impression",
                title: "Impression",
                filterable: false
            }];

return Columns;
            
        }

    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MyTableContent" runat="server">
    <asp:GridView ID="gvMyChart" runat="server" DataSourceID="dsMyCharts"
        GridLines="None" Enabled="True" Visible="True" AutoGenerateColumns="False"
        Width="100%" OnDataBound="gvMyChart_DataBound" CssClass="GridViewStyle" ClientIDMode="Static">
        <Columns>
            <asp:BoundField HeaderText="PatientId" DataField="PatientId" />
            <asp:BoundField HeaderText="Patient Name" DataField="PatientName" />            
            <asp:BoundField HeaderText="Referring Doctor" DataField="ReferringDoctorDescription" SortExpression="ReferringDoctorDescription" />
            <asp:BoundField HeaderText="Impression" DataField="Impression" SortExpression="Impression" />

        </Columns>
        <FooterStyle CssClass="GridViewFooterStyle" />
        <RowStyle CssClass="GridViewRowStyle" />
        <PagerStyle CssClass="GridViewPagerStyle" />
        <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
        <HeaderStyle CssClass="GridViewHeaderStyle" />
    </asp:GridView>
    <asp:ObjectDataSource ID="dsMyCharts" runat="server" TypeName="MyLibrary.MyPage"
        OldValuesParameterFormatString="original_{0}" SelectMethod="GetMyCharts">
        <SelectParameters>
            <asp:ControlParameter ControlID="ddlPractices" Name="LocationIds" PropertyName="SelectedValue" />
            <asp:Parameter Name="user" Type="Object" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <asp:HiddenField ID="hfEmployeeTypeId" runat="server" Value=""></asp:HiddenField>

</asp:Content>

So, how to create a dropdown filter for ReferringDoctorDescription field and have the dropdown show the values from the result of the column?

we have just upgraded to Kendo UI Web v2012.1.503.

I currently have 2 columns in my grid (col1 and col2)... after clicking add new record and populating
col1 with text the save event is fired... e.model.Col1 is empty although their is text in the control.
I then proceed in populating col2 with text inspecting the event arguments now shows 
e.model.Col1 with the correct text but e.model.Col2 is empty. Only when I proceed and edit one of fields 
for the third time are both event arguments populated but the actual argument value is not in sync
with the actual value in the grid column.Is this a known issue as I want to make a call to the server
only when both argument fields are populated and reflect the actual values in the grid.


Many thanks in advance.

Is there a way to get the image name and image extension from the KendoUI Image Editor in imageRendered event?

I have tried to find the image name and the image extension from the event data (image instance). But could not find a property which has that.

E.g. I expected it to have something like e.image.extension and e.image.type etc.

1. Uncaught TypeError: Cannot read property 'nextView' of undefined kendo.mobile.min.js:8
   1. h.extend.replacekendo.mobile.min.js:8
   2. c.Observable.extend.navigatekendo.mobile.min.js:8
   3. c.Observable.extend._findViewkendo.mobile.min.js:8
   4. c.Observable.extend.navigatekendo.mobile.min.js:8
   5. c.Observable.extend._startHistory.e.changekendo.mobile.min.js:8
   6. A.extend.triggerkendo.mobile.min.js:8
   7. c.Observable.extend.navigatekendo.mobile.min.js:8
   8. Jkendo.mobile.min.js:8
   9. f.event.dispatchjquery.min.js:3
   10. f.event.add.h.handle.ijquery.min.js:3

I have a Grid that has two Date field columns. I've implemented filters for both columns as shown below.  I'd like to assign an ID to the 4 datepickers that are created to be able to reference them later.