Difficulty with upload csv to knockout js table (ASP MVC) - asp.net-mvc

I've been working with these two tutorials, but am having difficulty merging them together to get an upload csv to populate the table. It most likely is my lack of understanding of the view model.
Here's the tutorial for the knockout js editable table from the knockout js site: KnockoutJS: Editable Grid Table
And here's the tutorial for uploading a csv I'm referencing:
KnockoutJS - Upload CSV
Here's the javascript code I've been working on to upload a csv to my table. I keep getting "JavaScript runtime error: Unable to get property 'push' of undefined or null reference" - I marked in comments the problem spot. As you can see, I'm having trouble with the view model.
<script>
var UserModel = function (users) {
var self = this;
self.users = ko.observableArray(users);
self.addUser = function () {
self.users.push({
id: "",
firstName: "",
lastName: ""
});
};
self.removeUser = function (user) {
self.users.remove(user);
};
self.save = function (form) {
sendData = ko.toJSON(self.users);
$.ajax({
url: '/Users/CreateMultiple',
contentType: 'application/json',
async: true,
type: 'POST',
dataType: 'json',
data: sendData,
error: function (jqXHR, textStatus, errorThrown) {
console.log("FAIL: " + errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log("SUCCESS");
}
});
};
};
var viewModel = new UserModel([
{ id: "", firstName: "", lastName: "" }
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
/////
/////Upload CSV
/////
$('#lnkUpload').click(function () {
var FileToRead = document.getElementById('UserFile');
if (FileToRead.files.length > 0) {
var reader = new FileReader();
reader.onload = Load_CSVData;
reader.readAsText(FileToRead.files.item(0));
}
});
function Load_CSVData(e) {
CSVLines = e.target.result.split(/\r\n|\n/);
$.each(CSVLines, function (i, item) {
var element = item.split(",");
var csvID = (element[0] == undefined) ? "" : element[0].trim();
var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
UserModel.users.push(new UserModel()//here's my problem
.id(csvID)
.firstName(csvFirstName)
.lastName(csvLastName)
)
});
}
</script>

I was able to identify the fully qualified for the observable array which in turn made it work:
function Load_CSVData(e) {
CSVLines = e.target.result.split(/\r\n|\n/);
$.each(CSVLines, function (i, item) {
var element = item.split(",");
var csvID = (element[0] == undefined) ? "" : element[0].trim();
var csvFirstName = (element[1] == undefined) ? "" : element[1].trim();
var csvLastName = (element[2] == undefined) ? "" : element[2].trim();
viewModel.users.push({
id: csvID,
firstName: csvFirstName,
lastName: csvLastName
});
}

Related

Select2 doesn't work change value from jQuery (dataAdapter)

I have a huge json data source (over 50,000 + lines) loaded in memory from a static file.
Note: It's not important why I have it in a static file.
I use select2 (v 4.0.5) that initializes as:
function initSelect2(selectName, dataSelect) {
var pageSize = 20;
$.fn.select2.amd.require(["select2/data/array", "select2/utils"],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
if (!("page" in params)) {
params.page = 1;
}
var data = {};
data.results = dataSelect.slice((params.page - 1) * pageSize, params.page * pageSize);
data.pagination = {};
data.pagination.more = params.page * pageSize < dataSelect.length;
callback(data);
};
$('#mySelect3').select2({
ajax: {},
dataAdapter: CustomData,
width: '100%'
});
});
}
I have one big problem. I can not set the value to select from jQuery. If I try like this:
$ ("#mySelect3").val(17003).trigger("change");
nothing will happen. But I think I'm doing it badly. If I understand the documentation I think I should implement function:
CustomData.prototype.current = function (callback) {}
that should create the data, and then function:
CustomData.prototype.query = function (params, callback) {}
should only filter them.
Can you please help me, how do I implement select2 initialization, that can work with many options and can by set from jQuery?
With custom data adapter you don't need pagination :
// create huge array
function mockData() {
var hugeArray = [];
for (let i = 0; i < 50000; i++) {
el = {
id: i,
text: 'My mock data ' + i,
};
hugeArray.push(el);
}
return hugeArray;
};
// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter",
['select2/data/array','select2/utils'],
function (ArrayData, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
};
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
var data = {
// here replace mockData() by your array
results: mockData()
};
callback(data);
};
return CustomData;
}
);
//
$('#mySelect3').select2({
allowClear: true,
// use dataAdapter here
dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});
And with search you can do like this :
// create huge array
function mockData() {
var hugeArray = [];
for (let i = 0; i < 50000; i++) {
el = {
id: i,
text: 'My mock data ' + i,
};
hugeArray.push(el);
}
return hugeArray;
};
// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter",
['select2/data/array','select2/utils'],
function (ArrayData, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
};
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
var data = {
// here replace mockData() by your array
results: mockData()
};
if ($.trim(params.term) === '') {
callback(data);
} else {
if (typeof data.results === 'undefined') {
return null;
}
var filteredResults = [];
data.results.forEach(function (el) {
if (el.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
filteredResults.push(el);
}
});
if (filteredResults.length) {
var modifiedData = $.extend({}, data, true);
modifiedData.results = filteredResults;
callback(modifiedData);
}
return null;
}
};
return CustomData;
}
);
//
$('#mySelect3').select2({
minimumInputLength: 2,
tags: false,
allowClear: true,
// use dataAdapter here
dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});
I had the same issue and this is how I solved it.
Note: We are using dataAdapter because we dealing with large that, so I am assuming your drop-down will contain large amount of data.
After implementing your DataAdapter with a query use this example to initialize your select2.
if(selectedValue !== null )
{
$("#item_value").select2({
placeholder: 'Select an option',
allowClear: true,
disabled: false,
formatLoadMore: 'Loading more...',
ajax: {},
data: [{ id: selectedValue, text: selectedValue }],
dataAdapter: customData
});
$("#item_value").val(selectedValue).trigger('change');
}else{
$("#item_value").select2({
placeholder: 'Select an option',
allowClear: true,
disabled: false,
formatLoadMore: 'Loading more...',
ajax: {},
dataAdapter: customData
});
}
To set selected value in select2 you need to pass some data into data option, but as we are dealing with large amount of data. You can't pass the complete array of large data you have as it's going to cause your browser window to freeze and lead to a bad user performance.
But instead set the data option only with the selected value you got from db or variable.
I hope this helps.

