Hi,

In my html page I use a grid with virtual scroll:

Html.Kendo().Grid<dynamic>(). ....

.DataSource(dataSource => dataSource
    .Ajax()
    .Read( read => read.Action(....))

.Scrollable(scroll =>
    {
            scroll.Height("100%");
            scroll.Virtual(true);
        }) ...

Everything works fine except for  :

- a special request (filter)

- Only on IE11 (It's OK for Chrome, FF & Edge)

In this case, my browser freezes.

I launched an analysis and it would seem that there is an javascript infinite loop (see attachment)

If I remove the virtual scroll, everything works properly

Regards

How would I execute a custom function when any date has been selected? 

I searched for examples, but couldn't find a function that takes into consideration dynamic datepicker ID/class.

Can we add a custom function here without using Events? Or if we have to use events, can we pass the datepicker id/class to the function -- if so how?

My markup:

HI

Everyone always ask how to delete the record,
But my question is : 

How to get the destroyed data items from the Grid's dataSource ?
Is there have any official/public method or property ? 

Best regards

Chris

HI

dataBound
Fired when the widget is bound to data from its data source.

But why the Destroy command trigger the dataBound event too ??? 

*XXXXX_Read method not executed while the Destroy command clicked.

-- 

Incell mode

    @(Html.Kendo().Grid<MyCompany.Entity.Models.TXXXXX>)
      .Name("XXXXXGrid")
      ...
      .Pageable(pageable => pageable.Enabled(false))
      .Columns(columns =>
      {
        ...
        columns.Command(command => command.Destroy().Text("Delete")).Width(100);
      })
      .DataSource(dataSource =>
      {
        dataSource
          .Ajax()
          .Batch(true)
          //.PageSize(GridConst.PAGE_SIZE)
          .Model(model =>
          {
            model.Id(m => m.UniqueID);
          })
          .ServerOperation(false)
          .Read(read => read.Action("XXXXX_Read", "XXX").Data("xxxxx.filterXXXXXGrid"))
          .Events(events =>
          {
            ...
          });
      })
      .Events(events =>
      {
        events.Change("xxxxx.XXXXXGrid_Change");
        events.DataBound("xxxxx.XXXXXGrid_DataBound");
        events.Edit("xxxxx.XXXXXGrid_Edit");
      })
      .HtmlAttributes(new { @style = "height: 100%; min-height: 180px" }))

*Visual Studio 2015
*Telerik DevCraft 2017.2.621.545 (UI for ASP.NET MVC).

Best regards

Chris

Hi,

I have specific requirements for keyboard navigation within a grid. I have implemented custom navigation in the grid that works very well for text box inputs.  However, it does not work well when I navigate across cells containing dropdownlists, as the arrow keys change the values in the list as the user navigates away from these cells.

I use the following function to capture keydown events within the grid:

            // Key-down event handler to provide custom navigation within the grid.
            $("#auto_gen_conn_mngr_grid table").on("keydown", "td", function (e) {
                switch (e.keyCode ? e.keyCode : e.which) {
                    case kendo.keys.UP:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateVertically(this, navDirection.UP);
                        break;
                    case kendo.keys.ENTER:
                    case kendo.keys.DOWN:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateVertically(this, navDirection.DOWN);
                        break;
                    case kendo.keys.LEFT:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateHorizontally(this, navDirection.LEFT);
                        break;
                    case kendo.keys.TAB:
                        e.preventDefault(); // Keep Tab from navigating to elements outside of the grid.
                        e.stopPropagation();
                    case kendo.keys.RIGHT:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateHorizontally(this, navDirection.RIGHT);
                        break;
                }
            });

The problem is, that before this function executes, the dropdown list has already received the 'select' event and modified it's selected item. I can add an event handler to my list's editor template, which uses preventDefault() to cancel the selection. But I can't tell how to differentiate between events that should vs. should not modify the selection.

I would like the selection to be modified only when the user uses holds the 'ctrl' key while pressing the navigational key (i.e. arrows, tab, or enter) or uses a mouse click to click the new selection.

I can do this in one of two ways, but I am stuck on both:

method 1: intercept the keydown event before it is handled at the dropdownlist.

problem 1: the event has already gone to the dropdownlist before I capture it, using the code above.

method 2: add a handler in the list's editor template for the 'select' event, then use e.preventDefault() when the user is pressing a navigational key without holding down the 'ctrl' key.

problem 2: I don't know if it is possible to get the keystroke information from the context of the list editor's onSelect handler.

And finally, if there is no way to accomplish either of the above, disabling keyboard navigation within the dropdown list would be an acceptable compromise. This is not the preferred approach, but if it is possible to configure the dropdownlist to only accept mouse clicks in order to change the selection, that would enable the users to navigate the grid with the keyboard without modifying the selections in the dropdown lists.

Thanks,

Ryan

Hi,

Is it possible to prevent certain scheduled tasks from being deleted in the user interface?

     I'm looking to show/hide the "require input" asterisk (*) once a value is not selected/selected. Is there a way to do this with MultiSelect? I see that there are onSelectAll & onDeselectAll but there's no function that handles onSelect of any value -- how would I handle this with MultiSelect?

My current markup:

Hi,

I have some issues with sass themes.

My context : Asp.Net MVC & scss files from https://github.com/telerik/kendo-theme-default

1) IE11 & grid

