Multiple radio buttons in Kendo UI grid with inline and batch editing - javascript

I thought I would be doing something simple as Kendo UI already can do so much, alas it is not as simple as I thought. Radio buttons make it hard.
I'm trying to create a permission mask just as you can see here:
And the corresponding, almost working JSFiddle:
http://jsfiddle.net/oz0b7xcu/
Currently I have View, Edit and None as separate columns - I can imagine them being an enum.
I figured out how to use a template & editor per field as to display the boolean with radio buttons instead of "true"/"false".
My problems:
Currently the inline editor only reacts when I click next to the radio button. Only after activating it I can select it. After "leaving" the field, the value is not persisted. (Try it out in the JSFiddle)
How do I create the "Save changed permissions" button? I would need one event per changed permission and add it to some array
How would I make it work over several pages, persisting the current permission "change set"
How do I set the edited row as "dirty"/"changed"?
I think what I am trying to do is pretty clear:
I have a list of users with permissions
I want to be able to quickly edit all users (batch) and just select view/edit/none (exclusive)
Maybe have a visualization for changed rows (dirty)
When I'm done, I want to get a list of all changed permissions
PS: Maybe all of this would be easier with "virtual columns"? Have only one PermissionMask field and depending on its value virtual columns are filled. Possible? Maybe a better solution? I don't depend on any data source so I could define something different here...

If you do not have any other editable fields except radio buttons, I feel you don't need to make the grid editable and you can still make it work. I made some changes to the code in your fiddle. here is the code. (only code that is changed)
columns: [
{ field: "Name" }, {
field: "View",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "Edit",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "None",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);'/>"
We can manually mark a record as dirty when selection is changed.
function markDirty(ctrl) {
$("#grid").data("kendoGrid").dataSource.getByUid(ctrl.name).dirty = true;
}
Finally you can get the data source from the grid on button click and perform any action required.
//this will have the data in an array
var data = $("#grid").data("kendoGrid").dataSource.data();
Hope this helps.

Related

Group level checkbox in slick grid

I am facing an issue in using checkbox selector plugin for the Slick grid.
The plugin does not provide any way to add group level checkbox after using grouping plugin for the slick grid. I added checkbox using formatter function in groupItemMetadataProvider options something like this:
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
var checkedState="";
if(g.hasOwnProperty("checked")){
g["checked"] ? checkedState="checked" : checkedState="";
}
return "<input type=\"checkbox\" class="groupCheck" data-id=\""+g.value+"\" "+checkedState+"> Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
} });
Above code is displaying a checkbox.
I am binding change event and looping through data view to check rows which have the same duration as groupedBy ID and if its matched saving passing index to toggleRowSelection function in checkbox selector plugin.
Its working fine. Showing all child checked but header checkbox is not saving its state. After scrolling checkbox losing its 'checked' state.
Need help in solving this. Tried saving its state in "isChecekd" flag in above snippet.
Have you looked at this example? It is the official way to add a checkbox to groups which retains state on scroll.
http://6pac.github.io/SlickGrid/examples/example-grouping-checkbox-row-select.html
Make sure you have these three lines of code to get it working in your webapp:
var checkboxSelector = new Slick.CheckboxSelectColumn({cssClass: "slick-cell-checkboxsel"});
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider({ checkboxSelect: true, checkboxSelectPlugin: checkboxSelector });
dataView.syncGridSelection(grid, true, true);
The original developers of slickGrid are not very active in the development so make sure you are using the latest build from:
SlickGrid

Checkbox selection model - radio button styling?

I'm using ExtJs 4 to build out a new web page with a few forms in it, nothing crazy. On this page I have a gridpanel using a checkbox selection model with mode set to 'Single'. Here is my selection model configuration:
Ext.create('Ext.selection.CheckboxModel', {
mode: 'Single',
checkOnly: true,
showHeaderCheckbox: false
/*listeners: {
select: function(model, record, idx) {},
deselect: function(model, record, idx) {}
}*/
});
Functionally speaking, this works absolutely fine. It limits the user to one selection in the gridpanel in which is it being used. However, in my requirements this field is defined as a radio button (which makes sense since in basic HTML this would be the input type used for a single selection, not a checkbox).
Is there configuration setting I could add to the selection model to make the field display as radio buttons instead of checkboxes? Alternatively, is there a CSS update I could make to show the field as a radio button?
Absolutely you can achieve with CSS.
You can find that the default image is coming from build/production/{app name}/resources/images/form/checkbox.png.
Inside extjs:
{
xtype: 'grid',
cls: 'checkbox-overwrite',
selModel:{
selType: 'checkboxmodel',
mode: 'SINGLE'
}
...
}
Inside CSS
.checkbox-overwrite .x-grid-row-checker,
.checkbox-overwrite .x-column-header-checkbox .x-column-header-text {
background-image: url(from your css file path to build/production/{app name}/resources/images/form/radio.png);
}
Sometimes, the path from your css file to the resource may not be stable or not convenience to define it. I suggest you just go to the folder find the radio.png and save it to your application's defaults images folder. Then it will be much easier to work with the path inside CSS.
You can use the radiobutton
see the difference there is only one change if you change the defaultTYpe to radiogroup thats it remaining things are same
docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Radio

