how to add data in a row or kendo Grid - javascript

I have a scenario where I want to fill some of the kendo grid columns by program. So I assume that I have to catch the row and fill data in the columns.
I am able to fetch the row ID based on some event(click for example). But I have no Idea how to update the value of a column bases on row id pragmatically.
http://jsfiddle.net/xojke83s/4/
above is the JS fiddle where I am able to get the row ID of a particular row. I want to know the way fill some data in any of the column by program. In the above example that column should be operationContext.
following is the code for same -
<div id="grid"></div>
$("#grid").kendoGrid({
"dataSource": {
"schema": {
"model": {
"id": "id",
"fields": {
"OperationContext": {
"type": "string",
"editable": "false"
}
}
}
}
},
"editable": "popup",
"toolbar": [
{
"name": "create",
"text": "Add a New Record"
}
],
"columns": [
{
"field": "Name",
"title": "Name"
},
{
"field": "Age",
"title": "Age"
},
{
"field": "OperationContext",
"title": "Operation Context"
},
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]
});
$(".k-grid-add").on("click", function () {
var grid = $("#grid").data("kendoGrid").dataSource.data([{OperationContext: "IsAdded"}]);
});
//bind click event to the checkbox
var grid = $("#grid").data("kendoGrid"); 
grid.bind("edit", grid_edit);
function grid_edit(e){
console.log(e.model.uid);
}
Thanks in advance.

Answer made from comment as requested
I have updated your fiddle with this: updated js fiddle
I have modified the edit code to do this:
function grid_edit(e){
console.log(e.model);
if(!e.model.isNew() || e.model.id === 0){
e.model.set("OperationContext","I am being updated");
}
}
It will only add the inserting (defaultValue) and updating text in for new items or where an id is greater than 0.
I can see the logic for newly created items and maybe for edited items if the value is blank or if it is being used as a status tracker.
But if you delete an item then surely that is deleted from your datasource and you will no longer have access to that item so why store an update/indicate an update to a value when it is to be deleted.

Related

Alpaca JS is not properly reordering array checkboxes

I have an Alpaca JS form comprised of an array of items which each consist of a textbox and a checkbox. For some reason, when I change the order using the dynamic controls, it successfully renumbers the textbox but doesn't change the number of the checkbox. This also results in a duplicate name assigned if the same top button to dynamically add new fields is pressed. The end result is incorrect data being passed when the form is submitted. How can I fix this to properly renumber the checkboxes?
Here's a sample of the Alpaca configuration:
$("#form1").alpaca({
"schema": {
"title": "Testing checkbox array IDs",
"description": "Testbox checkbox array test.",
"type": "object",
"properties": {
"form-fields": {
"title": "Fields",
"description": "These are the fields.",
"type": "array",
"items": {
"type": "object",
"properties": {
"field-name": {
"type": "string",
"title": "Field Name",
"description": "Enter the name for this field.",
"required": true
},
"field-box": {
"type": "boolean",
"title": "Field Box",
"description": "Check this box.",
"default": false
}
}
}
}
}
}
});
I couldn't find a way to correct the behavior itself but I was able to work around it by adding a postRender event to the Alpaca definition as follows:
"postRender": function(control) {
control.childrenByPropertyId["form-fields"].on("move", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("add", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
control.childrenByPropertyId["form-fields"].on("remove", function() { $('input[type=checkbox]').each(function(index) { $(this).attr("name", $(this).closest("div:has(*[name])").first().attr("name")) }); });
}
This is a bit of a hack but it works because the parent object does get assigned the correct name value and the form will post with those values if the name is just copied down into the input elements.

JS datatabe with Array edit

I has create HTML page, with user entry data in page then upload to SQL server.
I has study DataTable to load array to table, try edit still not , has any one can help?
var array = ['54 GR', '89 GR', 'Internal Transfer', 'Putaway']
$('#example').DataTable({
data: array,
"searching": false,
columns: [{
"data": 0,
"title": "Date"
}, {
"data": 1,
"title": "Account"
}, {
"data": 2,
"title": "Type"
}, {
"data": 3,
"title": "OPDeployed",
"render": function(data, type, row, meta) {
return "<input type='text' value=''/>";
}
}]
});
Its really difficult to say without being able to see the page or even the code. All I can really say is that the load order should be:
jQuery
jQuery UI
DataTables
2 and 3 can be swapped and you shouldn't load more than one of each.

Unable to select rows programatically in drawCallback() of DataTables

I am using the latest datatables with select extension. I am trying to select multiple rows programatically after the table is rendered. I am trying to achieve this in the drawCallback() as below:
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name",
"drawCallback": function( settings ) {
var api = new $.fn.dataTable.Api( settings );
api.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
}
});
But, I am getting an Uncaught TypeError: Cannot read property 'style' of undefined error.
Here is the link for live version - http://live.datatables.net/yemiqafu/2/
P.S: I have used [id='Bradley Greer'] as selector since there is a space in the id. I had to do this for live demo and this is not the reason for the error that is thrown.
SOLUTION
Option drawCallback is not a correct place to perform row selection.
Ideally, you should use initComplete option instead, but there was an issue with Select extension that was fixed 10/7/15 which prevented Select to work in initComplete. Until then you can use the workaround below for HTML sourced data or use nightly build of DataTables and Select extension.
For table with data from HTML source you can select your rows after DataTables initialization.
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name"
});
table.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
DEMO
See this example for code and demonstration of a workaround for table with HTML sourced data.
See this example for code and demonstration of using nightly JS/CSS builds for table with Ajax sourced data. This example could be used for HTML sourced data as well.

It is possible to transform a Mysql select onto a Dataset with pure Jquery?

i'm using Sqlite with local database storage for google chrome browser.
My query is like the next...
var query = "SELECT * FROM items;";
In my table i have 6 field data
i already have a table in my html wiht id="example" and loading the head directly from the script as:
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Date" },
{ "title": "Number" },
{ "title": "Name" },
{ "title": "Slogan" },
{ "title": "Description", "class": "center" },
{ "title": "Amount", "class": "center" }
]
});
What i need is the "Dataset" variable become the SQL arrays like
var dataSet = [
['field1','field2','field3','field4','field5','field6'],
['field1','field2','field3','field4','field5','field6'],
['field1','field2','field3','field4','field5','field6']
.
.etc
.etc
.
];
Here's the example of what i want to use https://www.datatables.net/examples/data_sources/js_array.html
All is local so i don't have PHP server to do that in other way.
Thanks for your answers.

Json value not getting binded to kendo dropdown

Im reading values from a javascript file. Im trying to bind a particular field into a kendo dropdown. i'm able to read the values but i could't assign them in the kendo dropdownlist.
var json = [
{
"Type": "ABC",
"Icon": "Ro.png"
}
},
{
"Type": "DEF",
"Icon": "Po.png",
}
}];
HTML :
<select id="ListCurrencyDiv" class="testdiv"> </select>
Function:
function BindValue() {
$(".testdiv").kendoDropDownList({
dataSource: {
transport: {
read: function (BindValue) {
operation.success(json);
}
}
},
dataTextField: "Type",
dataValueField: "Type",
value: "No notification"
});}BindValue();
First, fix your json object:
var json = [
{
"Type": "ABC",
"Icon": "Ro.png"
},
{
"Type": "DEF",
"Icon": "Po.png",
}];
Now that it becomes valid, try reading it directly in the dataSource option:
dataSource: json,
If this first demo from Kendo and your code are right, it should work.

Categories

Resources