How to dynamically add the values in kendo Grid in editing state - javascript

In grid, I need to dynamically add a value to a column with a new row using a pop-up box. when I get dataSource I tried this method,
var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');
but it was useless. What should I do to achieve it? Thank you very much.
I look forward to your answer.

Please refresh your grid after changed value in data source.
Example : $('#Results').data('kendoGrid').refresh()

Related

How to add empty data row in Datatable using angular2+?

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}

kendo grid dataitem , how do i get items that are objects

I am trying to populate a Kendo list box from a kendo grid selection. The way it should work is that when a user selects the row a column in the grid will display that item in the list box. The problem I am having is that I cannot access the object in the dataitem I want to use. the object is visible and the fields inside it are correct I just need to be able to send that object to a list box where it looks for the valuefield and textfield.
I have been searching for a solution for a few days now. I am wondering really what I should be searching for at this point. I cant figure out what it is that will allow me to pull this object out of the dataItem to use it in my list box.The dataItem is [object(anonymous function)],The object inside the dataItem is:RolesLists [object(init)]. It is the RolesLists that I need to retrieve and send to the List Box. Nothing works as dataItem.RolesLists stays undefined.
I get the grid data in the grid , and I get the list box to send the data to in the second line. I then get the dataItem from the grid which gives me everything selected. I remove anything currently in the list box.Finally I add the dataItem, which should be dataitem.RolesLists. That comes up as undefined.
var grid = $('#grid').data('kendoGrid');
var listboxSelected = $('#selected').data('kendoListBox');
var dataItem = this.dataItem(grid.select());
listboxSelected.remove(listboxSelected.items());
listboxSelected.add(dataItem);
Well I figured it out I was making an error , my apologies for wasting everyones time. The code above was correct and you can use it if you wish to retrieve an item from a Kendo grid and populate any element with it.

Reset Webix datatable filter

I have a quite confusing question. I have a Webix datatable and trying to reset a filter (richSelectFilter) for a column. But it's acting not as I've expected. I tried
$$("table1").getFilter("title").config.value = "";
But nothing happens. Another attempt:
$$("table1").getFilter("title").config.value = "";
$$("table1").refreshColumns();
And filter was disappeared while values are still filtered!
Here's a short code snippet: http://webix.com/snippet/b34607aa
Am I doing something wrong? Will appreciate any help.
Try to use
$$("table1").getFilter("title").setValue("");
Here's a snippet http://webix.com/snippet/3eb45109
While you code will be correct for normal richselect control, filters in a datatable store the actual values in the column's config object. So you need to change it there, or just use the setValue API which will change value and will refresh the grid in the necessary way.

Angular JS add new row in editable mode

I am creating a grid using the ng-repeat directive. I need to be able to edit inline, which I achieved using the same idea provided here.
I now also need to be able to add new rows to this grid on click of a button. I am doing this by pushing a new entry to my collection on each button click, which inserts a new row into my grid. I want this new row to get added in editable mode. However, to do that, I need to be able to set the editMode property to true dynamically while pushing the new row. How can I achieve this?
JSFiddle: http://jsfiddle.net/Thw8n/69/
You did everything right, except binding to editMode field. Just change
data-ng-show="editMode"
to
data-ng-show="entry.editMode"
if i understand your problem in right way the following will be answer .
Just replace editMode with enty.editMode in your html handlebars.
I was applied this solution to the your jsfiddle it is working fine for me.

How to edit row of Telerik MVC grid in Javascript

I am trying to edit a cell's innerText property. The text is shown in the table but the problem is that the row isn't being marked as updated, so when I press my "Save Changes" button the update method doesn't get this row (in the list of rows to update).
I am trying to use this method (updateRow) but so far it has been unsuccessful:
var grid = ("#grid").data("tGrid");
var rowToUpdate = grid.data[0];
rowToUpdate.quantity = 4;
grid.updateRow(rowToUpdate);
When the method is called I get the following exception:
"object does not support this property or method".
in the source of telerik. Does anyone know how to mark a row as updated? Or a better way to update the value of cell in row?
You can use the client-side method updateRow to force updating. The key is selecting the table row you wish to update, as indicated in their example (of course, you don't have to use their $('#Grid .t-grid-edit-row') selector; you can use any selector, so long as it selects the row you wish to update). I believe that your modifying of the cell's innerHTML/innerText to communicate the new value is how its done.

Categories