jqGrid using radio buttons for editable rows - jqgrid

I'm currently using jqGrid and ASP.Net MVC. With my current project, my goal is to provide a grid of data to the end user, and they can then edit this. The data is machine-generated, and the users will be confirming if the machine is correct or not.
I think ideally for speed, I'd like to provide a row per item, with a radio button group as the editable. The users could then pick from the values 'Unknown', 'Correct', 'Incorrect'.
As there will be a lot of data, I'd also like to provide a control of some type that can set all rows in the grid to one of the available radio button choices, for the user experience.
Given that there seems to be no native support for this in jqGrid, I wanted to ask if anyone has had any experience writing something like this, and whether this is achievable and reliable, or whether I should stick with the drop-down editable approach that is native to jqGrid.

To implement radio button as the editable instead of the standard drop-down editable approach you can use so named custom editing feature of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#custom). This allows you to create any custom control to edit the cell value. An example of the implementation you can find here: Add multiple input elements in a custom edit type field.
To set all rows in the grid to one of the available radio button choices you can use either a control outside of jqGrid or add an additional custom button in the navigation bar (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons). If you search for navButtonAdd you will find a lot of examples how to implement this, for example, Jqgrid: navigation based on the selected row. Because you use server based data, you can just call a method on the server to make the changes which you need and then call trigger("reloadGrid") to refresh jqGrid data.

Related

Kendo UI grid - different templates for Edit and Create

We are using Kendo UI grid to display some records. The requirements need us to have a column (Say "File Name")shown as a text box when the user clicks on "Edit".
However, when user clicks on the "Create" button in the toolbar, the same column should be replaced with a File Select control which will allow the user to select a file from his machine. The other columns remain the same.
I have already tried searching through Stack Overflow as well as the Kendo UI Grid forums, but to no avail.
Is there any way to achieve this? Any pointers will be of great help.
Regards,
Nikhil
Using different editor templates for create/edit is not supported. You need to use the edit event of the Grid to change that text input to file input with JavaScript. To distinguish between edit and create you can use the isNew() method of the model.
i.e.
edit:function(e){
if(e.model.isNew()){
//replacement logic
}
}
Similar question is covered here.

Which dojo widget should be used for DropDown

I wish to create dynamic dropdown, meaning the value of the second dropdown changes with the change in selection on the first. I was looking through the Dojo docs and it seems there are 3 different widgets that I can use,
dijit/form/ComboBox
dojox/form/DropDownSelect
dijit.form.Select
Now I am confused as to which one should i use for creating Dynamic DropDowns?
You can choose anyone depending upon what extra features you want. While dijit.form.Select is your normal HTML select, combobox and filteringselect offer more features.
Follow http://kennethfranqueiro.com/2010/06/combobox-vs-filteringselect/ for a comparison between the two. You can also play with them to know how they work.
I had used FilteringSelect in my app for the same behavior as need.
Differences between dojo dropdown :
Select It is simple combobox like select in HTML with no validation
and not provide any search facility inside select options.
ComboBox It is pure form of combobox and name as ComboBox again it
will not provide any default validation but it provide search
facility within its options.
FilteringSelect It is an advance form of select have default
facility of validation and search facility. And it also has property
to take value as input tag take value in HTML.
In dojo you can also try custom validation which is provided inside dojox library. I hope it will help you.

How to appened Data in JQGrid table Cell?

I have created JQGrid.
I have put the Data in cell and one html Link in cells.
OnClick of that link I need to open JQGrid Specific popUp.Popup have one combobox .I'll select one option and click submit button and that data needs to be appear in clicked cell.
Thanks
The construction which you suggest seems me too complex. Probably you can consider to use more simple user interface?
Nevertheless you can just use setCell method to set new contain of the cell of the grid.

How to add a new item to a dropdownlist in a create form in MVC 3?

I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.

jQgrid multiselect with dynamic changed cell value based on dropdown selection

I just found that sample
http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect2.htm
I want to have something similar:
I want to be able to post selected values on server and also i want to have a dropdown and based on that dropdown selection another cell value of that row gettign changed
How can i do that?
|Id|Dropdown|ValueChangedOnDropdownChanged|
1 A[A/B] A selected
2 B[A/B] B selected
*[A/B] it is dropdown options
I am not sure that I understand your question correct. The demo which you reference in your question I created before for the answer and this one.
Look at the another old demo. It shows how to implement dependent select (dropdown) list. The demo shows how to it in inline editing, form editing and the searching toolbar. In case of the usage of server base data you will have to use dataUrl and buildSelect to implementation of the same behavior. The dataUrl should be used instead of the v property of the searchoptions or editoptions. The buildSelect can be used ton only to modify the server response, but just as the good place to rebuild the dependent select (dropdown list).

Resources