I have filled a ng-grid with SharePoint items, I want to open the SharePoint editform in a SharePoint modal after clicking the edit button at the end of each row.
I can only make this work without the OpenPopUpPage. When I use OpenPopUpPage the {{row.entity.Id}} does not change to the row Id and as such results in a broken edit page.
Works:
{ displayName: 'Edit', cellTemplate: '<a ng-href="../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}">Edit</a>' }
Opens the modal but with broken editform (not correct id):
{ displayName: 'Edit', cellTemplate: '<a ng-href="#" onclick="javascript:OpenPopUpPage(\'../lists/locations/editform.aspx?IsDlg=1&id={{row.entity.Id}}\')">Edit</a>' }
I don't know anything about sharepoint popups, but to pass a value to a function you should use this code:
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name'
}, {
field: 'id',
displayName: 'Action',
cellTemplate: '<a ng-click="popup(row.entity.id)" href="#">Edit</a>'
}]
};
$scope.popup = function(id) {
// call your popup from here
alert(id);
}
Try this Plunker
Related
I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content
My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.
I am using a Kendo UI grid and for deleting a row I am using a custom button with bootstrap that when I click on it, with ajax I call a web api method to remove that row and if it is successfully deleted that row removes it from the DOM. (I'm not using the command destroy of kendo)
The problem I have is that if I try to filter that row that was removed, it appears again in the grid and it seems that it was not removed at all.
This is my Kendo UI grid:
var table = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/customers",
dataType: "json"
}
},
pageSize: 10
},
height: 550,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<a href='' class='btn-link glyphicon glyphicon-remove js-delete' title='Delete' data-customer-id= #: Id #></a>",
field: "Id",
title: " ",
filterable: false,
sortable: false,
width: 50,
attributes: {
style: "text-align: center"
}
}, {
field: "Name",
title: "Name",
width: 100,
}, {
field: "LastName",
title: "LastName",
width: 100,
}, {
field: "Email",
title: "Email",
width: 150
}]
});
And this is my jQuery code for deleting a row:
$("#grid").on("click", ".js-delete", function () {
var button = $(this);
if (confirm("Are you sure you want to delete this customer?")) {
$.ajax({
url: "/api/customers/" + button.attr("data-customer-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove(); //This part is removing the row but when i filtered it still there.
}
});
}
});
I know that in jQuery DataTables when can do something like this:
table.row(button.parents("tr")).remove().draw();
How can i do something like this with Kendo UI using jQuery?
Don't ever play with a Kendo's widget DOM. Always use it's methods instead.
Using Grid's removeRow():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid");
grid.removeRow($tr);
});
Demo
Using DataSource's remove():
$("#grid").on("click", "button.remove", function() {
var $tr = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem($tr);
grid.dataSource.remove(dataItem);
});
Demo
My usage was a little different. I have a custom delete button, so I needed to delete by ID, not UID.
You should be able to match on any field value instead of ID.
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.get(ID);
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
grid.removeRow(row);
We were trying to prevent messing with the controller, and this calls the existing delete function.
The removed row will be present in the kendo ui till you push changes to server.
To remove the row entirely you need to use
grid.saveChanges()
So the code below will remove row from server as well from ui
const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment out if you need to remove only from ui
Situation : My app carries out an AJAX request and the data received is displayed in the following JQgrid . listData(data) is a function that is called in success call back of this ajax request ,
data is the JSON data received from request .
buildJqGrid is a custom function that calls the .jqgrid() on a table and div html element .
buttonFormatter is my custom formatter for the column named Action
function listData(data) {
var containerName = 'datatablea3',
columnNames = ["Name",
"Email",
"Language",
"Office",
"alter email",
"Action"
],
columnModels = [{
name: 'Name',
index: 'Name',
width: '200px'
},{
name: 'Email',
index: 'Email',
width: '200px'
}, {
name: 'Language',
index: 'Language',
width: '200px'
}, {
name: 'Office',
index: 'Office',
width: '200px'
}, {
name: 'AlterEmail',
index: 'AlterEmail',
width: '200px'
}, {
name: 'action',
width: '200px',
formatter: buttonFormatter
}],
sortColumnName = 'Name',
caption = "Employees",
rowNum = 25,
pager = '#pager2a3',
grouping = false,
groupingView = {},
rowList = [25, 50, 100];
buildJqGrid(containerName, data, columnNames, columnModels,
sortColumnName, caption, rowNum, pager, grouping,
groupingView, rowList, true, 'asc');
}
Problem : When this jsp is run data is successfully displayed in the jqgrid with view button in each record , but when i click on the view button nothing happens !.
I checked in console it shows "control in formatter" but on clicking view button it doesn't show "control in click function".
i also tried using editLink formatter but still same error there ,
Can anyone please tell me why my button's onclick event is not firing ?
"click" is already a function, and therefore you override it, and nothing fires.
Try this
function buttonFormatter(cellvalue, options, rowObject)
{
console.log("control in button formatter");
return '<button onclick=\"clickFunction();\">View</button>';
}
function clickFunction()
{
console.log("control in click function");
alert("hello");
}
Simple fiddle : https://jsfiddle.net/virginieLGB/5e5LL5po/1/
try like this, I also use same functionality(JQ Grid) in my project, try HTML input type rather than the button,
When using your code, click event was firing but the whole web page is reloading.
function buttonFormatter(cellvalue, options, rowObject) {
if (rowObject.Status != "Not Started") {
console.log("Zumbaa");
var edit = "<input class='Viewbtn' type='button' value='View' onclick=\"ShowMigrationProcess(" + cellvalue + ");\" />";
return edit;
}
return '';
}
If I use 'x-form-search trigger' as iconCls in a button, the search(magnifying glass) icon appears as an image inside of the button. How do I make the icon the button and not an image inside the button?
Or is there any other way to get the search icon as a button?
Instead of adding a button with search icon you can write a trigger click function and than on click of the search icon i.e a trigger of the combo you can write your logic or call a function
Below is the example
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
onTrigger1Click: function(event) {
alert('WRITE YOUR LOGIC HERE');
},
});
I've trouble getting values out of my form.
I'm using bootstrap dialog from nakupanda (http://nakupanda.github.io/bootstrap3-dialog/)
The dialog (it is in a fullcalendar select function)
http://arshaw.com/fullcalendar/docs/selection/select_callback/
var form = $('#createEventForm').html();
BootstrapDialog.show({
message: form,
buttons: [{
label: 'Enkel rooster event',
action: function(dialogItself){
console.log('enkel - create')
dialogItself.close();
}
},{
label: 'Herhalend rooster event (elke dag)',
action: function(dialogItself){
console.log('meer - create')
dialogItself.close();
}
},{
label: 'Close',
action: function(dialogItself){
console.log(dialogItself);
alert('The content of the dialog is: ' + dialogItself.getModal().html());
}
}]
});
The html form
<form id="createEventForm">
<label>Klantnaam</label>
<input type="text" id="titleDrop" />
<br/>
<label>Beschrijving</label>
<input type="text" id="descriptionDrop" />
</form>
I don't know how to retrieve the data from the forms input when someone clicks on a button. I've tried $(titleDrop).val()andgetElementById(titleDrop)
Sometimes the form can contain php.
I am not getting javascript errors. I just don't get anything back when clicking on the butotns and using $('titleDrop').val()
EDIT FIDDLE
http://jsfiddle.net/jochem4207/7DcHW/3
This code works:
var form = '<label>Klantnaam</label><input type="text" id="titleDrop"><br><label>Beschrijving</label><input type="text" id="descriptionDrop">';
BootstrapDialog.show({
message: form,
buttons: [{
id: 'submit1',
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogRef){
var titleDropVal = $('#titleDrop').val();
console.log(titleDropVal);
}
}]
});
Still curious if it could work when I dont add the html in the JS section.
Edit: Question 2
I have a select list that gets filled from php
var select = $('<select id="selectVisibleUser"></select>');
<?php
$userList = array();
foreach($this->users as $user){
$jsUser = array(
'key' => $user->webuserId,
'value'=> $user->firstName.$user->preposition.$user->lastName
);
array_push($userList, $jsUser);
}
$list = Zend_Json::encode($userList);
?>
$.each(<?php echo $list?>, function(key, value) {
select.append($("<option/>", {
value: key,
text: value
}));
});
BootstrapDialog.show({
message: function (dialogItself){
var form = $('<form></form>');
dialogItself.setData('select-visible', select);
form.append('<label>Select</label>').append(select);
return form;
},
buttons: [{
id: 'submit1',
label: 'See what you got',
cssClass: 'btn-primary',
action: function(dialogItself){
alert(dialogItself.getData('select-visible').val());
}
}]
});
This shows me a empty select list and returns offcourse a null when I click the button.
Should I use your first fiddle in this case?
Tried the first fiddle ( http://jsfiddle.net/b8AJJ/1/ ) works perfectly in this case (except i've some trouble to get the id instead of the value)
Try this:
http://jsfiddle.net/b8AJJ/
If possible I would suggest this way:
http://jsfiddle.net/7DcHW/4/
BootstrapDialog.show({
message: function (dialogItself) {
var $form = $('<form></form>');
var $titleDrop = $('<input type="text" />');
dialogItself.setData('field-title-drop', $titleDrop); // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
$form.append('<label>Title Drop</label>').append($titleDrop);
return $form;
},
buttons: [{
label: 'Get title drop value.',
action: function (dialogItself) {
alert(dialogItself.getData('field-title-drop').val());
}
}]
});
You're using element selector wrong.
Try $('#titleDrop').val() instead of $(titleDrop).val().
Bind submit event to your form. This way you can get the values of form inputs when the form is submitted. Look at the following example:
http://jsbin.com/xiruv/1/