Use jqueryui sortable to order records in Grid - jquery-ui-sortable

I use a grid to show a list of master table records which are used by a dropdown in my web app. We maintain a sortOrder column used when displaying the items in dropdown. I want to use the jQueryUI sortable plugin to allow the users to re-order the records being dispalyed in the Grid.
I've an ASP.Net MVC(v2.0) web app. What would be the best way to capture the new order and update it in the database?
I found a post for php that is similar. It uses the ".sortable('toArray')" to get the elements but I've a Grid. Would I have to simplify my Grid to a list?

I've an editable Grid so I added a new column "sortOrder" which has textbox and each time the user drags a row I use the "update" event to find it and set "this.rowIndex".
Hope the following function helps -
$("#sortable tbody").sortable({
helper: fixHelper,
cursor: 'move',
update: function(e, ui) {
$el = $(ui.item);
$el.effect('highlight', {}, 2000);
//Use for debug: alert($('#sortable tbody tr').length);
$('#sortable tbody tr').each(
function(currentIndex) {
$(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex); //td:first
});
}
});
This is where I find my textbox and set its value:
$(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex);

Related

Ag Grid Autocomplete in edit cell

I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.
Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.
It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.
It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.
https://github.com/superman-lopez/ag-grid-auto-complete
Edit:
Since my original post, a new project has started and this is not limited to Angular projects:
https://github.com/avallete/ag-grid-autocomplete-editor
You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.
// function to act as a class
function YourCustomEditor () {}
// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
this.eInput = document.createElement('input');
this.eInput.setAttribute('class', 'inputClass');
this.eInput.setAttribute('type', 'text');
}
};
YourCustomEditor.prototype.afterGuiAttached = function() {
$('.inputClass').autocomplete({
source: function(request, response) {
// Do your autocomplete filtering here
},
datatype: 'json',
select: function(event, ui) {
// Do Stuff on select
}
});
this.eInput.focus();
};

SAPUI5: how to make select field read-only

I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!

Populate a Dynamic Field Dropdown List in OTRS

I need to add a dropdown in the New Ticket Screen of OTRS. I managed to add a Dropdown by adding a Dynamic Field with the help of Dynamic Fields Management in Admin Section.
Now my problem is that I want to populate this Dropdown with data that I get from some distant database on the run and dependin on the User Loged In. How can i feed In this Dynamic Data in the DropDown List in OTRS ?
Thank you.
To do such a thing I do not believe is supported from the Dynamic Field UI provided by OTRS.
So you can either:
1- add all the possible values into the drop down box and then hide/show them using code changes in the dtl file. (use javascript).
For creating a new ticket there is either AgentTicketEmail.dtl or AgentTicketPhone.dtl.
There is also the CustomerTicketMessage.dtl if you want to include it in the customer interface too.
2- Add only one value which you can also hide using javascript in the dtl files and just add values to the dropdown list using javascript code.
Example javascript below hides/shows different dynamic fields. You can find what your dynamic field is called by looking at the page source from your browser.
function setdynamicviews(){
switch ($('#Dest').val() ) { //this is where the queue is relevant (Dest = Queue)
case "8\|\|Support": // need to slash escape the pipes
//show dynamic fields
document.getElementById('LabelDynamicField_Product').style.display = 'block';
document.getElementById('LabelDynamicField_SerialNo').style.display = 'block';
break;
default:
//hide dynamic fields.
document.getElementById('LabelDynamicField_Product').style.display = 'none';
document.getElementById('LabelDynamicField_SerialNo').style.display = 'none';
}
}
To add items to usign javascript see here
Yuu have not provided enough information for me to help with getting the information "from some distant database"
Note: if you do change any DTL files or other otrs files you should defrinitely create a theme first see here
Hope this helps.

ExpressionEngine: Conditionally display custom fields in a channel entry form