There are positioning problems with the filter, column and refresh icons on the grid (cf themebuilder & filter icon on header).
One of them comes from the use of nested calc for the bottom property

2) IE11 & charts

When launching the themebuilder/asp.net  on IE11, the first time the charts don't display correctly.
If we change the theme via color swatch, they are OK.

3) Tabstrip color

When you put an item (Treeview, ...) in a tab, it takes the main color ($accent) instead of the text color ($text-color).

This is due to the class '.k-tabstrip .k-item' which must be replaced by '.k-tabstrip .k-tabstrip-items .k-item'

Regards

I want the grid to be responsive just like this page (https://demos.telerik.com/aspnet-mvc/grid), but I don't see any sample code that make it works. 

Here is my code:

@{
    Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(request => request.Id).Filterable(ftb => ftb.Cell(cell => cell.Template("integerFilter").Operator("eq").ShowOperators(false)));
            columns.Bound(request => request.Requestor).Encoded(false);
            columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });;
            columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.RequestSubject).Encoded(false).HeaderHtmlAttributes(new { @class = "hidden - xs" }).HtmlAttributes(new { @class = "hidden - xs" });
            columns.Bound(request => request.CurrentStatus).Encoded(false);
            columns.Bound(request => request.CompletedFlag).Encoded(false);
        })
.Filterable(filterable => filterable
   .Extra(false)
   .Operators(operators => operators
       .ForString(str => str.Clear()
           .Contains("Contains")
           .StartsWith("Starts With "))
       .ForNumber(num => num.Clear()
       .IsEqualTo("Equal to"))
       .ForDate(d => d.Clear())
    )
   .Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
   .Refresh(true)
   .PageSizes(true)
   .ButtonCount(5))
.Resizable(resize => resize.Columns(true))
.Selectable()
.Sortable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(request => request.Id))
)
.Render();
}
<script>
    function integerFilter(e) {
        e.element.kendoNumericTextBox({
            spinners: false,
            format: "#",
            decimals: 0
        });
    };  
    $(function() {
        $("div.k-grid-content").find("col").addClass("hidden-xs");
        $("div.k-grid-header").find("col").addClass("hidden-xs");
    });
</script>

Please see attached image.  I would like to show all columns from desktop but should be able to hide some columns from smart devices.  How can I accomplish the followings? 

1) Responsive Grid

2) Freeze curtain grid columns

Thank you very much in advance!

Anieda

Hello Telerik Team,

How can I set scheduler title date range to the current week (dynamic)?  How to set the Agenda view to default view whenever the calendar load?  How to make the text with all day schedule to hyper link (however, this text is linkable in agenda view)? 

This is the code:

@(Html.Kendo().Scheduler<HomeTaskViewModel>()
                .Name("scheduler")
                .Date(new DateTime(2018, 5, 7))
                .StartTime(new DateTime(2018, 5, 7, 0, 00, 00))
                .EndTime(new DateTime(2018, 5, 7, 23, 59, 59))
                .Editable(false)
                .Height(600)
                .EventTemplate(
                    "<div class='task-template'>" +
                    //"#= kendo.toString(start, 'hh:mm') # - #= kendo.toString(end, 'hh:mm') #" +
                    //"<br />" +
                    //"<a href='#= Url #'>#= description #</a>" +
                    "<a href='" + @Url.Action("Read","Request") + "/" + "#= RequestId #'>#= description #</a>" +
                    "</div>")
                .Views(views =>
                {
                    views.DayView();
                    views.WorkWeekView(workWeekView => workWeekView.Selected(true));
                    views.WeekView();
                    views.MonthView();
                    views.AgendaView();
                    //views.TimelineView();
                })
                .Resources(resource =>
                {
                    resource.Add(m => m.GroupId)
                      .Title("Owner")
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .DataColorField("Color")
                      .BindTo(Model.Select(x => new {Text = x.GroupName, Value = x.GroupId, Color = x.Color}));
                })
                //.BindTo(Model)
                .DataSource(d => d
                           .Model(m => {
                               m.Id(f => f.RequestId);
                               m.Field(f => f.Description).DefaultValue("No title");
                               m.Field(f => f.GroupId).DefaultValue(1);
                               m.Field(f => f.Title).DefaultValue("No title");
                               m.RecurrenceId(f => f.RecurrenceID);
                           })
                           .Read("ReadRequests", "Home", "Scheduler")
                      )
                )
<script type="text/javascript">
    $(function () {
        $(".GroupNames :checkbox").change(function (e) {
            var checked = $.map($(".GroupNames :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });
            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq",
                        field: "GroupId",
                        value: value
                    };
                })
            };
            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.dataSource.filter(filter);
        });
    })
</script>

Thank you very much in advanced for your help!

Anieda