I load data via an ajax call in dataInit which works and everything works fine BUT none of my columns (only dropdown columns) don't set the id value.
e.g. I have itemId and itemCode properties. I load the data and displays correctly but if I change the value in the drop down then it doesn't bind/update my itemId value.
Essentially I want the dropdown to bind to my id column thus when saving it I get an Id to save.
,{
key: false,
hidden: true,
name: 'itemId',
index: 'itemId',
editable: false
}, {
key: false,
name: 'itemCode',
index: 'itemId',
editable: true,
edittype: 'select',
editoptions: {
dataInit: function(element) {
$.ajax({
url: '#Url.Action("GetItems", "Maintenance")',
dataType: 'json',
type: 'POST',
success: function(response) {
var array = response;
if (array != null) {
var i;
for (i in array) {
if (array.hasOwnProperty(i)) {
if (itemId == array[i].id) {
$(element).append("<option value=" +
array[i].id +
" selected>" +
array[i].code +
"</option>");
} else {
$(element).append("<option value=" +
array[i].id +
">" +
array[i].code +
"</option>");
}
}
}
}
}
});
}
},
editrules: { required: true}
Here is my answer.....Look at the data events. I find the selected row and then I set the cell. The console log was just to test.
{
key: false,
hidden: true,
name: 'userId',
index: 'userId',
editable: false
}, {
key: false,
name: 'userName',
index: 'userName',
editable: true,
edittype: 'select',
editoptions: {
dataInit: function(element) {
$.ajax({
url: '#Url.Action("GetUsers", "Maintenance")',
dataType: 'json',
type: 'POST',
success: function(response) {
var array = response;
if (array != null) {
var i;
for (i in array) {
if (array.hasOwnProperty(i)) {
if (userId == array[i].id) {
$(element).append("<option value=" +
array[i].id +
" selected>" +
array[i].userName +
"</option>");
} else {
$(element).append("<option value=" +
array[i].id +
">" +
array[i].userName +
"</option>");
}
}
}
}
}
});
},
dataEvents: [
{ type: 'change',
fn: function (e) {
var rowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
$('#jqgrid').jqGrid('setCell', rowId, 'userId', $(e.target).val());
console.log($("#jqgrid").jqGrid('getCell', rowId, 'userId'));
}
}
]
}
Related
I have this callback function, which creates list of categories on my page.
this.getCategoryAdCount(function (categories) {
//added selectize plugin to display multiply choice
var values = categories.map(function (cat) {return { item : cat.id, text : cat.name + ' (' +cat.count + ')'}; }); //this is my data from the server
this.$filtercat.selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
maxItems: 5,
options: values,
labelField: "text",
valueField: "item",
sortField: 'text',
searchField: 'text',
create: function(input) {
return {
value: input,
text: input
}
}
});
}.bind(this));
It works good, but I have already existing function, which calls .selectize on every $('select') element on my page
$('select').each(function(k, v) {
var el = $(v);
var options = SJA.Config.selectizeOptions;
el.selectize(options);
});
In this config I have list of options
selectizeOptions: {
persist: true,
maxOptions: 99999,
dropdownParent: 'body',
sortField: false,
render: {
option: function(data) {
return '<div data-value="' + data.value + '" title="' + data.text + '" data-selectable class="option">' + data.text + '</div>';
}
}
},
So I don't want to call .selectize once again inside my callback function. Is it possible to extend somehow options only for the this.$filtercat variable without calling .selectize ?
Is there any option for jqGrid row ordering by drag and drop ? I would like to save the order in DB. I have checked all existing solutions relatedto jqGrid drag & drop. But, nothing is working properly.
Here is my approach with ASP.NET MVC. But you should know that this easy to implement only if you don't have pager.
The main idea is to get all ids in your grid after drop and change item_order in your DB.
HTML
<table id="jqgTopMenu" cellpadding="0" cellspacing="0"></table>
<div id="jqgpTopMenu" style="text-align: center;"></div>
Script
$('#jqgTopMenu').jqGrid({
url: '#Url.Action("TopMenus")',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'ItemOrder', 'Name', 'Short name'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'ItemOrder', index: 'ItemOrder', hidden: true },
{ name: 'PostName', index: 'PostName', align: 'left', width: 430 },
{ name: 'PostNameShort', index: 'PostNameShort', align: 'left', width: 500 },
],
});
//sort Part
$('#jqgTopMenu').jqGrid('sortableRows',
{
update: function (e, ui) {
var ids = $("#jqgTopMenu").jqGrid('getDataIDs');
$.ajaxSettings.traditional = true;
$.ajax({
url: '#Url.Action("SortTopMenu","Admin")',
type: 'post',
dataType: 'json',
data: { ids: ids },
success: function (data) {
$('#jqgTopMenu').trigger("reloadGrid")
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("status: " + textStatus + " Error: " + errorThrown);
}
});
}
});
Controller
[HttpPost]
public JsonResult SortTopMenu(List<int> ids)
{
return Json(_dataManager.TopMenu.Sort(ids));
}
Manager DB method
public bool Sort(List<int> ids)
{
for (int i = 0; i < ids.Count; i++)
{
top_menu t = _dataContext.top_menu.FirstOrDefault(tm => tm.id == ids[i]);
t.item_order = i;
_dataContext.SubmitChanges();
}
return true;
}
How to Display the Selected Item from Database in Kendo Grid while click the Edit Button
**My Coding Like**
var grid= $("#DivUser").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record", name: "popup",
iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
columns: [
{
field: "LoginName",
title: "Login Name",
width:"175px"
},
{
field: "ScopeId",
title: "Scope Id",
editor: ScopeDropDownEditor
},
{
command: ["edit", "destroy"],
title: " ",
width: "175px"
}
]
}).data("kendoGrid");
var DataSourceScope = new kendo.data.DataSource(
{
transport:
{
read:
{
url: "WebServices/Project.asmx/GetScope",
data: "{}",
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json'
},
parameterMap: function(options, operation)
{
if (operation == 'read')
return kendo.stringify(options);
}
},
schema:
{
data: function(Data)
{
return (Data.d);
},
model:
{
id: "ScopeId",
fields:
{
ScopeId: { type: "number"},
ScopeName: { type: "string"}
}
}
},
error: function(e)
{<br>
var xhr = e[0];
var statusCode = e[1];
var errorThrown = e[2];
alert('DataSourceScope - ' + xhr + ', ' + statusCode + ', ' + errorThrown);
}<br>
});
function ScopeDropDownEditor(container, options)
{
$('
data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: false,
dataSource: DataSourceScope
});
} `
in my webservice code like
public class Scopes
{
int _ScopeId;
string _ScopeName;
public int ScopeId
{
get { return _ScopeId; }
set { _ScopeId = value; }
}
public string ScopeName
{
get { return _ScopeName; }
set { _ScopeName = value; }
}
public Scopes() { }
public Scopes(int ScopeId, string ScopeName) { this.ScopeId = ScopeId; this.ScopeName = ScopeName; }
}
[WebMethod]
public List<Scopes> GetScope()
{
string StrConnectionString = ConfigurationManager.ConnectionStrings["sample"].ConnectionString;
SqlConnection SqlConnection1 = new SqlConnection(StrConnectionString);
SqlCommand SqlCommand1 = new SqlCommand("select distinct ScopeId,(select ScopeName from Scope2 where Scope2.ScopeID=User2.ScopeId)as ScopeName from User2", SqlConnection1);
DataTable DataTable1 = new DataTable();
SqlDataAdapter SqlDataAdapter1 = new SqlDataAdapter(SqlCommand1);
SqlDataAdapter1.Fill(DataTable1);
List<Scopes> ListScope = new List<Scopes>();
foreach (DataRow DataRow1 in DataTable1.Rows)
{
ListScope.Add(new Scopes(Convert.ToInt32(DataRow1["ScopeId"]), Convert.ToString(DataRow1["ScopeName"])));
}
return ListScope;
}
this is Ok..
But after Click Edit button the dropdownlist items like 1st item
for Example
ScopeName id dropdownlist
items Admin, Developer,tester
in database james is tester
if i click Edit Button Means
Name ScopeName
James admin
developer
tester
How to Bind and How i displya the SElected items?
thankx in advance.
edited
fetch data directly using java script
var xhReq = new XMLHttpRequest();
xhReq.open("POST", 'WebServices/Project.asmx/GetScope', false);
xhReq.send(null);
var DataSourceScope = JSON.parse(xhReq.responseText);
function ScopeDropDownEditor(container, options)
{
$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
dataTextField: "ScopeName",
dataValueField: "ScopeId",
dataSource: DataSourceScope.d
});
}
I am trying to "filter" a grid based on an option selected from a select drop down.
How do I send the selected option value to the grid when the change event on the select dropdown fires?
My grid datasource is:
dataSourceParts = new kendo.data.DataSource({
serverPaging: false,
serverFiltering: false,
serverSorting: false,
transport: {
read: {
url: ROOT + 'shipment/partsSerialGrid',
dataType: 'json',
type: 'POST',
data: {
enquiryId: enquiryId
}
}
},
pageSize: 25,
error: function(e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
total: "rowcount",
model: {
id: 'id',
fields: {
quantity: {
type: 'number',
editable: false
},
idealForm: {
type: 'string',
editable: false
},
serial: {
type: 'string',
editable: true
}
}
}
}
})
My select event:
$('#fromNameSelect').change(function() {
var fromMode = $('#fromSelect').val();
if (fromMode == 2)
{
supplierId = $(this).val();
dataSourceParts.filter({
field: 'test', operator: 'eq', value: 'test' // THIS DOES NOTHING.
});
$('#shippingPartsGrid').data('kendoGrid').dataSource.read();
}
})
I cant confirm this. But since you set filter in dataSourceParts. Shouldn't you be using dataSourceParts.read() instead of $('#shippingPartsGrid').data('kendoGrid').dataSource.read();?
$('#fromNameSelect').change(function() {
var fromMode = $('#fromSelect').val();
if (fromMode == 2)
{
supplierId = $(this).val();
$('#shippingPartsGrid').data('kendoGrid').dataSource.filter({
field: 'test', operator: 'eq', value: 'test' // DO IT LIKE THIS
});
}
})
I have this part of code:
$.ig.loader(function () {
$("#grid2").igGrid({
autoGenerateColumns: false,
renderCheckboxes: true,
columns:[
{ headerText: "#", key: "#", dataType: "number", width: "40%"},
{ headerText: "filename", key: "fieldname", dataType: "image", width: "40%"},
{ headerText: "X", key: "x", dataType: "number", width: "40%"},
{ headerText: "Y", key: "y", dataType: "number", width: "40%"},
{ headerText: "Z", key: "z", dataType: "number", width: "40%"},
],
//dataSource: data,
height: "400px",
width: "100%",
features:[
{
name: "Filtering",
allowFiltering: true,
type: "local"
},
{
name: "Selection",
mode: "row"
},
{
name: "Updating",
enableAddRow: false,
editMode: "row",
// event raised after end row editing but before dataSource was updated
editCellEnding: function (evt, ui) {
// get cell’s checkbox value when it is changed
if (ui.update) {
if (ui.columnKey === "nid") {
logEvent("editCellEnded event fired. Column Key = " +
ui.columnKey + "; Row Index = " +
ui.rowID + "; Cell Value = " +
ui.value + "; Update = " +
ui.update);
}
}
},
enableDeleteRow: false,
columnSettings: [
{
columnKey: "#",
},
{
columnKey: "fieldname",
},
{
columnKey: "x",
},
{
columnKey: "y"
},
{
columnKey: "z"
}]
}
]
});
$.ajax({
type: "POST",
url: "http://cmsdemo.trueoffice.com/feature-json2",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
$("#grid2").igGrid({
dataSource: data
});
}
});
$("#grid2").live("iggridupdatingdatadirty", function (event, ui) {
$("#grid2").igGrid("commit");
return false;
});
// show the raised event
function logEvent(message) {
var evntWrap = $("#eventList");
$(evntWrap).append("<div>" + message + "<div>");
$(evntWrap).prop("scrollTop", $(evntWrap).prop("scrollHeight"));
}
});
//Functions
function Filter() {
var columnSettings = $("#grid1").igGridFiltering("option", "columnSettings");
var expr = $("#filterExpr").val(),
condition = $("#cond_list").val(),
filterColumn = $("#filterColumn").val();
$("#grid1").igGridFiltering("filter", ([{fieldName: filterColumn, expr: expr, cond: condition}]));
}
function SetConditions() {
var filterColumn = $("#filterColumn").val();
$("#cond_list option:selected").removeAttr("selected");
if (filterColumn === "title" || filterColumn === "nid") {
$("#cond_list .stringCondition").attr("disabled", "disabled");
$("#cond_list .numberCondition").removeAttr("disabled").eq(0).attr("selected", "selected");
}
else {
$("#cond_list .stringCondition").removeAttr("disabled").eq(0).attr("selected", "selected");
$("#cond_list .numberCondition").attr("disabled", "disabled");
}
}
function buttonClickHandler(buttonId) {
alert("Button with id " + buttonId + " was clicked");
}
and this part of code
<script>
var layer1 = document.getElementById('layer1');
ctx1 = layer1.getContext('2d');
var item1 = new Image();
item1.src = "<?php echo $base_url;?>/themes/bartik/images/sheep.png";
item1.addEventListener("load", function() {
ctx1.clearRect(0,0,1024,768)
ctx1.drawImage(item1,x,y)}, false); //how to get values from a table row?
</script>
My question is: How I can get values from a first row of table and send it to ctx1.drawImage(item1,x,y).
I can do copy/paste rest of the code if it be necessary.