ComboBox not working in datagrid - datagrid

I am missing something very basic, my comboxbox never appears, can somebody please look at the following code and tell me what I am missing, I have tried both .Select and ComboBox as type and I ma using dojo-1.5
var layout4 =
[
{ field: "abbr", name: "Abbreviation", width: 10 },
{ field: "name", name: "Name", width: 10 },
{ field: "capital", name: "Capital", width: '10'},
{ field: "combo", name: "combo", width: 10,
type: dojox.grid.cells.Select,
options: [ "new", "read", "replied" ],
editable:true
}
];
var store4 = { identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito', combo:'' },
{ abbr:'eg', name:'Egypt', capital:'Cairo', combo:''},
{ abbr:'sv', name:'El Salvador', capital:'San Salvador', combo:''},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', combo:''},
{ abbr:'er', name:'Eritrea', capital:'Asmara', combo:'' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn', combo:''},
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa', combo:'' }
]};
storeData = new dojo.data.ItemFileReadStore(
{ data:store4}
);
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: { abbr: '*' },
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();

Try replacing the long line that you have using appendChild() with this one:
grid4.placeAt("gridContainer4");
Your code is rather scrambled and without seeing the whole thing it's a little hard to debug. Do you get any errors on the console? Can you post a complete example on JSFiddle?

The reason was that I was using ItemFileReadStore, and it was not allowed to edit an item in store and so combobox was not appearing. Using WriteStore solves this problem here. Ofcourse it was dumb to use readsotre.
Now I have a different problem where I want combobox to appear in grid where canEdit is implemented, but that is a different question.

Related

Cannot Paginate using Kendo UI and Web API

I am a complete novice in KendoUI so this might seem like a noob question.
I am trying to implement server side pagination using KendoUI and Web API.
This is my script for generating the Kendo Grid
$(function () {
$("#grid").kendoGrid({
height: 400,
columns: [
"FirstName",
"LastName",
{ field: "Mobile", width: "150px" },
{ field: "Email", width: "150px" },
{ field: "LoginVerified", width: "150px" },
{ field: "DivisionName", width: "100px" }
],
pageable: true,
sortable: true,
filterable: true,
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
transport: {
read: "/api/Users/GetStaffsPaged"
}
}
});
});
And this is my Web API function
[HttpGet]
[ActionName("GetStaffsPaged")]
public IEnumerable<StaffsBasicInfo> GetStaffsPaged()
{
var take = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["take"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["take"]);
var skip = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["skip"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["skip"]);
StaffsBasicInfoBL staffsBL = new StaffsBasicInfoBL();
List<StaffsBasicInfo> staffs = staffsBL.getAllStaffsBasicInfo();
staffs = staffs.Skip(skip).Take(take).ToList();
return staffs;
}
When I run my code, the Grid is always showing the first 10 records, but my database has 2000+ records.
I have tried lots of tutorials to solve this, but I cannot do pagination.
http://www.telerik.com/blogs/the-facts-on-using-kendo-ui-with-asp-net-webapi
According to the above tutorial, my code should work.
I have also tried this tutorial, but I Visual Studio cannot resolve the DataSource class.
http://blog.falafel.com/server-paging-sorting-filtering-kendo-datasourcerequest/
Please help me implement pagination
You are not returning "total" number of items present so that Kendo could generate total/size number of items in the pagination area.
Try returning
var totalCount = staffs.Count();
staffs = staffs.Skip(skip).Take(take).ToList();
return new { data = staffs, total = totalCount};
And in JavaScript, define schema (code removed for brevity):
$("#grid").kendoGrid({
// code removed for brevity
dataSource: {
transport: {
read: {
url: "/api/Users/GetStaffsPaged"
}
},
schema: {
data: "data",
total: "total"
}
}
});
Thus said, the approach here, which pulls all data from database and doing the pagination on server side, defeats the actual purpose of having server side pagination. Pagination should happen in database and not at server side.

jqGrid add class ui-state-disabled doesn't disable action

I am using jqGrid v 5.1.0 using the Bootstrap style. When I apply ui-state-disabled class to a pager button (add) the button looks disabled but when clicked it still processes the event. In previous version this use to disable the event as well. Using latest FF and IE. Any ideas? Thank you.
Edit - add snippet of code that initializes the grid (child). Notice second line from end where the add button is disabled. The button appears disabled but when clicked the event is executed.
Edit 2 - So after much pain and tears I create two fiddles. One demonstrates proper disabling of the edit button and Two is the same code but using Bootstrap. The edit button is not disabled.
// Water Source grid options...
var source_gridOptions = {
caption: 'Associated Water Source(s)',
data: sourceData,
datatype: 'local',
//url: "", // updated dynamically
//mtype: "GET",
styleUI : 'Bootstrap',
colModel: [
{ label: 'Source ID', name: 'ID', key: true, width: 28 },
{ label: 'Case ID', name: 'WATER_CASE_ID', width: 28, hidden: true },
{ label: 'Intake Name', name: 'INTAKE_SOURCE_NAME', width: 50 },
{ label: 'Intake Type', name: 'INTAKE_SOURCE_TYPE', width: 30 },
{ label: 'Source Type', name: 'SOURCE_TYPE', width: 20 },
{ label: 'Water Type', name: 'WATER_TYPE', width: 20 },
{ label: 'Notes', name: 'NOTES', width: 50 },
{ label: 'Verified', name: 'VERIFIED', width: 25 },
],
viewrecords: true,
height: 'auto',
width: initTabWidth, //dynamically set...
rowNum: 5,
pager: "#sourcePager",
gridComplete: function() {
} // end grid complete event
};
// define CRUD options...
var source_editOptions = {};
var source_addOptions = {};
var source_deleteOptions = {};
// init Water Source grid...
$("#sourceGrid").jqGrid(source_gridOptions).navGrid("#sourcePager",{edit:true,add:true,del:true,search:false},source_editOptions,source_addOptions,source_deleteOptions);
$("#add_sourceGrid").addClass('ui-state-disabled'); // <-- disable button
}); // end grid
Given your demo, I was able to figure it out. You actually need to add the ui-disabled class to work, not just disabled that you've added.
I've modified your fiddle here: http://jsfiddle.net/c6860ev8/16/
You can see in the jqGrid source file which classes are required for bootstrap integration here: https://github.com/tonytomov/jqGrid/blob/7901d7b7da969de1ca98282c60e335e013dc31ee/js/grid.base.js#L1035
Hope this helps!

