Develop Reference

How to create a popup in js

I need a help , I am new to jQuery and java script .
My TG.js like
var initializeTemplateGrid = function () {
var templateGrid = $("#templateGrid");
templateGrid.kendoGrid({
dataSource: {
transport: {
read: {
url: "",
dataType: "json",
type: "GET"
},
parameterMap: function (data, type) {
if (type == "read") {
return {
limit: data.pageSize,
offset: data.page-1,
sort: data.sort[0].field + ":" + data.sort[0].dir
}
}
}
},
schema: {
data: "Records",
total: "TotalRecordCount"
},
serverPaging: true,
pageSize: 25,
serverSorting: true,
sort: { field: "TemplateName", dir: "asc" }
},
sortable: {
allowUnsort: false
},
pageable: true,
pageable: {
pageSizes: [10, 25, 50]
},
noRecords: {
template: "No Templates Available"
},
columns: [
{
field: "TemplateName",
title: "Template Name"
},
{
template: "<div >#if(data.SiteCount > 0){#<a Id='tt' href=''>#:SiteCount# Sites</a>#} else{#N/A#}#</div>",
field: "SiteCount",
title: "Name TEMP"
}
]
});
};
Currently for TemplateName if sitecount >0 then by href ='' I am moving to main page.
Now I want to create a popup when I click that link with data.SiteCount value.
How can I do it ??
I was tried below
$(function () {
$("#dialog1").dialog({
autoOpen: false
});
$("#opener").click(function () {
$("#dialog1").dialog('open');
});
});
but I am getting a error dialog key word not supported with my project .

You did not mention what other library you have referenced in your project. Add the followings in the layout page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
Then white a reusable function like this in the layout or your js file:
function showDialogUI(msg, closedTrigger) {
$('#dialogModal span#dialogModalMessage').text(msg);
$("#dialogModal").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
},
close: function () {
if ((closedTrigger === null) || (closedTrigger === undefined)) {
}
else {
closedTrigger();
}
}
});
}
Then from any page call the function like this:
showDialogUI('There is a test message.', null);
In the place of null you can pass a function reference which will be called when the Dialogue box is closed.

Not able to drop external elements on calendar

when I drag an external element on the calendar, I am not able to create an event on the calendar through it. eventReceive() callback is also not getting fired.
I have set the droppable option to true as well. Can someone please help? Have a look at the code:
HTML:
<div class="fc-event">Drag me !!</div>
JS:
$('.fc-event').each(() => {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
duration: '02:00',
create: true,
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0, // original position after the drag
});
});
const calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
themeSystem: 'standard',
selectable: true,
droppable: true,
columnHeader: true,
selectMirror: true,
editable: true,
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin],
eventResourceEditable: true,
select(selectionInfo) {
showTaskCreationPopup(selectionInfo.start, selectionInfo.end);
},
eventReceive(element) {
console.log('event received');
createTask(element.event);
},
drop(info) {
console.log('dropped');
createTask(info.jsEvent);
},
eventDrop(info) {
console.log('event dropped');
},
header: {
left: 'prevYear prev today next nextYear',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay',
},
buttonText: {
// eslint-disable-next-line new-cap
prevYear: new moment().year() - 1,
// eslint-disable-next-line new-cap
nextYear: new moment().year() + 1,
},
});
calendar.render();

The way that I was able to achieve this was not through the eventReceive -neither eventDrop- event but using the 'drop' event. The signature is something like:
customDrop = ({ resource, date, draggedEl: { id } }) => {})

var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
if (eventEl.textContent == "Event1") {
new Draggable(eventEl, {
eventData: {
id: 1,
title: eventEl.innerText.trim(),
color: 'Orange',
textColor:'black'
}
});
} else if (eventEl.textContent == "Event2") {
new Draggable(eventEl, {
eventData: {
id: 2,
title: eventEl.innerText.trim(),
color: '#ccccff',
textColor:'black'
}
});
}}); // end eventEls.forEach

Filter toolbar not coming in jqGrid

