I want to edit row of data table(which is coming from some rest api call,the data in datatable is populated through angular js).
My Question is I need to add one input field in each row and when I submit then all the data will go and save in the database.So can you guys help me adding input field and when I submit then how to get all the datatable data and make a JSON request.
enter image description here
Please refer the image and I need to add input field in notes column and when press save button then it should take all the 7 datas in datatable and make a json request.
javascript Code:
vm.dataTableInstance = $('.datatable-basic').DataTable({
data : priorityAttrs,
columns : [
{ data: 'priority', title : 'Priority', width : '10%' },
{ data: 'attrName', title : 'Attribute Name', width: '30%' },
{ data: 'notes', title : 'Notes' },
{ data: null, orderable : false, width:'5%', render : function(data, type, row){
return '<ul class="icons-list"><li class="delete-user text-danger-600" onclick="angular.element(this).scope().deleteAttribute(this, \''+data.attrName+'\')"><a><i class="icon-trash"></i></a></li></ul>';
}}
],
});
You can use Angular-Xeditable for add data tables. please refer this document.
install xeditable
bower install angular-xeditable
Include angular-xeditable into your project
add "xeditable" to dependencies
var app = angular.module("app", ["xeditable"]);
Related
In my ASP.net MVC web project, I am using ANgularJS ui-grid for better data display option.
In the other razo view pages I have used partial view load
<partial name="TestPartialView" model="data.TestPartialData" />
Now in the ui-grid, in a column I also want to use the partial view.
```$scope.columns = [
{
name: 'TestColumn',
field: '..xxx',
width: '30%',
cellTemplate: 'Templates/TestPartialView.cshtml'
},] ```
But I really dont know how to do this. Also in my TestPartialView.cshtml, I need to inject a model class.
As a current alternative, I have defined the template again in the javascript file.But I want reuse the template.
Any idea?
Update:
So the above screenshot is my scenario. I will have a grid column statistics. And in the cell I will show bar chart based on some row specific model data.
Yes I have done this (as seen on the picture) with column definition.
Now the similar bar chart I have used a .cshtml file where a model class is passed and the view is loaded partially.
I want to reuse the partial view her in the grid also.
I think you can create a Controller to return your target View. And then you call this endpoint to obtain the view as the response and add it into your cellTemplate.
$http.get("https://localhost:44391/Home/GetTemplateFromPartial")
.then(function(response) {
$scope.columns = [
{
name: 'TestColumn',
field: '..xxx',
width: '30%',
cellTemplate: $sce.trustAsHtml(response.data)
}];
console.log($scope.columns);
});
The Controller will return IActionResult
public IActionResult GetTemplateFromPartial()
{
LocalMallUser user = new LocalMallUser
{
id = 1,
age = 18,
user_name = "test_user"
};
return PartialView("_SayHello", user);
}
_SayHello.cshtml:
#model WebApplication1.Models.LocalMallUser
<h1>#Model.user_name</h1>
<h2>#Model.age</h2>
Using Kendo AngularJS and ASP .NET MVC I am trying to send the filters object of a grid to the backend. However any filters made on the frontend are null in the request even though I set serverFiltering to true.
grid.dataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "api/foo",
dataType: "json",
type: "POST"
}
},
schema: {
data: "data", // records are returned in the "data" field of the response
total: "total"
}
});
//set grid to filterable
grid.filterable = {
mode: 'row',
operators: {
string: {
contains: "contains"
}
}
};
I took a look at a similar question but it did not help me as I wasn't able to replicate the solution listed as the accepted answer
On the controller side the "DataSourceRequest" mapped out the form values differently (e.g. inspecting the POST request on the frontend sent "filter" instead of "Filters" as an argument. I had to create a new model class that binded the proper values
I have a grid that displays a comma-separated list of values, and it has an array that gets used in a template editor for the grid. (On the server, I transform the comma-separated list to an array for the Kendo multiselect AngularJS directive). I have almost everything working: display, edit, and adding values in the multiselect.
There's just one weird thing happening: after I add a value in the multiselect, click Save in the editor, and reopen the editor, the multiselect then only displays one of the most-recently entered values. I know that the values are there and going through the pipeline, because the values make it into the database. I can refresh the page, open the editor, and all the values display in the multiselect correctly, including the one I just added.
It's as if kendo "forgets" most of the values when I reopen the editor. How can this be prevented? Does the MultiSelect need to be rebound to the values? If so, how?
I have tried adding this onChange event, but it had no effect. I've added valuePrimitive to no effect. I tried specifying k-rebind, but it caused an error.
Here's the directive being used in the text/x-kendo-template:
<select kendo-multi-select
id="zipCode"
k-placeholder="'Enter zip codes...'"
style="width: 225px"
k-on-change="dataItem.dirty=true"
k-auto-bind="false"
k-min-length="3"
k-enforce-min-length="true"
k-data-source="options.zipCodeDataSource"
k-data-text-field="'text'"
k-filter="'startsWith'"
k-filtering="options.zipCodeFiltering"
k-no-data-template="'...'"
k-ng-model="dataItem.zipArray"
k-highlight-first="true" />
And this is the DataSource:
options.zipCodeDataSource = new kendo.data.DataSource({
severFiltering: true,
transport: {
read: {
url: serviceUrl + "ZipCode/Get",
type: "GET",
dataType: "json",
contentType: jsonType,
data: function (e) {
// get your widget.
let widget = $('#zipCode').data('kendoMultiSelect');
// get the text input
let filter = widget.input.val();
// what you return here will be in the query string
return {
filter: filter
};
}
},
},
schema: {
data: "data",
total: "Count",
model:
{
id: "text",
fields: {
text: { editable: false, defaultValue: 0 },
}
},
parse: function (response) {
return response;
}
},
error: function (e) {
}
});
If I display {{dataItem.zipArray}} in a <pre> all of the expected values are there.
I wonder if something needs to be added to the edit event handler in the kendo grid definition, but I'm not sure what it would be. I've had to do binding like that for the dropdownlist directive.
edit: function (e) {
if (e.model.marketId === 0) {
e.container.kendoWindow("title", "Add");
} else {
e.container.kendoWindow("title", "Edit");
}
// re-bind multi-select here??
// These two lines actually cause the multiselect to lose pre-existing items in dataItem.zipArray
// var multiselect = kendo.widgetInstance(angular.element('#zipCode'));
// multiselect.trigger('change');
}
...
Update:
This dojo demonstrates the issue.
Run the dojo
Edit the first record in the Contracts grid
Add a zip code such as 22250
Click Save
Then click Edit on the first row again
Only zip code 22250 is displayed in the editor
Also, I notice that if I change k-min-length="3" to k-min-length="1", then the issue goes away. But in the scenario I'm working on, it needs to be 3.
This seems to be an issue with kendo itself. Back then this issue was reported here.
Ok based on the reply from telerik, this issue has been fixed in 2017 R3 SP1 release (2017.3.1018). You can verify it by using this updated dojo example:
http://dojo.telerik.com/IREVAXar/3
I need to change the value in a particular row wise column value in ui grid i.e., from Inactive to active status
I have a table in ui grid like
ID Name Status
1 India Active
2 Germany Inactive
3 France Active
4 Italy Active
5 Canada Inactive
My grid code
$scope.gridOptions = {
columnDefs: [
{
field : 'name',
displayName : 'Name',
width : '25%',
enableColumnMenu : false,
sort : {
direction : uiGridConstants.ASC
},
cellTemplate : '<div class="ngCellText" ng-class="col.colIndex()" ng-controller="NameController"><a ng-click="editPop({{row.entity}})">{{COL_FIELD}}</a></div>'
}, {
field : 'status',
displayName : 'Status',
width : '25%',
enableColumnMenu : false,
cellTemplate: '<div ng-controller="StatusController" ng-if=\"row.entity.status == \'Active\'\" ><img src=\'assets/img/on.png\' /><a ng-click="checkStatusDepend(row.entity.id,row.entity.name,row.entity.status)">Active</a></div>'+
'<div ng-controller="StatusController" ng-if=\"row.entity.status == \'Inactive\'\" ><img src=\'assets/img/off.png\' /><a ng-click="checkStatusDepend(row.entity.id,row.entity.name,row.entity.status)">Inactive</a></div>'
}
],
data: 'myData'
};
For calling this grid
getPage();
var getPage = function(obj) {
object.charge({}, function(list){
$scope.myData = list.data;
});
};
I am getting the list in myData so it is displayed in ui grid table.
I am updating the status in status controller
$rootScope.$emit("statusUpdateCall",id);
and for changing the value in another controller
$rootScope.$on('statusUpdateCall', function(events, args){
getPage();
});
I want to change for ID no 2 status Inactive to Active, in backend using rest spring i am updating in database but in frontend i need to change it to Active.
Currently i load the data from beginning.
I have gone through the angularjs ui grid tutorial using splice it removes particular row and add a new row with new changed data.
But without splice is there any other options are there to update particular column value?
I have a model defined on the client.
module Shared{
export class HotelType{
ID : number;
Description : string;
}
export class Hotel{
ID : number;
Type : HotelType
}
}
I am using ngGrid to display the data.
What I do in my controller is very simple. Call the service and populate the data in the ng grid.
this.$scope.gridOptions = {
data: 'hotels',
columnDefs: [{ field: 'ID', displayName: 'HotelID' },
{ field: 'Type.Description', displayName: 'Description' }],
multiSelect: false,
selectedItems: []
};
ServiceManager.CallMethod(...)
.success((hotels) => {
this.$scope.hotels= hotels;
});
All my hotels are of the same type. First row in the grid if fine.
10 - Best hotel
but the description in other rows is empty
11 -
12 -
When looking at what I get from my service I noticed I get an array of Hotels which is fine.
hotels[0].Type is a object with an $id = 2 and has all the properties (Description : "Best hotel" etc..)
But, hotels[1].Type only has one property $ref "2".
And it is the same with all other types in other hotels.
I believe this is the reason why ng grid is displaying a description in only first row.
Does anyone know how this can be fixed?
I would like to see description in all of the row of ng grid..
Thank you.