Binding KendoGrid to a local object

I want to bind a KendoGrid to an object array so that it reflects what ever the user enters. The object will have two fields ExceptionName and ExceptionType. ExceptionType needs to be a dropdown of 5 items (this is working). The ExceptionName will be free text.
If I double click on the kendo grid, I can edit, but it does not reflects in the object. Same thing for Delete & new row. (So I think I am doing something wrong in the binding or in the declaration of the object)
Below, find a snippet of my code:
Object array:
var authorizationInformation = [{
id:1,
exemptionName: "",
exemptionType: "Unknown"
}];
KendoGrid:
$("#AuthorizationGrid").kendoGrid({
columns: [{
field: "exemptionName", title: "Exemption Name"
},
{
field: "exemptionType",
title: "Exemption Type",
template: function (value) {
for (var i = 0; i < exemptionTypeList.length; i++) {
if (exemptionTypeList[i].exemptionType == value.exemptionType) {
return exemptionTypeList[i].description;
}
}
},
editor: function (container) {
var input = $('<input id="exemptionType" name="exemptionType">');
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "description",
dataValueField: "exemptionType",
dataSource: exemptionTypeList
}).appendTo(container);
}
},
{
command: "destroy"
}],
dataSource: authorizationInformation,
editable: true,
scrollable: false,
});
Any suggestion would be appreciated.
Thanks, M

Kendo UI Grid with Drop down Template Not updating value after save to server

We are using a server based simple grid. The grid reads and updates data for a remote data source. It has two columns that are using drop down editors. Everything seems to work fine except that after saving, when editor closes, the changed values are not displayed in the edited row. It still shows the old value. When we try to refresh the grid using the sync event, it changes the order of the rows however, it does update the values on refresh.
It seems like the template function is not executed after the update is completed. How to edit the grid / code to ensure that the changed value is reflected in the grid?
Grid Definition code:
$("#servicetype-grid").kendoGrid({
pageable: true,
toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
columns: [
{
field: "serviceName", title: "Service Name"
},
{
field: "billCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.billCalculationTypeName);
},
title: "Bill Calculation Type"
},
{
field: "payCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.payCalculationTypeName);
},
title: "Pay Calculation Type"
},
{
command: [
{ name: "edit", text: { edit: "", cancel: "", update: "" }},
{ name: "destroy", text:""}
],
title: "Actions"
}
],
dataSource: dataSource,
sortable: {
mode: "single",
allowUnsort: false
},
dataBound: function(e) {
setToolTip();
},
edit: function(e) {
$('.k-grid-update').kendoTooltip({content: "Update"});
$('.k-grid-cancel').kendoTooltip({content: "Cancel"});
},
cancel: function(e) {
setToolTip();
},
editable: {
mode: "inline",
confirmation: "Are you sure that you want to delete this record?"
}
});
Drop down function is defined as:
function calculationTypeDropDownEditor(container, options) {
$('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: baseURL + "rips/services/calculationType/lookupList"
}
}
}
});
}
After doing some search on Google and browsing through different examples on Kendo site, I finally was able to resolve this issue. Following is my understanding of the problem and solution:
When we are using drop down box or combo box as a custom editor, generally we have a different datasource that contains a list options with an id and a value to show. I defined the template as "#=field.property#" of the field that I was looking up. In my case it was calculation type. Following is my model:
model: {
id: "serviceId",
fields: {
serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
billCalculationType: { field: "billCalculationType", validation: { required: true}},
payCalculationType: { field: "payCalculationType", validation: { required: true} }
}
In above, billCalculationType and payCalculationType are supposed to be drop down list values displaying the calculation type name but storing the id of the corresponding calculation type. So, in my grid definition, I added following:
{ field: "billCalculationType",
editor: calculationTypeDropDownEditor,
template:"#=billCalculationType.name#",
title: "Bill Calculation Type" },
Where calculation dropdown editor is a function that builds a drop down from external data source. So, it works fine. However, for the template definition to work in (field.property) format, the server must return the value as a class for this field and not a simple text. So, in my server service, I returned in following format:
{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"}
Notice that the billCalculationType and payCalculationType are returned as objects with name and id as properties. This allows the template to work properly.
Hope this helps.

Change Button-Text (selectfield) - Sencha Touch

how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}

Resources