I'm building a blog site in ExpressionEngine. I have two types of entries that I want to keep in the same channel. When a certain category is selected i'd like to show additional fields.
**EXAMPLE
Channel > Article
Fields:
- Title
- Post Body
- Image
- Tags
Additional Fields for a category:
- Price
- Product Bio
Is this possible?
How savvy are you with JavaScript? You could use Brandon Kelly's CP CSS & JS extension. Then use a little custom javascript to build that functionality. Not perfect, but probably faster than writing a custom extension. Roughly, you'd do this:
Create the channel fields group and all the channels, and assign that group to your channel
To make it a little more usable, you'll want the category selector to be on the same Publish tab as the fields: Create a custom publish layout for that channel that moves the Categories field from the Categories tab to the Publish tab
Find the id numbers of the channel fields that you want to hide, as those will be HTML IDs in the Publish page that look like "hold_field_ID#"
Figure out the category ID for the category to click to reveal additional fields. In the Publish page, that category will show up in the Categories field with a "value=ID" attribute.
Script time! Head to Add-ons > Extensions > CP CSS & JS settings and add some JS in the Custom Javascript field.
Something like this:
$(document).ready(function() {
// Cache the divs with your channel fields
var $theSecretFields = $('#hold_field_5, #hold_field_6');
// Hide them
$theSecretFields.each(function() {
// But only if they're empty (no previous saved data)
// If you're using a textarea or something else, change the .find selector
if ( $(this).find('input').val() === '' ) { $(this).hide() };
});
// When you click the category ID (the input[value="id"] selector)...
$('#hold_field_category').find('input[value="12"]').click(function() {
// Toggle the visibility of the channel fields
// Again, only show/hide them if they're empty
$theSecretFields.each( function() {
// Again, change the .find selector for your field type if necessary
if ( $(this).find('input').val() === '' ) { $(this).toggle() };
});
});
};
You might have to build in some more logic in the click handler to make sure that the fields are only shown when the checkbox is selected (among other things), but that's the basic idea.
You want this within the control panel or the front end of the site?
To do this with categories as the trigger, you'll need to write a custom extension that adds the javascript to do your showing and hiding.
You might want to look at the Entry Type add-on, which allows you to use a dropdown menu to change the fields which are displayed.

ASP.net MVC Set Checkboxes to checked Clientside

My situation is: Im making a simple inbox page. The inbox is a listing made from a DevExpress grid. Each row in the grid has a checkbox that the user can check so that they can multi delete records (similar to yahoo mail etc).
When the user clicks the select all link or the clear all link i need to set all the checkboxes within the grid to be checked or unchecked. How do I go about this with client-side scripting? Thanks
The easiest way to do this is to use jQuery. With the right selector it's pretty much a one liner. I don't know how much you know about jQuery so here's a link to the selector docs if you want to read up:
http://api.jquery.com/category/selectors/
The selector will depend on the layout of your page. I've done it before using something like this:
$("#tableId tr td input:checkbox").attr("checked", true);
In this example all checkboxes within a table with an id of "tableId" are checked
Using jquery it should be pretty easy- assuming you can use one of the selectors to select all of the checkboxes (take a look at the different jquery selectors http://api.jquery.com/category/selectors/).
Attach a toggle handler:
$('Selector for the "select all" checkbox>').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
Select all checkboxes and when toggled switch the checked state of the other checkboxes:
$('<Selector for the ones you want to toggle>').attr('checked', true);
Provide some sample HTML, or a link to a page, if you need further help.
So putting it together, assuming your "select all" checkbox had an ID of "uxSelectAll" and the ones you want to change have a CSS class of "checkbox-mail-items" it would be something like:
$('#uxSelectAll').toggle(function() {
$('.checkbox-mail-items').attr('checked', true);
}, function() {
$('.checkbox-mail-items').attr('checked', false);
});
you can create a delegate (jquery) for all the checkboxes once you've done the answer above. with something like to perform an action for each check box:
$('div.myGridDivClass tbody').delegate(':checkbox', 'click', function(){
var $checkedRow = $(this), $row = $checkedRow.closest('tr')
// check row is checked
// toggleclass for checked css class and apply to the $row or whatever u want
// do something here
});