Kendo UI for angular - Grid shift click to select the rows - kendo-ui

I am trying to select the rows in between with a shift select. Kendo document says if we select the mode to multiple,it allows shift selection, but its not working.
<kendo-grid [data]="gridData" [height]="816" [selectable]="{enabled: true, checkboxOnly: true, mode: 'multiple' }" [kendoGridSelectBy]="'StaffId'"
(selectedKeysChange)="onSelectedKeysChange($event)">

Related

how to sort select DropDownList items in mvc 4 webgrid?

I'm working on mvc$ webgrid viewer, my grid viewer lists all columns exactlly as I want but there is one problem when I sort grid content by clicking on the hyperlink of the column names it sorts for all the columns except the drop down menu or DropDownList in mvc viwer.
[![mvc4 webgrid view screenshoot][1]][1]
DropDownList is not sorted as the other column values.
call a function that have the set of selectlist items. for example, in my case it works when I make the webgrid as follows:
grid.Column(columnName: "ContractFileNamesList", header: "ContractFileNamesList", format: #item => Html.DropDownList("filename",
, "-- Select One --"))
especially,
(IEnumerable)Model.ContractBOModel[rowVal -
1].FileNameListsFunction(fileNameStr);

How to go to last column of a table in jqgrid? without scrolling to the end

In many websites, when we scroll down a button would appear. It says 'Top'. when we click it, then it will take us to the top of the page.
My question is:
I want to have similar functionality in a table but horizontally.
Let me explain, I have a table in my application which has 100+ columns. So if I want to go to the last column, then I have to scroll horizontally till i reach last column. I am using Jqgrid. Is there any implementation in jqgrid which will take us to the last column just by clicking a button or something? Anyone tried?
Here is a possible solution: https://jsfiddle.net/99x50s2s/38/
Add a custom button to your jqgrid as shown in the fiddler, get the width of the 'ui-jqgrid-bdiv' class and scoll to right on the button click event,
.jqGrid('navButtonAdd', '#sg1' + "_toppager", {
caption: "See last column",
title: "Last Column",
onClickButton: function () {
$('.ui-jqgrid-bdiv').animate({
scrollLeft: $(this).width()
}, 'slow');
}
});

Multi selection of rows in kendo grid

I'm trying to implement multi selection of rows via keyboard (Shift+Up arrow/Shift+Down arrow). Honestly, I've no idea to implement this. Please help.
What You can do in Kendo Grid is providing a multi-selection mecanisme using ctrl button. So the user presses ctrl and then clicks on the rows that he wants to select (ctrl + left mouse click).
If this is what you look for, here is a code sample:
$("#rowSelection").kendoGrid({
dataSource: {
data: orders,
},
selectable: "multiple",
.
.
.
});
The key syntax is: selectable: "multiple".

Kendo grid group header customize to show the value and more

I have a Kendo grid that is groupable. The initial display needs to show all data items with no groupings displayed, i.e no 'group' and 'groupHeaderTemplate' are defined.
The grid contains a column (Suspension) where the value displayed is a translated dataitem value, i.e. if value > 10, display '*'.
When the user drags the Suspension column header cell to group, how can you customize the group header to show the value that it is grouping on plus the display 'value', i.e. 10-* ?
Do you mean on the button to turn off the group, or the group header text above each group in the grid ?
If the button to remove the grouping, I think you are stuck doing that manually.
If you mean the text above each group, columns have a groupHeaderTemplate property you can set.
groupHeaderTemplate: "Grouped By Name: #= value #"
See sample http://jsbin.com/IbITaT/2/edit

how to add checkbox in the jqgrid filter search tool bar?

In the jqgrid filter toolbar textbox search is working perfectly.. i want to include the checkboxes instead of textbox for search.
how to create? plz explain me..
thanks in advance..
In the filter toolbar you should better use select element with three values: "checked" , "unchecked" and "no filter" (see How can I add a "Select All" option to a jqGrid select toolbar filter?). Of cause you should choose the texts which better corresponds the contain or the name of the column. If you will have only two values like the checkbox has, that you will always have filtering on the column with the checkbox.
Jqgrid Search toolbar
There is no option for adding check box in Search toolbar , but we can add a column with values as check box in grid rows
Alternative way :
It contains the following options for common searching
search,stype,searchoptions,searchrules
stype :
It determines the search type of the field. (text and select)
text: create the text element in search toolbar
select: create the select(drop down) element in search toolbar
Example:
I have a grid with the column name system_defined , I want to show the checkbox in each grid row and search toolbar will be shown as a drop down values with multiselect option.
{name:'system_defined',index:'system_defined', edittype:'checkbox', search: true, formatter: "checkbox", editoptions: { value: "1:Yes;0:No"},editable:true, searchoptions: { sopt: ['eq'], value: ":All;1:Yes;0:No" }, stype: 'select'}

Resources