Telerik MVC grid-How to Change "no record message" between ajax cals - telerik-mvc

I am using Telerik MVC grid ajax binding to show some records.
While the grid is loaded,the message in grid is "No records found".
When ajax cal is complete,then the message goes and data is loaded.
But this message of "No records found" till data is loaded is confusing to the user.
Can anyone tell me how to change this message as "Loading..." till the ajax cal is complete.
Thanks.

Do a search for the t-no-data class in your grid. Something like
$('#ReportGrid').find('.t-no-data td').text('Loading...');
should go in your grid's onLoad()

IMO, adding ".NoRecordsTemplate("Loading...")" to grid is better approach.
#(Html.Telerik().Grid<RatingListItem>()
.Name("Rating_Index_List")
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Score)
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.ListPageGridModel.DataRequestAction.ActionName, Model.ListPageGridModel.DataRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.ListPageGridModel.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.NoRecordsTemplate("Loading...")
)

Instead of using the NoRecordsTemplate, I suggest the following:
Add a clientevent to your grid: .ClientEvents(events => events.OnLoad("Grid_onLoad"))
Add a javascript function:
function Grid_onLoad(e) {
$('.t-no-data td').text('Loading');
}
That way if there are no records, the grid will still display the "No Records Found", but the user will see a "Loading" message during the ajax call.

You can use .NoRecordsTemplate for loading time with OnDataBound Event to specify when no records.
#Html.Telerik().Grid<ViewModel>().Name("Temp")
.NoRecordsTemplate("Loading ... Please Wait")
.ClientEvents(e => e.OnDataBound("onDataBound"))
Script Code
function onDataBound() {
$("tr.t-no-data td").html("No records to display");
}

Related

Ag-grid isRowSelectable conditional not activating

We have an Ag-Grid table with row selection via the built in checkbox functionality. The check boxes are conditionally displaying via the isRowSelectable options:
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.published === false : true;
}
The published column is being updated as part of a modal called from another column. A redrawRows is being called when the modal is closed:
modal.result.then(() => {
const row = params.api.getDisplayedRowAtIndex(params.rowIndex as number);
//this.gridApi?.redrawRows([row] as any);
this.gridApi?.redrawRows();
});
The display values in the row are being updated when the modal is closed, however, the checkbox is not appearing when the published value is set to false. If I hang a breakpoint in Dev Tools the isRowSelectable code does not appear to be hit.
Any suggestions would be much appreciated.
Cheers,
-John
Can you try this and see if it works?
let itemsToUpdate = [];
let data = rowNode.data;
// modify data fields
// Ex: data.field1 = "new value";
itemsToUpdate.push(data);
this.gridApi.applyTransaction({update: itemsToUpdate});
https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
Use refreshCells
this.gridApi?.refreshCells({force:true});
https://www.ag-grid.com/react-data-grid/view-refresh/#redraw-rows

Null selection error on Bryntum Kanban Task click

I am working on integrating the Bryntum Kanban board into an EXTJS application. In the top toolbar of the kanban, I have an ExtJS combobox that changes the view so that users can view their private taskboard as well as the taskboard for their groups. (Users can be in more than one group) When the view is changed, both the statestore that populates the columns of the taskboard and the userstore that populates the userpicker need to reload, as well as the taskstore. The problem is that after the view is changed, clicking on a task throws two errors:
Uncaught TypeError: can't access property "getRange", this.selected is null
ExtJS 2
relayMethod http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6471
map ExtJS
relayMethod http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6470
deselectAll http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6446
deselectAll http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7431
onDragStarting http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7532
ExtJS 4
getDragData http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:4896
ExtJS 86
ext-all-debug.js:200495:9
and
Uncaught TypeError: can't access property "getRange", this.selected is null
ExtJS 2
deselectAllInOtherSelectionModels http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6465
each ExtJS
forEachSelModel http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6475
deselectAllInOtherSelectionModels http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:6464
deselectAllInOtherViews http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7385
onTaskClick http://dev.southern-air.com/javascript/taskboard/taskboard-all-debug.js:7381
ExtJS 2
ext-all-debug.js:200495:9
Here is the code for the change listener on the combobox:
change: function (field, newValue) {
var ts = Ext.data.StoreManager.lookup('taskstore');
var ss = Ext.data.StoreManager.lookup('statestore');
var us = Ext.data.StoreManager.lookup('userstore');
var taskboard = field.up('mytaskboard');
console.log(taskboard);
ts.getProxy().setExtraParam('view', newValue);
ss.getProxy().setExtraParam('view', newValue);
us.getProxy().setExtraParam('view', newValue);
taskboard.deselectAll();
ss.reload({
callback: function () {
// taskboard.deselectAll();
taskboard.refresh();
us.reload({
callback: function () {
taskboard.userMenu.picker.refresh();
ts.reload({
callback: function () {
console.log(taskboard);
}
});
}
});
}
});
}
Is there anything that I need to do before I reload the stores to ensure that this error is not thrown? If anyone has also had this problem I'd appreciate your solutions. I have tried deselecting all before reloading, as you can see in the code above, but that doesn't help either.
After troubleshooting, I was able to find a solution that seems to be working. I had to add the following line to the change listener before reloading the stores:
delete field.up('mytaskboard').selModel;
This line deletes all the selection models from the taskboard, which were the things that were causing the problem in the first place. Now the views change and everything works as expected. I am still interested to know if this may cause other issues down the line though.

