I've been trying to make the Specification Attributes in nopCommerce editable inline using kendo grid.
If you're not a nop person, just think of an existing kendo editing grid which has one non-editable column and I want to make that column editable using dropdowns. Because of the nature of the data I'm editing, the dropdown options will be different for each row.
The current state is that the column displays correctly when not in edit mode. When in edit mode it displays the correct values, but no value is ever selected. Updating does not seem to post back to the server, and sometimes (depending upon what I try) causes javascript errors deep inside kendo.
I know next to nothing about kendo, and need to get updating with this dropdown working. Below are some code fragments (the whole thing is too long):
grid = $("#specificationattributes-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductSpecAttrList", "Product", new { productId = Model.Id }))",
type: "POST",
dataType: "json"
},
update: {
url: "#Html.Raw(Url.Action("ProductSpecAttrUpdate", "Product"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "#Html.Raw(Url.Action("ProductSpecAttrDelete", "Product"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
//ProductId: { editable: false, type: "number" },
SpecificationAttributeName: { editable: false, type: "string" },
SpecificationAttributeOptionId: { editable: true, type: "number" },
CustomValue: { editable: true, type: "string" },
AllowFiltering: { editable: true, type: "boolean" },
ShowOnProductPage: { editable: true, type: "boolean" },
DisplayOrder: { editable: true, type: "number" },
Id: { editable: false, type: "number" }
}
}
},
.......................
columns: [{
field: "SpecificationAttributeName",
title: "#T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute")",
width: 200
}, {
field: "SpecificationAttributeOptionId",
title: "#T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttributeOption")",
width: 200,
editor: renderDropDown, template: "#= getOptionValue(SpecificationAttributeName, SpecificationAttributeOptionId) #"
},
The method "getOptionValue" isn't included, but basically converts a value to a display-friendly label when it's not in edit mode. "renderDropDown" creates a kendoDropDownList containing the correct options for the current row.
If you return a id, value pair e.g
"{\"SpecificationAttributeOptionId\":\"0\",\"SpecificationAttributeName\":\"XYZ\"},
{\"SpecificationAttributeOptionId\":\"1\",\"SpecificationAttributeName\":\"ABC\"}"
Then you need to specify dataTextField, dataValueField. Otherwise if you return a List of string as follows, then you don't need to specify dataTextField, dataValueField and kendo will take care the rest.
"{\"SpecificationAttributeName\":\"XYZ\"},
{\"SpecificationAttributeName\":\"ABC\"}"
Hope this helps.
$("#SpecificationAttributeOptionId").kendoDropDownList({
dataTextField: "SpecificationAttributeName",
dataValueField: "SpecificationAttributeOptionId",
dataSource: {
transport: {
read: {
url: "/ControllerName/GetDropDownValueFunction",
type: "POST",
contentType: "application/json",
dataType: "json"
}
}
},
height: 100
});
Related
I defined a kendo grid like that, and somehow after adding a row, the first edit click I do (before sending to the server) the row I just added is disappearing, and after refreshing its still there.
any suggestions why its happening?
$("#actionGrid").kendoGrid({
scrollable: true,
height: "200px",
toolbar: [{name: "create", text: "Add"}],
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "order", title: "Order", width: 80 },
{ field: "action", title: "Action name"},
{ command: ["edit", "destroy"], width: 100 }
],
dataSource: {
schema: {
model: {
id:"taskId",
fields: {
taskId: { type:"number" },
order: { type: "number", validation: { min: 0 } },
action: {}
}
}
},
transport: {
read: {
dataType: "json",
type: "GET",
contentType: "application/json",
url: "action/readByPId?pId=" + pId
},
destroy: {
dataType:"json",
type:"POST",
contentType:"application/json",
url: "action/delete"
},
update: {
dataType: "json",
type: "POST",
contentType: "application/json",
url: "action/update"
},
create: {
dataType: "json",
type: "POST",
contentType: "application/json",
url: "action/update"
},
parameterMap:function parameterMap(options,type) {
if(type !== "read"){
return JSON.stringify(options);
}
}
},
sort: { field: "order", dir: "asc" }
}
});
Kendo Grid have straight rules .Like whenever create new record ,have to return updated list to client side call . please make sure whether that updated record is returning or not.
IF you doing online offline feature of kendo UI . then follow this following demo.
https://demos.telerik.com/kendo-ui/grid/offline
you have not mentioned the data communication method . but if you are doing purly custom way then you have to update datasoure after doing any operation .Please put following code to get update with new data .
$('#GridName').data('kendoGrid').dataSource.read(); <!-- first reload data source -->
$('#GridName').data('kendoGrid').refresh(); <!-- refresh current UI -->
i have a autocomplete textbox and when a user types into to it i would like to pass the value to the url that the json calls as this would return the data i require in the search
this is the html i am currently using
<inputtype="text"kendo-autocompletek-data-source="customersDataSource"k-data-text-field="'RegisteredName'"k-data-value-field="'SupplierId'"ng-model="SearchData.TradingName"k-min-length="3" />
This is the JS i currently have
$scope.customersDataSource = new kendo.data.DataSource({
transport: {
serverFiltering: true,
read: {
url: "/Supplier/GetSuppliersAutoCompelte",
dataType: "json"
}
},
schema: {
type: "json",
data: "SupplierNames",
model: {
fields: {
fields: {
Field1: { field: "Field1", type: "number" },
Field2: { field: "Field2", type: "number" }
}
}
}
}
});
now in the url if the user types abc for example in the searchdata.tradingname then i would like the url in my js to be shown as
/Supplier/GetSuppliersAutoCompelte?tradingname=abc
I am new to web development, I have run into this problem and have researched and tried many other methods to no avail. I need to populate a drop down list in a jqgrid only with values that are in my database. The url that I am using to do this gives me the correct response in JSON as follows (note that I only sent through selected fields):
{
"serviceBranchResult": [
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 2,
"service_name": "Forex",
"service_status": null
},
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 3,
"service_name": "Tellers",
"service_status": null
}
]
}
When I try to do a dropdownlist from the method below without reading the json from the url it works 100% however it isnt dynamic, I use the method getAllSelectOptions() and where I am using it in the grid looks like this:
function getAllSelectOptions() {
var services = {
'1':'Forex', '2':'Tellers', '3':'Consultants'};
return services;
}
My code for the grid:
url: "http://localhost:8080/service.svc/employees/3"
datatype: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
height: '250',
colNames: ['ID', 'Name', 'Surname', 'Username', 'Email', 'Branch ID', 'User Type', 'Status', 'Speciality'],
colModel: [
{ name: 'employee_id', index: 'employee_id'},
{ name: 'employee_name', index: 'employee_name', editable: true },
{ name: 'employee_surname', index: 'employee_surname', editable: true },
{ name: 'employee_username', index: 'employee_username', editable: true },
{ name: 'employee_email', index: 'employee_email', editable: true },
{ name: 'branch_id', index: 'branch_id', editable: true },
{ name: 'user_type', index: 'user_type', editable: true },
{ name: 'employee_state', index: 'employee_state', editable: true },
{ name: 'employee_speciality', index: 'employee_speciality', editable: true,
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: getAllSelectOptions() }
}],
rowNum: 20,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
And this works perfectly.
However I use this following method to potentially replace the getAllSelectOptions() method and it does return the information when I use alert boxes, but does not work.
function availAtBranch() {
$.ajax({
type: "GET",
url: "http://localhost:8080/service.svc/branch/3",
dataType: "json",
success: function (data) {
$.each(data.serviceBranchResult, function (i, obj) {
//alert(obj.service_id + ":" + obj.service_name);
var div_data = obj.service_name + ":" + obj.service_name;
//alert(div_data);
});
return div_data;
}
});
I think it has something to do with how in parsing the JSON to the editoptions method, or sending an object through. How do I get my JSON to be in the format as described in the getAllSelectOptions() method, or how do I display my data in the dropdownlist. Thank you in advance
This is my grid:
$(document).ready(function () {
datasource = new kendo.data.DataSource({
transport: {
read: {
url: '/Discount/Get',
dataType: "json",
},
update: {
url: '/Discount/Update',
dataType: "json",
type: "POST"
},
destroy: {
url: '/Discount/Delete',
dataType: "json",
type: "POST"
},
create: {
url: '/Discount/Add',
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
console.log(operation);
if (operation !== "read") {
return options;
}
}
},
schema: {
model: {
id: "Id",
fields: {
TopItemName: { type: "string" },
DiscountValue: { type: "number" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: datasource,
batch: true,
toolbar: ["create", "save", "cancel"],
height: 400,
navigatable: true,
pageable: true,
columns: [
{
field: "TopItemName",
editor: topItemDropDown,
template: "#=TopItemName#"
},
{
field: "DiscountValue",
format: "{0:p0}",
editor: function (container, options) {
$("<input name='DiscountValue'>")
.appendTo(container)
.kendoNumericTextBox(
{
min: 0,
max: 1.00,
step: 0.01
});
}
},
{
command: "destroy",
title: " ",
width: 150
}],
editable: true
});
function topItemDropDown(container, options) {
console.log(options);
$('<input required data-text-field="TopItemName" data-value-field="TopItemName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
serverFiltering: true,
transport: {
read: {
url: '/Discount/GetTopItemName',
dataType: "json",
type: "POST",
contentType: "application/json"
}
}
}
});
}
});
and somehow when I press the delete button it deletes the row from the grid but it never calls my action method so that the row gets removed from my database. But if I after i have pressed the delete button press add new record and then save changes then it calls my add action method and my delete action method. How can I make it call the delete action method when the delete button is pressed and not when save changes is pressed?
This is how the default editing works by default - the user has to click the "Save Changes" button to submit all changes to the server.
You can do one of the following
Set the autoSync option of the data source to true
Use a different editing mode - for example inline.
Handle the remove event of the grid and call this.dataSource.sync() to automatically sync the changes.
I have looked at an example Kendo grid here, and another one on Codeproject and a thread on this site, but I don't seem to find the error. I'm not very knowledgeable with javascript or HTML, so I expect it to be a simple mistake on my part.
Here is the code I have so far:
$(document).ready(function () {
var baseURL = "/api/LeaveTypes",
leaveTypes = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: baseURL + "?getAll=true",
dataType: "jsonp",
type: "GET"
},
update: {
url: baseURL,
dataType: "jsonp",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number", editable: false, validation: { required: true } },
Description: { type: "string", editable: false, validation: { required: true } },
IsEssLeaveType: { type: "boolean", editable: true, },
ColourRGB: {type: "string", editable: true, nullable: true }
}
}
}
});
$(".leavetypesgrid").kendoGrid({
dataSource: leaveTypes,
toolbar: ["save"],
columns: [{
field: "Id",
title: "Leave Type ID"
}, {
field: "Description",
title: "Leave Type"
}, {
field: "IsESSLeaveType",
template: '<input type="checkbox" #= IsESSLeaveType ? "checked=checked" : "" # ></input>',
title: "Flagged for ESS",
}, {
field: "ColourRGB",
title: "Colour"
}
],
scrollable: false,
editable: {
update: true
}
});
});
I am trying to get it to work in JSFiddle, but since I'm quite new to it, I'm still struggling to get the data source disconnected from the Controller that I'm currently using to populate the grid with, and connecting it to sample data.
Here is the Controller's Post method:
public SimpleResult Post(List<LeaveCalendarLeaveType> leaveTypesList)
{
return ESSLeaveDataManager.SaveLeaveTypes(leaveTypesList);
}
Any help will be much appreciated! :)
The first thing that I noticed is that you have two data sources defined. One called dataSource and another called leaveTypes. You are only setting the datasource on your grid to leaveTypes.
Did you configure your MVC route so that it goes to the action named Post() when /api/LeaveTypes is called? Otherwise, the url for the update config should be /api/LeaveTypes/Post