I am using free jqGrid 4.14. I am having trouble in displaying filter toolbar in the grid. I am using the same code that I was using to display filter toolbar in version 4.1.2
but here the toolbar is not appearing.
I need the toolbar to display only when filter image is clicked in the grid otherwise it should hide. So, I am using the below code for that in previous version but here in new the same is
not working
grid.jqGrid({
datatype: "jsonstring",
datastr: grid_data,
colNames: scopes.grid_header_column_value,
colModel: scopes.gridcolumns,
height: height,
viewrecords: is_pager_enable,
multiSort: true,
ignoreCase: true,
grouping: is_group_enable,
sortorder: sort_order,
sortable: false,
pager: "#" + pager_id,
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'name',
gridComplete: function () {
$("#" + grid_id+"count").html($("#" + grid_id).getGridParam('records')+" row(s)");
},
beforeSelectRow: function (rowid, e) {
var item = $(this).jqGrid("getLocalRow", rowid);
if (item != null && item.isLeaf) {
$("#"+$rootScope.subpopup).css("display", "block");
$scope.getPopup($rootScope.xmlname,grid_id,rowid);
}
return true; // allow row selection
},
loadComplete: function () {
var ts = this;
//document.querySelector('#filterbutton').addEventListener('onclick', clickqw);
if (ts.p.reccount === 0) {
$(this).hide();
emptyMsgDiv.show();
} else {
$(this).show();
emptyMsgDiv.hide();
}
}
});
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", searchOperators: true }).navGrid("#" + pager_id, { edit: false, add: false, del: false, refresh: true, search: false });
Here I am hiding or showing the bar on need basis
var count = 1;
grid.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable > button.btnfilter ")
.each(function () {
$('<button>').css({ height: '10px',background: 'url(img/filter.png) no-repeat',border: '0'
}).appendTo(this).button({
icons: {
primary: ""
},
text: false
}).click(function (e) {
var idPrefix = "jqgh_" + grid[0].id + "_",
thId = $(e.target).closest('div.ui-jqgrid-sortable')[0].id;
if (thId.substr(0, idPrefix.length) === idPrefix) {
if (count == 1) {
$('#gview_' + grid_id).find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-search-toolbar").show();
count = 0;
}
else {
$('#gview_' + grid_id).find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-search-toolbar").hide();
count = 1;
}
return false;
}
});
});
$('#gview_' + grid_id).find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-search-toolbar").hide();
EDIT : Adding the images
This is when image where there the filter is not applied. Only the image (funnel image) for filter where the filter can be applied is shown.
Here when we click on the image of filter only then the filtertoolbar should appear.

ExtJS TaskRunner

I'm still in the learning process with EXTJS and any help would be much appreciated.
The goal for me is to load data into a grid where one cell needs to have the value incremented every minute. From my research using the TaskRunner function is the way to go but can't figure out where to put it and how to use it. My assumption is that it needs to go into the model or the controller but I'm not sure. In my simple project I'm using the MVC architecture.
Currently my gird works as expected. It reads in a file does a date conversion that produces a minute value. It's that minute value that I need to increment.
The code below is a sample TaskRunner snippit that I'm working with, right or wrong I don't know yet.
var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
run: store.each(function (item)
{
var incReq = item.get('request') + 1;
item.set('request', incReq);
}),
interval: 60000 // 1-minute interval
});
task.start();
Model:
Ext.define("myApp.model.ActionItem", {
extend : "Ext.data.Model",
fields : [
{
name: 'pri',
type: 'int'
},
{
name: 'request',
type: 'int',
defaultValue: 0,
convert : function(v, model) {
return Math.round((new Date() - new Date(v)) / 60000);
}
}
]
});
Controller:
Ext.define("myApp.controller.HomeController", {
extend: "Ext.app.Controller",
id: "HomeController",
refs: [
{ ref: "ActionItemsGrid", selector: "[xtype=actionitemgrid]" },
{ ref: "DetailsPanel", selector: "[xtype=actionitemdetails]" }
],
pri: "",
models: ["ActionItem"],
stores: ["myActionStore"],
views:
[
"home.ActionItemDetailsPanel",
"home.ActionItemGrid",
"home.HomeScreen"
],
init: function () {
this.control({
"#homescreen": {
beforerender: this.loadActionItems
},
"ActionItemsGrid": {
itemclick: this.displayDetails
}
});
},
displayDetails: function (model, record) {
this.getDetailsPanel().loadRecord(record);
},
loadActionItems: function () {
var store = Ext.getStore("myActionStore");
store.load();
this.getActionItemsGrid().reconfigure(store);
}
});
View:
Ext.define("myApp.view.home.ActionItemGrid", {
extend: "Ext.grid.Panel",
xtype: "actionitemgrid",
resizable: true,
multiSelect: false,
enableDragDrop : false,
store: null,
columns:
[
{ header: "Pri", dataIndex: "pri", sortable: false, autoSizeColumn: true},
{ header: "Req", dataIndex: "request", sortable: false, autoSizeColumn: true}
],
viewConfig:
{
listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
if (column.autoSizeColumn === true)
column.autoSize();
})
}
}
}
});
Sample JSON File:
{
"actionitems" : [
{
"pri": 1,
"request": "2014-12-30T03:52:48.516Z"
},
{
"pri": 2,
"request": "2014-12-29T05:02:48.516Z"
}
]
}