Copy to the Clipboard in Lightning Component

I'm creating Lightning Component that displays Classic version of the Current URL record page with a button that onclick copy to the clipboard that URL.
Just a simple functionality that saves time for Lightning Users, when they need to send a URL of the record to non-Lightning users.
Cmp:
<lightning:button class="slds-align_right slds-button slds-button_neutral" iconName="utility:copy_to_clipboard" variant="border-filled" label="Copy" onclick="{! c.copyClassic }"/>
<textarea readonly="true" id="urlClassic">https://name.my.salesforce.com/{!v.recordId}</textarea>
Controller:
({
copyClassic : function(cmp, event){
var urlClassic = document.getElementById('urlClassic');
urlClassic.select();
document.queryCommandSupported('copy');
document.execCommand('copy');
var source = event.getSource();
source.set('v.label', 'COPIED!');
setTimeout(function(){
source.set('v.label', 'Copy');
}, 2000);
} })
It is working on first copied page, but if I open in the same window new record, Textarea displays new URL (with the new record page) and button changed to 'COPIED!' but it's not selecting and copying new URL.
Does anyone has similar issue or idea to solve this problem?

get all dialogs in page in AEM

Is there any direct way to get dialog object of all components which are dragged on page.
For ex: when we load page and if there is any component like text, image are on page, I can get dialog. Please suggest?
Yes, it is possible. Attach a listener which listens to the editablesready event fired by WCM. Get all the editables on the page using the #getEditables() method of CQ.WCM and then get the dialog of each editable if it is present.
Sample code below.
CQ.WCM.on('editablesready', function() {
var editables = CQ.WCM.getEditables();
for(var path in editables) {
var editable = editables[path];
try {
console.log(editable.getEditDialog());
//Do stuff
} catch(e) { }
}
});

EXTJS Mouse click not working after load a page for multi time

I have a grid on my panel, named gridView, and gridView is in panel named panelMain, by dbclick listener on grid row, I load a from by doing something like this:
listeners:{
itemdblclick: function(dataview, index, item, e) {
/* I did not create new studentForm every time.*/
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
editStudent.getForm().load({
url: 'studentDetails.php',
params: {studentId: studentId},
method:'GET',
success: function (form, action) {
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
panelMain.update();
panelMain.doLayout();
},
failure: function (form, action) {
/// do nothing
}
});
}
After I edited the student I should come back to grid page, so I do something like this:
var panelMain = Ext.getCmp('panelMain');
var gridView = Ext.getCmp('gridView');
panelMain.items.clear();
panelMain.add(gridView);
panelMain.update();
panelMain.doLayout();
The problem is when I come back to the grid, it does not fire any itemdbclick event any more (it's like the grid is just an image in page, no event fires).
And sometimes when I go to edit studentForm and come back grid work, but when I go to student form again, the student page does not fire any event, when I click edit button, I do not get any answer, I cant see even on mouse hover (that causes changes on button color).
What is the problem here?
I use Extjs 4 and Extjs MVC.
I have one Controller for grid and edit student page.
I think your misunderstand the success config on form.
Try:
listeners:{
itemdblclick: function ( gridView, record, item, index, e, eOpts ) {
var editStudent = Ext.getCmp('editStudent');
if(editStudent == undefined)
editStudent = Ext.create('H.view.EditStudent');
/* Load record in the form.
Form must have on formfields property: 'name' equals to 'dataIndex' */
editStudent.getForm().loadRecord(record);
var panelMain = Ext.getCmp('panelMain');
panelMain.items.clear();
panelMain.add(editStudent);
}
success and failure are the callbacks functions for the submit function.
a) You are not using MVC pattern here. With what Sencha calls MVC, you would have all this code in a Controller instead of event listener.
b) I strongly suspect that this code causes deadlocks somewhere, with events firing so rapidly in succession that browser just freezes. You need to use debugger to see what exactly happens.

Resources