Hi,
I have a datasource that is configured by a single call to a service. I want to make that call in my controller.
Then I want to bind that data to an infragistics/igniteUI table.
After that is done. I want to update or add entries to the table with javascript because I need realtime updates that I am currently handling through SignalR.
I thought this shouldn't be that hard. But I haven't been able to find an example where the datasource is bound in a controller or to a model passed into a view and then is updated with the javascript. It seems that the table is always bound to an HTML table or other HTML element if the table is later updated with javascript. This of course doesn't work for me since I need to pass in that initial dataset that is set in the controller or even if the grid is defined in the controller.
So is this possible? Do you know where I can find an example of this being done? Or can you show me what it would look like? I'll also be happy to provide code if you want more clarification.
Thanks in advance.
Hello Douglas,
Thank you for posting in our forum!
We have a similar example in our samples browser:
http://www.igniteui.com/grid/binding-real-time-data
Unfortunately you cannot see the backend in the sample code, but it’s basically a SignalR Hub class where random data gets generated over a certain period of time and the “updateData” client-side method is called to handle the updating of the related records in the UI.
To update the specific records updateRow API method is used:
http://www.igniteui.com/help/api/2016.2/ui.iggridupdating#methods:updateRow
You can download the full code of the samples as part of the trial download’s Platform Installer. The additional install option is called “Samples” and by default it installs the project at:
C:\Users\Public\Documents\Infragistics\2016.2\Ignite UI\Samples\IgniteUI.SamplesBrowser
You can then open the project in Visual Studio and explore the code.
Let me know if you have any questions or if you need a more isolated sample.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://www.infragistics.com/support
Hi Maya,
Thanks for the reply.
Please forgive me if my javascript skills are a little rusty but could I do something like the below code in theory?
The commented out section will successfully post updates underneath the grid but the update function that should add rows doesn't work.
When I try to set a breakpoint on it, it tells me that it is unreachable code which confuses me considering the line directly above it is reachable and when I comment it out and replace it with the commented section it executes.
Thanks in advance,
Douglas
<script>
$(function() {
$.connection.hub.logging = true;
$.connection.hub.start();
var status = $.connection.myHub;
status.client.addNewMessageToPage = function(MasterJobHistoryId,
MasterJobId, JobSchedulerId, JobStatus, JobMachineName,
JobFiscalDate, JobStartTime, JobEndTime, CreatedByPerson,
CreatedByDate, AdjustedByPerson, AdjustedByDate,
JobEndTimeThreshold, JobSourceId, MasterJobName) {
var $grid = $("#@ViewBag.GridID");
$grid.igGridUpdating('addRow', {
'MasterJobHistoryId': MasterJobHistoryId,
'MasterJobId': MasterJobId,
'JobSchedulerId': JobSchedulerId,
'JobStatus': JobStatus,
'JobMachineName': JobMachineName,
'JobFiscalDate': JobFiscalDate,
'JobStartTime': JobStartTime,
'JobEndTime': JobEndTime,
'CreatedByPerson': CreatedByPerson,
'CreatedByDate': CreatedByDate,
'AdjustedByPerson': AdjustedByPerson,
'AdjustedByDate': AdjustedByDate,
'JobEndTimeThreshold': JobEndTimeThreshold,
'JobSourceId': JobSourceId,
'MasterJobName': MasterJobName
});
// $('#output').append('<li>' + MasterJobHistoryId + ' ' + MasterJobId + ' '
// + JobSchedulerId + JobStatus + ' ' + JobMachineName + ' ' + JobFiscalDate + ' ' + JobStartTime
// + ' ' + JobEndTime + ' ' + CreatedByPerson + ' ' + CreatedByDate + ' ' + AdjustedByPerson + ' ' +
// AdjustedByDate + ' ' + JobEndTimeThreshold + ' ' + JobSourceId + ' ' + MasterJobName + '</li>');
//};
};
</script>
I've made a couple of changes and am reviewing some other code about setting up the ViewBag.GridID in the controller.
I now am getting the following error. 0x800a139e - JavaScript runtime error: cannot call methods on igGridUpdating prior to initialization; attempted to call method 'addRow'
That is strange since I think I am binding the ViewBag.GridID correctly and I have two existing rows in the grid and they display. Then once it handles an incoming message this triggers and it throws the above error.
Here is my controller code:
public ActionResult Index()
{
ViewBag.GridID = "dataGrid";
GridModel model = new GridModel();
model.ID = ViewBag.GridID;
model.Features.Add(new GridSelection());
model.Features.Add(new GridSorting());
model.Features.Add(new GridFiltering());
model.Features.Add(new GridRowSelectors());
model.Features.Add(new GridColumnMoving());
StaticJobStatusMessages.Add(new JobStatusMessage());
model.DataSource = StaticJobStatusMessages.AsQueryable();
return View(model);
}
And here is part of my view:
$("#@ViewBag.GridID").igGridUpdating('addRow', {
Last post!
Here is what the working version of the code looks like:
Controller:
model.PrimaryKey = "MasterJobHistoryId";
model.Features.Add(new GridUpdating());
View:
I’m glad to hear you’ve resolved your issue.
In case someone else stumbles upon the post, I’ll add some additional information on the differences between the working and non-working code.
For updating to work you’d need to have the igGrid Updating feature enabled:
Since Updating is not enabled by default in the grid and the related API method would not work without it.
And a valid PrimaryKey:
Since the primary key field determines the unique identifiers for each data record and Updating uses that identifier when determining which record is currently being edited.
The PrimaryKey should point to an existing column in the grid and the related values of the column should be unique.