Devexpress MVC5 Grid GetRowKey(e.visibleIndex) returns always null

Hi everyone I am trying to get the primary key of the selected row to send it to the server later here is the code:
This the mainpage
<script type="text/javascript">
function OnRowClick(s, e) {
var grid = MVCxClientGridView.Cast(s);
var key = grid.GetRowKey(e.visibleIndex);
console.log(key);
$.ajax({
url: '#Url.Action("FundDetails", "Fund")',
type: "POST",
dataType: "text",
traditional: true,
data: { rowKey: key },
success: function (data) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
alert('Request Status: ' + xhr.status + '; Status Text: ' + textStatus +
'; Error: ' + errorThrown);
}
});
}
</script>
<div>
#Html.Partial("_FundsList", Model)
</div>
And this is the partial view that contains the Grid
#Html.DevExpress().GridView(settings =>
{
settings.Name = "FundGrid";
settings.CallbackRouteValues = new { Controller = "Fund", Action =
"FundsList" };
settings.Width = 450;
settings.Columns.Add("codeIsin");
settings.Columns.Add("fundLabel");
settings.Columns.Add("variation");
settings.Columns.Add("ClassNiv1");
settings.SettingsBehavior.AllowSelectByRowClick = true;
settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
settings.ClientSideEvents.RowClick = "OnRowClick";
}).Bind(Model).GetHtml()
the problem is that the key value is always null:
var key = grid.GetRowKey(e.visibleIndex); ==> always Null
PS : e.visibleIndex is not null.
The GetRowKey method explains how null value returned:
If the index passed via the visibleIndex parameter is wrong, or the
ASPxGridBase.KeyFieldName property is not set, null is returned.
It is possible that you need to set KeyFieldName which refers to primary key and/or identity field (with unique value) in the GridView, like this example:
#Html.DevExpress().GridView(settings =>
{
settings.Name = "FundGrid";
settings.CallbackRouteValues = new { Controller = "Fund", Action = "FundsList" };
settings.Width = 450;
settings.Columns.Add("codeIsin");
settings.Columns.Add("fundLabel");
settings.Columns.Add("variation");
settings.Columns.Add("ClassNiv1");
// set primary/identity key field to determine selected row index
settings.KeyFieldName = "codeIsIn";
settings.SettingsBehavior.AllowSelectByRowClick = true;
settings.SettingsBehavior.AllowSelectSingleRowOnly = true;
settings.ClientSideEvents.RowClick = "OnRowClick";
}).Bind(Model).GetHtml()
Also you can put null value checking with if condition before executing AJAX call to ensure key field value passed properly:
var key = grid.GetRowKey(e.visibleIndex);
if (key != null)
{
$.ajax({
url: '#Url.Action("FundDetails", "Fund")',
type: "POST",
data: { rowKey: key },
// other AJAX settings
success: function (data) {
// do something
},
error: function (xhr, textStatus, errorThrown) {
// error handling
}
});
}

How to save data into smart table in UI5?

I have a smart table which has editable fields, I want to save these multiple records in the backend. How should I achieve this?
oModel.create("/Set", [{obj1}, {obj2}])
oModel.createBatchOperation("/set", "POST" , obj1)
oModel.createKey("set" , obj)
oModel.submitChanges()
All of them
use batch call, giving
same error -- 400 -- XML parse error.
If you are using sap.ui.model.odata.v2.ODataModel use below code
var oModel = this.getView().getModel();//gets the v2 odata model
oModel.setUseBatch(true);//setting batch true if not already set
var jModel = oTable.getModel("jTabModel").getProperty("/Carriers");
for (var i = 0; i < jModel.length; i++) {
var oEntry = jModel[i];
oModel.create("/FlightSet", oEntry, {
method: "POST",
success: function(data) {
},
error: function(e) {
}
});
}
oModel.submitChanges({
success: function(data, response) {
//To do
},
error: function(e) {
//To do
}
});