You have error in code which creates task - you should provide function to run configuration property, not result of invocation. Try this:
var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
run: function() {
store.each(function (item)
{
var incReq = item.get('request') + 1;
item.set('request', incReq);
})
},
interval: 60000 // 1-minute interval
});
task.start();
You can put that code in loadActionItems method.

Show Row Details as a Popup/ToopTip form on Mouse Hover for each row in KendoUI Grid

I have a grid populated with data and
i want to show only 3 or 2 columns and hide rest of columns cause the grid goes very wide.
when the mouse is hovered over a row i want to show all the columns of that row as as popup /tooltip form.
Please help me with this. I searched a lot and only found out Editable popup and with button click not with hover.
function PopulateGrid() {
$("#recentNews").kendoGrid({
columns: [
{ field: 'Date', title: 'Date', width: 80,
template: '#=kendo.toString(toDate(NewsDate), "yyyy/MMM/dd") #'
},
{ field: 'TradeTime', title: 'Time', width: 60,
template: '#=kendo.toString(toDate(NewsTime), "hh:mm:ss") #'
},
{ field: 'Title', title: 'Description', width: 200 },
{ field: 'Country', title: 'Country', width: 40 },
{ field: 'Economy', title: 'Economoy', width: 40 }
],
dataSource: {
transport: {
read: {
url: 'Home/GetNews',
dataType: "json",
type: "POST"
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
}
},
pageSize: 100
},
// change: onChange,
// dataBound: onDataBound,
dataBound: HoverOnGrid,
pageable: true,
sortable: true,
scrollable: true,
height: 565,
width: 2000
});
}

There are two separate questions about what you are trying to implement:
Bind hover to the Grid rows (easy).
Generate a popup / tooltip that shows the rest of the columns (easy but requires some amount of coding).
Since it seems that you have already defined a function called HoverOnGrid lets write it as:
function HoverOnGrid() {
$("tr", "#recentNews").on("mouseover", function (ev) {
// Invoke display tooltip / edit row
var rowData = grid.dataItem(this);
if (rowData) {
showTooltip(rowData);
}
});
}
where grid is:
var grid = $("#recentNews").kendoGrid({
...
}).data("kendoGrid";
Now, the tricky question, how to show a tooltip / popup... There is no predefined way of doing it, you should do it by yourself. The closes that you can get is defining HoverOnGrid as:
function HoverOnGrid() {
$("tr", "#recentNews").on("click", function (ev) {
grid.editRow(this);
})
}
and the Grid initialization say:
editable: "popup",
But this opens a popup but with fields on edit mode (something that you can hack defining in the dataSource.schema.model that all fields are not editable:
model: {
fields: {
Date: { editable: false },
TradeTime: { editable: false },
Title: { editable: false },
Country: { editable: false },
Economy: { editable: false }
}
}
But it still shows update and cancel buttons in the popup.
So, my recommendation is writing a piece of code that creates that tooltip.
EDIT: For hiding the tooltip you should first intercept the mouseout event:
$("tr", "#recentNews").on("mouseout", function (ev) {
// Hide Tooltip
hideTooltip();
});
where hideTooltip might be something as simple as:
var tooltipWin = $("#tooltip_window_id").data("kendoWindow");
tooltipWin.close()
assuming that you are always using the same id for the tooltip (in this example, tooltip_window_id).