Hello.

I'm having a problem implementing the following scenario:

After the grid is loaded (binding to local data), in some cases, I need to apply the filters, paging, and selection from a previous state of the grid. If I do this inside the databound event, this will cause an infinte loop (as I've read and experience first-hand). How / where can I add the code from ApplyPreviousSettings (see below js code) so that it can work automatically?

E.g. of scenario in cause.

When on page "Users\Index" filter the grid (filterMode = row), change page (if necessary), and select an item.

Click on Edit (which redirects the edit page for the selected user) - at the point of leaving the "Users\Index" , I save in localstorage the grid's state (not all of it - only filter, paging and selection)

When clicking on Save or Cancel, the Index page (with the grid) will be displayed AND it is at this time that I want to "restore" the grid according to the data in the localstorage.

I've attached screenshots for the above scenario and a video.

The grid looks like this:

@(Html.Kendo().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
          {
              columns.Bound(p => p.Id).Title("#= Id #").Hidden(true).HtmlAttributes(new { id = "#= Id #" });
              columns.Bound(p => p.FirstName).Title(Resource.Firstname).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.Name).Title(Resource.Lastname).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.EmailAddress).Title(Resource.Email).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Bound(p => p.CompletelyEquiped).Title(Resource.CompletelyEquipped)
                  .ClientTemplate("<div style='text-align: center;'><input type='checkbox' value='#= CompletelyEquiped #' disabled='disabled' " +
                                  "# if (CompletelyEquiped) { #" +
                                  "checked='checked'" +
                                  "# } #" +
                                  "/> </div>").Filterable(filterable =>
                                      filterable.Messages(m => m.IsFalse(Resource.No_UserIndex))
                                          .Messages(m => m.IsTrue(Resource.Yes_UserIndex)));

              columns.Bound(p => p.BusinessUnit).Title(Resource.BusinessUnit_UserCreate).Filterable(f => f.Cell(c => c.Operator("Contains").ShowOperators(false).Template("EnableAutoFiltering")));
              columns.Command(c => c.Destroy());
          })
          .ToolBar(toolbar =>
          {

              toolbar.Template(@<text>
                                   <div class="toolbar">
                                       <a href="@Url.Action("Create", "User")" class="k-button k-button-icontext" id="CreateButton"><span class='k-icon k-add'></span>@Resource.Create</a>
                                       @Html.Kendo().Button().Name("EditButton").Content(Resource.Edit).Events(e => e.Click("EditClick")).SpriteCssClass("k-icon k-edit")

                                   </div>
                                </text>);
          })
          .HtmlAttributes(new {style = "width: 125%;"})
          .Pageable(pageable => pageable.Input(true).Numeric(false))
          .Sortable()
          .Events(e => e.DataBound("CustomizeFilterMenu"))
          .Selectable(s => s.Mode(GridSelectionMode.Single))
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
          .DataSource(dataSource => dataSource
               .Ajax()
              .ServerOperation(false)
              .Model(model => model.Id(p => p.Id))
              .PageSize(10)
              .Destroy("Delete", "User")

          ))

Javascript:

function EnableAutoFiltering(args) {
    args.element.css("width", "90%").addClass("k-textbox").keydown(function (e) {
        setTimeout(function () {
            $(e.target).trigger("change");
        });
    });
}

function EditClick() {
    var grid = $('#Grid').data("kendoGrid");

    var selectedItem = grid.dataItem(grid.select());

    if (selectedItem == null) {
        alert("Please select row!");
    } else {
        if (window.location.pathname.endsWith("Index")) {
            window.location = "../User/Edit/" + selectedItem["Id"];
        } else {
            window.location = "../" + window.location.pathname.split("/")[1] + "/User/Edit/" + selectedItem["Id"];
        }

    }
}

function ApplyPreviousSettings() {
        var gridOptions = localStorage["kendo-grid-options"];
        if (gridOptions === "null" || gridOptions === undefined) {

        } else {
            var grid = $("#Grid").data("kendoGrid");

            var state = JSON.parse(gridOptions);

            grid.dataSource.filter(state.filter);
            grid.pager.page(parseInt(state.page));
            var row = $("#Grid").find("tbody>tr>td[id= " + state.selectedUserId + "]").parent();
            grid.select(row);


        }
}

function CustomizeFilterMenu(args) {
    var parents = $(":radio").parent();
    if (!$(parents[0]).hasClass("RadioButtonFilterStyle")) {
        $(parents[0]).addClass("RadioButtonFilterStyle");
    }
}
window.onbeforeunload = function (e) {
    if (e.target.activeElement.id === "EditButton" || e.target.activeElement.id === "CreateButton") {
        var grid = $("#Grid").data("kendoGrid");
        var dataSource = grid.dataSource;
        var state =
            {
                page: dataSource.page(),
                filter: dataSource.filter(),
                selectedItem : grid.dataItem(grid.select()),
                selectedUserId : grid.dataItem(grid.select()).Id
            };
        localStorage["kendo-grid-options"] = kendo.stringify(state);
    } else {
        localStorage["kendo-grid-options"] = null;
    }
};

$(document).ready(function () {
    $("#KendoGrid").removeAttr("hidden");
    kendo.ui.progress($("KendoGrid"), false);
   
});

Important things to note: 