Error in angular Controller

Below is my code in AngularJS. i have created controller but i am getting error :
Error: [ng:areq] Argument 'forgetController' is not a function, got
undefined
app.controller("forgetController", function ($scope, forgetService) {
$scope.OperType = 1;
// 1 MEANS NEW ENTRY
GetAllUserRecords();
function GetAllUserRecords() {
debugger;
var promiseGet = userService.GetUserRecords();
promiseGet.then(function (p1) { $scope.User = p1.data }, function (err) {
console.log("Error");
});
}
$scope.submit = function () {
debugger;
var user = {
FirstName: $scope.FirstName,
LastName: $scope.LastName,
Email: $scope.Email,
Password: $scope.Password,
Phone: $scope.Phone,
Postcode: $scope.Postcode,
Address: $scope.Address,
Street: $scope.Street,
Town: $scope.Town,
CreateDate: new Date()
};
if ($scope.OperType === 1) {
var promisePost = userService.AddUser(user);
promisePost.then(function (p1) {
GetAllUserRecords();
alert("New Record Inserted");
$("#addUserTable").css('display', 'none');
clearClientDetail();
}, function (err) {
console.log("Error");
});
}
}
function clearClientDetail() {
$("#FirstName").val('');
$("#LastName").val('');
$("#Email").val('');
$("#Password").val('');
$("#Phone").val('');
$("#Postcode").val('');
$("#Address").val('');
$("#Street").val('');
$("#Town").val('');
}
});
i am stuck over here, i google everything but i do not get any result.
Add this line of code just above controller code
var app = angular.module('myapp', ['forgetService']);

Checking if all data has been returned from server in Knockout

I am displaying data from the user on the user page and i would like to notify the user once all the data has been loaded and there is no more data to retrieve from the server using knockout.
Knockout script
$.views.Roster.GetPage = function ( pageNumber) {
$.grain.Ajax.Get({
Url: Views.Roster.Properties.Url,
DataToSubmit: { pageNumber: pageNumber, id: Views.Roster.Properties.Id },
DataType: "json",
OnSuccess: function (data, status, jqXHR) {
$.views.Roster.RosterViewModel.AddUsers(data);
},
OnError: function (jqXHR, status, errorThrown) {
var _response = $.parseJSON(jqXHR.responseText);
$.pnotify({ title:_response.title, text: _response.Message, type: _response.TypeString});
}
});
};
$.views.Roster.ViewModel = {
RosterUsers: ko.observableArray([]),
TotalRoster: null,
CurrentPage: ko.observable(1)
};
$.views.Roster.BindModel = function (data) {
var self = $.views.Roster.ViewModel;
$.views.Roster.ViewModel.TotalRoster = ko.computed(function () {
return self.RosterUsers().length;
});
$.views.Roster.RosterViewModel.AddUsers(data);
ko.applyBindings($.views.Roster.ViewModel);
}
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage(_page);
};
$.views.Roster.RosterViewModel = function (data) {
$.views.Roster.RosterViewModel.AddUsers(data);
};
$.views.Roster.RosterViewModel.AddUsers = function (data) {
$.each(data, function (index, value) {
$.views.Roster.RosterViewModel.PushUser(value);
});
};
$.views.Roster.RosterViewModel.PushUser = function (user) {
$.views.Roster.ViewModel.RosterUsers.push(new $.views.Roster.UserViewModel(user));
};
When you say 'once all the data has been loaded', I assume you mean when the GetPage method finishes loading a single page of users, as that is the only data loading that I see in the code above. Here is one way you can do it:
First, create an observable somewhere that you can bind to to tell the user if data is loading
$.views.Roster.ViewModel = {
RosterUsers: ko.observableArray([]),
TotalRoster: null,
CurrentPage: ko.observable(1),
DataIsLoading: ko.observable(false)
};
And add some markup that shows something in the UI when data is loading
<div data-bind="visible:DataIsLoading">Data is Loading, please wait...</div>
Then set DataIsLoading before you make the ajax call, then reset it when the call is done
$.views.Roster.GetPage = function ( pageNumber) {
$.views.Roster.ViewModel.DataIsLoading(true); // Add this!
$.grain.Ajax.Get({
Url: Views.Roster.Properties.Url,
DataToSubmit: { pageNumber: pageNumber, id: Views.Roster.Properties.Id },
DataType: "json",
OnSuccess: function (data, status, jqXHR) {
$.views.Roster.RosterViewModel.AddUsers(data);
$.views.Roster.ViewModel.DataIsLoading(false); // Add this!
},
OnError: function (jqXHR, status, errorThrown) {
var _response = $.parseJSON(jqXHR.responseText);
$.pnotify({ title:_response.title, text: _response.Message, type: _response.TypeString});
$.views.Roster.ViewModel.DataIsLoading(false); // Add this!
}
});
};

Resources