Kendo grid dynamic edit

i'm using kendo ui for html5 web app. and i need to edit only one column (i.e., Unit) and when it is changed, the Amount column should update automatically. for example:
1 unit = $10,
if i change 1 unit to 5, then amount changes to $50.
How can i achieve this.
Previously I posted a part of my code. now i have done a telerik dojo example.
please take a look here
Working Example with Source code
Update #1:
The demo looks clumsy, i'm sorry for that. click the button with number in first page, then click the cart icon on the top right corner.
This image explains what i want to do with that cart page
How can i do that?
Update #2:
Thanks to #RobertoDeLaParra
For his solution, i came closer completing. but i have a new issue.
When i change the Unit, the aggregate and the Amount field in edit box, doesn't change.
Please take a look at this dojo,
http://dojo.telerik.com/#varanjith/ePOrA/5
Thank you.
Hi change your amount field for this:
{
field: "Amount",
title: "Amount",
footerTemplate: "<div class='ra'>#= sum # </div>",
template: "<div class='ra'>#= Amount * Unit # </div>"
}
and after initializing the cartGrid add this:
var cartGrid = $("#CartGrid").data("kendoGrid");
cartGrid.bind("edit", function (e){
//console.log(e.model);
var unitPrice = e.model.UnitPrice;
var unit = e.model.Unit;
//This code replace the input generated by kendo with our custom HTML
$("td[data-container-for='Amount']").html(unitPrice*unit);
});

Dojo: for each row in a grid, have a button that when clicked shows more information from the data store

This is proving to be surprisingly difficult.
Suppose I have a grid that displays the name and size of files.
Information is loaded from a JSON file into an instance of dojo/store/Memory and then key attributes presented in the grid. How would I include a button on each row of the grid, that when clicked, displays more attributes about the file? These attributes are stored in the dojo/store/memory.
Right now I have a row like this in the grid:
{name:"More", field:"id", formatter: buttonFormatter, datatype:"string", noresize: true, width: "120px"}
And I attempted to pass the ID to a button using the formatter:
var buttonFormatter = function(inValue){
var newButton = new Button({
label: "Details",
onClick: function(inValue){
alert("More information about " + inValue + " goes here");
}
});
return newButton;
}
This doesn't work however.
The difficulties, as far as I can tell, are:
1) Associating each specific button with a specific file from the store
2) Giving the onClick javascript access to data from the store
Thanks for your help!
Tristan
You can use dojo-data-type-event attach point to do the operation. The corresponding method in the grid widget instance will show your more attributes in different style like tooltip,append,dialog and etc as you need
Not sure if this might helps you, but have a look at it.
In this example there's an onclick-Event on a button to zoom to the clicked row.
https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
Regards

how to show readonly fields in edit form in jqgrid or other way to show whole text from readonly column

jqGrid colModel contains read-only multi line column defined using properties below.
Content line lenghts are greater than column width, text is to long so that tooltio does not show its whole content. It is not possible to see whole content.
I'm looking for a way allow user to see whole column content.
For example, if edit form button is pressed, this column content should de displayeid in edit form as readonly textarea.
However, readonly columns does not appear in edit form.
How to allow user to see whole column content ?
colModel: [{
"name":"LoggedLongText",
"editable":false,"width":539,
"classes":"jqgrid-readonlycolumn","fixed":true,
"hidden":false,"searchoptions":{"sopt":["cn","eq","ne","lt","le","gt","ge","bw","ew","nc"]}}
}]
Is the setting
editable: true, editoptions: { readonly: "readonly" }
probably what you need?
UPDATED: Free jqGrid supports more values for editable property starting with version 4.8. The wiki article described that editable can be function and it supports additionally three string values in case of using form editing: "hidden", "disabled" and "readonly".
To show readonly fields you might try using the "disabled:disabled" inside editoptions.
Yet another option is to use a custom element type that returns a span as below:
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
..
function myelem (value, options) {
var el = document.createElement("span");
$(el).val(value); // be sure to escape special characters as necessary.
return el;
}
function myvalue(elem, operation, value) {
// just reutrun null or empty string.
return "";
}
I prefer this over using "readonly:readonly", because the readonly option wraps an input control around the cell value, the input control still receives focus, which I think is misleading to the user. Using "disabled:disabled" keeps the input element from receiving better, which is slightly better, in terms of usability.
Using a span is much better. Interestingly, jqGrid sends even "unsuccessful" form controls to the server.
Hope this helps.
-- jqr
To show readonly fields on EditForm, you must try using the {readonly: true} property inside editoptions for a jqGrid column and will work.

Categories