I've run into a situation where I need to create a grid manually on a view. The problem is that the column headers are different on the manually created grid than those created by KUIB code. The KUIB grids have a filter icon and the dropdown menu on the filter is just the filter. On the manually created grid I get the "k-i-more-vertical" icon and the dropdown menu on it has options to Sort Ascending, Sort Descending, Columns > (with a list of column names to include on the grid), and Filter > (which brings up the same filter as the KUIB grid). I've set all the options on my grid as on a KUIB grid (per the controller.js file for another view) and it still isn't the same.
What do I need to do to make my manually created grid look the same as the KUIB created grid? The grids across all of my views should look and function the same.
Thanks,
Louis
Hello Louis,
I also tried with a custom HTML component.
Here is the approach that I use with a custom HTML component ($watch from constructor):
var cancelWatch = this.$scope.$watch(() => {
var element = angular.element("#customhtml0");
if (element.html() !== undefined) {
return element;
} else {
return undefined;
}
}, (element) => {
if (element) {
element.html('<div id="grid"></div>');
$("#grid").kendoGrid({
filterable: true,
// columnMenu: true,
dataSource: {
data: [
{CustNum: 1, Name: "TEST#1"},
{CustNum: 2, Name: "TEST#2"}
]
}
});
cancelWatch();
}
});
Please let me know how it goes.
Thanks,
Edsel
Hello Louis,
Are you using the columnMenu property as a configuration option for the grid?
This option is not used in the generated options for the grid. You can see the options for the grid in the controller.js.
Just in case, here is what I used to create the grid:
1) Grid element In topSection.html with reference to options:
<kendo-grid k-options="vm.gridOptions"></kendo-grid>
2) Definition of options in constructor method in controller.public.js:
this.gridOptions = {
filterable: true,
sortable: true,
pageable: true,
// columnMenu: true,
// groupable: true,
// reorderable: true,
// resizable: true,
dataSource: {
data: [
{CustNum: 1, Name: "TEST#1"},
{CustNum: 2, Name: "TEST#2"}
]
}
};
I hope this helps,
Edsel
P.S.: If you actually prefer the look of using the columnMenu, you could programmatically set in the controller.public.js.
Edsel,
I tried switching my grid to match your example and I can't get it to work. I'm not using the topSection.html, this is in a Custom Html component. From within the Custom Html component it doesn't seem to be getting rendered. When I view the source on the preview page I can see the kendo-grid tag but not this.gridOptions.
Can you test creating your own grid within a Custom Html component and let me know how to set that up?
Thanks,
Louis
Hello Louis,
I also tried with a custom HTML component.
Here is the approach that I use with a custom HTML component ($watch from constructor):
var cancelWatch = this.$scope.$watch(() => {
var element = angular.element("#customhtml0");
if (element.html() !== undefined) {
return element;
} else {
return undefined;
}
}, (element) => {
if (element) {
element.html('<div id="grid"></div>');
$("#grid").kendoGrid({
filterable: true,
// columnMenu: true,
dataSource: {
data: [
{CustNum: 1, Name: "TEST#1"},
{CustNum: 2, Name: "TEST#2"}
]
}
});
cancelWatch();
}
});
Please let me know how it goes.
Thanks,
Edsel
Edsel,
I ended up going a different direction, thanks for the solution though, this is still good information for the community.
Louis