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

Without getting into why - I am setting the DataSource.Read.Data function in javascript after the grid is initialized.  (using .AutoBind(false) so it doesn't load until after I set the Data function)

This works fine when loading the grid items. However, when I do it this way, the column filters that are .Multi(true) do NOT use this function, and pass no variables to the Action method. 

How do I get the calls to load the filters to also use this function for parameters?

Thanks

In my application, I need to assign items to groups. I would like to use the ListBox widget (https://demos.telerik.com/aspnet-mvc/listbox) because I like its built-in transfer controls. This would allow me to display the unassigned items in one ListBox, the assigned items in another ListBox, and then transfer the items from Unassigned to Assigned, or vice versa.

However, I may have several thousand items in a list and I doubt it would be performant for the ListBox to show all of these at once. Is there a way to add paging to the ListBox? If not, is there a different widget you would suggest? I did see a StackOverflow article where someone used two Kendo grids for this purpose. If that is the best option, do you have a complete example?