Morning,

I've been using the Kendo Grid for years and absolutely love it for what I can do with it, but every so often I get asked to stretch the functionality of what it can do,  I haven't found much documentation on this, but i'll try my best to give an example of what I've done, and to see if there is a better way of doing it..

I have a field in my Grid that is a string, with multiple "Tags" explicitly given in the dataSource in filterable.

    {
        "columnMenu": {
            "componentType": "modern"
        },
        "stickable": true,
        "field": "conditions",
        "filterable": {
            "enabled": true,
            "multi": true,
            "search": true,
            "dataSource": [
                {
                    "conditions": "TEST123"
                },
                {
                    "conditions": "TEST"
                },
                {
                    "conditions": "ABC"
                },
                {
                    "conditions": "DEF"
                }
            ]
        },
        "groupable": true,
        "aggregates": "count",
        "groupHeaderTemplate": "Conditions: #= value # (Count: #= count#)",
        "sortable": true,
        "title": "Conditions",
       

The data in the field is a string of comma separated tags, i.e.

TEST, ABC, DEF

I've updated the filter method on the Grid so that I can select multiple options in the filter menu, and it does a "contains" look up to match multiple hits.

filter: function(e){
	this.columns.forEach(function(f){
		if(e.field === f.field){
			if(f.filterable.hasOwnProperty('dataSource')){
				e.filter.filters.forEach(function(f){
					f.operator = "contains";
					e.filter.logic = "and";
				})
			}
		}
	})
},

I have two issues here.

1. I'm using contains, so if the tags are similar (TEST, TEST123), selecting TEST will show both TEST and TEST123 - which isn't ideal.

2. If I select an option from the filter menu, it doesn't remain checked if you were to go back into the filter menu again.

I've asked this question before and had some great help to get it to this point using: https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains but I'm wondering if there is a better way of achieving the functionality I'm looking for here with the grid.  I added square brackets to the tags to distinguish them ([TEST], [TEST123]) , but my users didn't like this change.

Is there a way to do this without using contains?

I'd also like to be able to see the selected option in the filter menu - I can find the checkbox through jQuery, but I cannot toggle it's state..

e.filter.filters.forEach(function(f){
	var checkbox = $(".k-filter-menu").find("input[value='"+f.value+"']");

	console.log(checkbox);												 
        checkbox.prop("checked", true).trigger("change");
	checkbox.attr("checked", true).trigger("change");

	f.operator = "contains";
	e.filter.logic = "and";
})

Thanks for your help,

Matt

There is an issue with the Grid

• when all columns have a width defined, and
• when the total of all column widths is less than the total width of the grid 
• will initially have the extra width distributed to them (good - not an issue)
• but when an attempt to resize a column is made, 1) every column other than the one being resized will resize to the width defined in the configuration AND 2) the column being resized will resize to take up the space left behind by the other columns becoming smaller.

Configuration for it to happen appears to be

• Resizing enabled
• Scrolling enabled
• Each column has a width defined, adding to a total width smaller than the width of the Grid's DOM element

The scenario is

1. Open the grid
2. Resize a column

Impact
Columns lose their distributed widths and the column being resized jumps away from the cursor.

An example is here:

http://dojo.telerik.com/eYUdE

Try resize the first column, you will observe the resized column growing in width and other columns losing their distributed widths. This leaves the cursor indicating an incorrect resize position.

Is there any chance this could be fixed / a work around be advised? Having the distributed column widths is this circumstance is good, but the behavior on resize is undesirable.

Having problems when using the showColumn() hideColumn() function for grids:

Why does hideColumn() function on grid scrunch up the width when enabling it?

Then when I check the checkbox to hide the first row:

It seems to scrunch the other rows to the LEFT? You demo in the DOJO doesn't do this... I was wondering if this is because I am using a hierarchical grid?

       function toggleEditing(e){
         
          var hideColumn = $(e.target).prop("checked");
          var grid = $("#grid").data("kendoGrid");
          if(hideColumn){
            grid.hideColumn(0);
          }
          else {
            grid.showColumn(0);
          }
        }

See  my Kendo UI Dojo code for behavior:
https://dojo.telerik.com/UmAgoDEs/2

Thanks!

George

Hi!! I'm having an issue with Kendo UI JQuery.

I'm using the grid, and I have my data source defined with schema inside. All the schema fields have the property editable in false.

At some point, I need to change some of them to editable true, but I'm not able to do it so far.

I tried getting the data from the grid and updating the Datasource object manually and after that read the Datasource and refresh the grid, but is not working.

Also, try setting a completely new Datasource, and after that read the Datasource and refresh the grid, but is not working.

Also, try destroying the grid a generating a new one, but the grid never refreshes and the editable continues in false.

Hello,

We have a grid with a default grouping applied to it, and are trying to persist the expanded groups through a read operation (remote datasource).

We have been successful in persisting them through some operations using the following code:

function getExpandedGroups() {
    expandedGroups = [];
    try {
        let groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let expanded = e.children[0]["ariaExpanded"];
            if (expanded === "true") {
                let groupName = $(e).find(".k-reset").text();
                let slicePos = groupName.lastIndexOf(" (");
                groupName = groupName.slice(0, slicePos);
                expandedGroups.push(groupName);
            }
        }
    }
    catch { }
    return expandedGroups;
}

function restoreExpandedGroups() {
    try {
        groupRows = $(".k-grouping-row");
        for (let i = 0; i < groupRows.length; i++) {
            let e = groupRows[i];
            let groupName = $(e).find(".k-reset").text();
            let slicePos = groupName.lastIndexOf(" (");
            groupName = groupName.slice(0, slicePos);
            if (expandedGroups.includes(groupName)) {
                attachmentTable.expandGroup(e);
            }
        }
    }
    catch { }
}

which works fine if our code calls the read event, since we can execute it before and after eg.

    let expandedGroups = getExpandedGroups();
    attachmentTable.dataSource.read().then(function () {    
        restoreExpandedGroups(expandedGroups);
    });

however, when we use any of the grid functionality like sorting on a column, there doesn't seem to be any events that we can subscribe to that occur after the grid sets the groups back to their collapsed state, and we aren't able to persist the grouping in the same way.

Are there any potential workarounds for this issue?

Thanks

Regards,

Will Douglas

I have a kendo grid with inline editing and would like to put the edit and delete button inside a dropdown.

Before code:

columns.Command(command =>
{
   command.Edit();
   command.Destroy();
 }).Width(70);

I came up with the following markup

columns.Bound(x => x.Id).Title(" ").IncludeInMenu(false).ClientTemplate(
   @"<div class='btn-group'>
   <a role='button' class='k-button k-button-icontext k-grid-edit' href='\\#'><span class='k-icon k-i-edit'></span>Edit</a>
   <a class='k-button k-button-icontext dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
       <span class='caret'></span>
   </a>
   <ul class='dropdown-menu'>
      <li><a role='button' class='k-button k-button-icontext k-grid-delete' href='\\#'><span class='k-icon k-i-close'></span>Delete</a></li>
   </ul>
   </div>")
.Width(80);

If "Item Type" = "Credit" then "Amount" = "Percentage" * "Sale Price"

I am using a kendoGrid bound to a SharePoint list. I am able to get the grid to work fine with pagination. The problem is that I am using large datasets so the query performance is slow due to returning the total record count. SharePoint provides a way to do paging without using a total record count. Queries return a "next" and "previous" page url (see screenshot below). I would rather use this method for the sake of performance. Is there a way to have a custom pager with just a next and previous button and set the click event of those buttons?