I have a slickGrid which is populated with data, and have a first checkbox column added via:
if (info.includeSelectCheckbox) {
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass:"slick-cell-checkboxsel"
});
info.columns.splice(0, 0, checkboxSelector.getColumnDefinition());
}
grid = new Slick.Grid(elem, dataView, info.columns, options);
if (info.includeSelectCheckbox) {
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(info.columns, grid, options);
}
I also have a filter textbox, which filters the data in the grid by different criteria.
The problem is, when I select the checkbox for some items in the grid and then filter the grid, then selected checkboxes either stay on the old indexes, but matching different records, or are gone from the grid and don't reappear when I the remove filtering.
I'd like to have the checkbox selections independent of the filtering, so whenever I play with the filter the selected items stay selected until I manually uncheck them.
I also tried to add checkboxes via the regular column formatter, but the selection is gone when I start filtering.
You need to call dataView.syncGridSelection(grid).
See https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles.
Related
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
I've a Kendo grid with editable = incell and more than one required text field. The default values are empty strings. When I click on "Add new record" the first required field is marked as error because it's empty. I can only leave the field after I've done some input. Although the other required fields are still empty I can leave the row.
How can I prevent that a row can't be left without filling all required fields?
Try this,
$('.k-grid-save-changes').on("click", function () {
var grid = $("#grid").data("kendoGrid");
if (grid.editable && !grid.editable.validatable.validate()) {
//What ever you want to do
e.preventDefault();
return false;
}
});
I am planning of using a cascading kendo drop down.
Drop down 1 - Countries - it will list down all the countries.
Drop down 2 - States - Based on the selection of the country I have to show the states here.
The data for both are loaded from my api controllers. I referred to this link
http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html
But, I need to pass the first selected value to the second drop down.
PLease suggest the best way to do it. Examples would be really helpful.
Thanks.
you have to use events for that
http://demos.kendoui.com/web/dropdownlist/events.html
.Events(e =>
{
e.Change("change").Select("select").Open("open").Close("close").DataBound("dataBound");
})
<script>
function change() {
// get a reference to the dropdown list
var dropdownlist = $("#dropdownlistTwoForStates").data("kendoDropDownList");
//Write your logic here to bind data for thie dropdown
// disable the dropdown list
dropdownlist.enable(true);
};
</script>
I am using DHTMLX grid on a jsp page. From server side i am loading some data on it. I want data to be in sorted manner once it is loaded on grid. I found there is method
"grid.sortRows(col, type, order);" but it works only when you click any header, i want by default data will come in sorted manner.
mygrid.load(YOUR_URL, function() {
// we are in callback
mygrid.sortRows(0, "str", "des"); // sorts grid
mygrid.setSortImgState(true, 0, "des"); // sets icon to sort arrow
});
The drag/drop column reordering is a great feature, but how do I prevent the users from moving particular (non-data) columns?
For example, I am using the Checkbox Selectors for my mutli-select Grid, but this column should always be locked to the left, while the other columns can be freely reordered.
I looked at the sortable demos on jQuery UI and modified the setupColumnReorder function in slick.grid.js to exclude certain items. By excluding the checkbox column I was able to prevent it from getting reordered, even by dragging other columns before it.
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
Since my checkbox column is always first, I just grab the id like so. A bit of a hack, but it worked.
I tried this:
function setupColumnReorder() {
var checkBoxColumn = $headers.children([0]).attr('id');
$headers.sortable({
items: "div:not('.slick-resizable-handle','#"+checkBoxColumn+"')",
...
but i had problems when dragging other columns before it. Then i tried this:
grid.onColumnsReordered.subscribe(function (e, args) {
if (myGridColumns[0].id != grid.getColumns()[0].id)
{
grid.setColumns(myGridColumns);
}
else
{
myGridColumns= grid.getColumns();
}
});
and it was just fine.