Under the grid (as seen in the screenshots) there is a button which does (if I click it manually) exactly what I need to do automatically (the button with text: "ceva") - the button calls the js method ApplyPreviousSettings. 

Also, here is a link to a video I've recorded, that I hope will clarify even further what I want to do.

https://www.dropbox.com/s/14wb1vuz76sr3st/sampleVideo2.zip?dl=0

Thank you.

Vlad

I'm having a problem getting the filters and sort information from Kendo Grid to my MVC controller. I am using a service to pass form data and DataSource data to the MVC Controller.
Here is my Kendo Grid DataSource:

dataSource: new kendo.data.DataSource({

transport: { read: function (e) { generalsearchService.submitSearch(e.data, form)

.then(function success(response) { e.success(response.data);});}},

schema: { data: "Data", total: "Total"},

pageSize: 25,

serverPaging: true,

serverFiltering: true,

serverSorting: true}),

Here is my Service code:

this.submitSearch = function (command, form) {return $http.post('/SSQV4/SSQV5/Search/SubmitCriteria', {'command': command, 'form': form});

Here is my MVC Controller Method definition:

public async Task<ActionResult> SubmitCriteria(DataSourceRequest command, ContractorSearchViewModel form)

The problem is when it hits the above method, "command" no longer contains filter and sort information.

attempting to add type: aspnetmvc-ajax throws an error in kendo.all.min.js -- Unable to get property 'slice' of undefined or null reference.

Any assistance is greatly appreciated.

Hi, 

I apologize if this is a repeated question, but does anyone know what this error means? I've searched my code-base and only found mention of 'tagName' in the jQuery and Kendo libraries ("e.target.tagName", "getElementByTagName()")

Its not causing problems, but our QC dept keep bringing it up.

Thanks in advace,
Grant

When using the Kendo Window in JQuery or MVC, you can bypass the constrained area by pinning the window and then attempting to move it. Is this expected behavior?

You can see an example by going to your online demos, pin the window, then attempt to move it.

https://demos.telerik.com/kendo-ui/window/constrain-movement

I've been trying to get this working for a few days and no solution. I have a [delete] button on each row of my grid and when I click it, it never calls the destroy method in the data source. I have the same issue when trying to create as well, Read works fine: Am I missing something, wrong format, etc.

Datasource:

and the method in the controller: the delete/destroy never calls this

Hi, 

I've recently updated my KendoUI For jQuery library to the latest version, 2020.1.114. The update has introduced a bug into my code however. In the Release History, https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2020 it lists the following statement as a bug fix for the Button widget:
"Button remains highlighted when clicking and dragging"

A particular feature in my project makes use of setting the active state of a kendo button to active to create the equivalent of a "button checkbox". Except now, once I mouse-away from the button I just made active, its active state is removed.

I've created a Dojo example https://dojo.telerik.com/AKUdABat/7. Click the primary button and note that both buttons are set as active, then mouseout. The primary button's active state is removed, and Im confident its due to the button widget fix I previously mentioned.

Please advise on how i can prevent this from happening, or another way of setting the active state of a clicked button without it being reverted.

Thanks in advance,
Grant

I have a scenario where I am using the popup editor and a custom template to edit items in the grid. The template has all of the fields that are part of the datasource that is bound to the grid as well as some additional fields that are not a part of the datasource. In order to submit the extra data, I am doing the following:

1. Setting data-skip=true attribute on the elements that are not bound to to the datasource to prevent binding. For example:

  <input type="radio"name="radio_test_a"id="radio_test1"value="1"data-skip="true"checked>Yes
  <input type="radio"name="radio_test_a"id="radio_test2"value="0"data-skip="true">No

2. In my update function I am getting the extra data and adding it to the ajax data parameter along with the model. For example:

update: function(options) {
                    var roles_obj={};
                    $('#extra_data input[type=radio]').each(function(){
                        if($(this).is(":checked")){
                            roles_obj[$(this).attr('name')]=$(this).val();
                        }
                    });
                    $.ajax({
                        url: "api/users/update",
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            id: kendo.stringify(options.data.id),
                            data: JSON.stringify({
                                model: options.data,
                                roles: roles_obj
                            })
                        },
                        success: function (result) {
                            options.success(result);
                        }
                        //remainder omitted for brevity

3. In the grid edit function, setting the model 'dirty' when the non-data bound fields are changed to ensure the update function is triggered. For example:

 $('#extra_data input[type=radio]').change(function() {
                var ds = grid.dataSource;
                var item = ds.getByUid(e.model.uid);
                item.dirty = true;
            })

My question is this: While the above works and allow me to submit the extra data that is not part of the datasource, I am asking if this solution is tenable or if there is another approach that would be recommended?

Please let me know if further information is needed if it is not clear what I am asking.

I have been using the trial version of DevComplete. I've been building a web app using Kendo UI MVC. Up until this point I haven't had any issues. However, a couple days ago I purchased DevComplete. I installed the production Kendo.MVC dll in my project. Now my app is not working. When I attempt to load any page with a Kendo UI Grid, I am getting a JavaScript error that says kendo.synchReady is not a function. 

The actual code that Kendo is generating, in part, looks like this:

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Last Name","headerAttributes":{"data-field":"LastName","data-title":"Last Name"},"width":"150px","field":"LastName","encoded":true,"editor":"...

Can someone tell me what happened? The only change I've made was to install the production Kendo.Mvc.dll in place of the trial version.