Questions on Kendo UI for jQuery Forum

9 answers

518 views

I am looking to add an additional column to each day of the day and week views of the scheduler. I am going to be passing additional information that displays allowed event types into this column. I thought i'd reach out to you guys in hopes you can provide some direction and guidance?

Thank you.

Scheduler

answered on 08 Jul 2015

1 answer

321 views

Angular Grid sorting and paging problem

Hi! I'm using Kendo UI + AngularJS for display a grid with some local data. All works fine, the data are displayed correctly but when I try to sort or group or click to next page nothing happens.

Here some code snippets:

angular.element($('#bodyall')).scope().ctrl.poolGridOpts = {

dataSource: {

data: poolGridData,

pageSize: 10

},

pageable: true,

sortable: true,

groupable: true,

columns: [

{ field: "field", title: "Name of field" },

{ field: "value", title: "Value of field" }

]

};

I create the option object for the grid and I set the data source as array of object field/value

div.html('<div kendo-grid="poolGrid" k-options="ctrl.poolGridOpts"></div>');

angular.element(div).injector().invoke(function ($compile) {

var scope = angular.element(div).scope();

$compile(div)(scope);

});

I fill the div with the html of the kendo-grid directive passing the options, thus I compile the html with angular

The grid is displayed with the data but is "static" and the sorting or grouping don't work.

As you can see from image, the grid seems to be ok (correctly initialized) but nothing is working.

Any idea for what I'm wrong ?

Grid

answered on 08 Jul 2015

4 answers

77 views

Customize grid with hierarchy "create" command with inline template.

Hi. I am trying to customize grid create command with inline template.
But as i replicate in http://plnkr.co/yRFW0ssSHwaWwnuhQkxS
As soon as i click 'Add User Define Subject' button. Grid disappeared. And inline template is not showing up.
If i use 'popup' template. Template is showing up but that is not what i want.
I want to click 'Add User Define Subject' button. Inline template show up above green background grid. Is that possible?
Thx in advance.

Grid

answered on 08 Jul 2015

1 answer

74 views

Grid - new record to bottom of grid auto focus

Hello,

I have the following scenario -

I have a form above Grid to create new product lines. On save of form, data grid to reload/load with new product at bottom grid "focused/selected". Preferably the ability to select which cell/column is auto focused on ready to edit if required.

NOTE: The function needs to behave the same way even when on "Offline Mode".

Is there an inbuilt method for this already?

Cheers :-)

Grid

answered on 08 Jul 2015

8 answers

1.0K+ views

Grid with Datasource CRUD methods with Web Api

Hi,

Am using Kendo mvvm framework to bind my datasource defined in the viewmodel to grid.

Datasource internally calls web api for performing CRUD functions. Am able to get data using datasource transport "read" method. Am having trouble with other methods - update , create and destroy. Below is my datasource from viewModel -

var salesDataSource = new kendo.data.DataSource({

schema: {

data: function(data) { //specify the array that contains the data

return data || [];

},

errors: function (response) {

return response.error;

},

model: {

id: "ID",

fields: {

ID: { editable: false, nullable: true },

CompanyName: { validation: { required: true } },

LengthOfContract: { editable: false },

Status: { editable: false }

}

},

batch: true,

transport: {

read: {

url: "/api/SalesApi",

dataType: "json" //

},

update: {

url: function (data) {

return "/api/SalesApi/" + data.models[0].ID;

},

dataType: "json",

type:"PUT"

},

parameterMap: function(data, operation) {

if (operation != "read") {

console.log("here");

console.log(data);

return JSON.stringify({ value: data.models });

} else {

return JSON.stringify(data);

}

},

error: function (e) {

console.log("error");

console.log(e);

/*

var message = e.xhr.responseJSON["error"].message.value;

var innerMessage = e.xhr.responseJSON["error"].innererror.message;

alert(message + "\n\n" + innerMessage);

*/

},

serverPaging: true,

pageSize: 15

});

My webapi method for Put -

// PUT api/sales/5

public void Put(int id, IEnumerable<SalesModel> value)

{

//do somethig with data

}

So when user clicks Save Changes on grid, my webApi PUT method is getting called but the second parameter "value" is not having any records.

Could you please advise on what am missing or point me to an example similar to am doing? Most of the examples I found on internet are using OData. I dont use
Odata.

Thanks
Sai

Data Source

answered on 07 Jul 2015

1 answer

244 views

Copy Treelist with recursive children

I am trying to implement cut/copy/paste functionality, but i am not able to get it right with multiple recursive children.

Is there any way i can copy the root node with its children?

I could not find any function in documentation to achieve the same.

I am using pushcreate function, to copy the object first changing its parentId & id and then add it to selected row.

I am able to achieve this with single child.

How do I achieve this incase of recursive children?

TreeList

answered on 07 Jul 2015

1 answer

164 views

It takes a long time before sending request to server side

I'm trying to read data from server side and fill in to the grid, it's about 50,000 rows.

I'm using Spring MVC, it always takes 5~9 seconds between "return 'index'" and receiving the "read" request from index.jsp, and it'll take a little shorter after the first loading of grid, but also more than 3 seconds every time.

My controller code is like this: (the time is between time1 and time2)

@RequestMapping(method={RequestMethod.GET})

public String index(Model model) {

// time1

return "index";

}

@RequestMapping(value="list", method={RequestMethod.GET})

@ResponseBody

public String list(Model model) {

// time2

...

}

The related dataSource code is like:


var dataSource1 = new kendo.data.DataSource({
        transport: {
            read: { url: "${listUrl}", dataType: "json" },
            create: { url: "${createUrl}", dataType: "json", type: "post" },
            update: { url: "${updateUrl}", dataType: "json", type: "post" },
            parameterMap: function(options, operation) {
                return {
                    category: category,
                    queryType: queryType.value(),
                    models: kendo.stringify(options.models) 
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number", editable: false },
                    on: { type: "string" },
                    ln: { type: "string", validation: { required: true } }
                }
            }
        },
        requestEnd: onRequestEnd
    });
 
    $("#grid1").kendoGrid({
        dataSource: dataSource1,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: 
        [{
            field: "id", title: "ID", width: "80px", 
            filterable: {
                ui: function(element) {
                    element.kendoAutoComplete({
                        dataSource: dataSource1,
                        dataTextField: "id"
                    });
                }
            }
        },{
            field: "on", title: "Operating Name", width: "320px",
            filterable: {
                ui: function(element) {
                    element.kendoAutoComplete({
                        dataSource: dataSource1,
                        dataTextField: "on"
                    });
                }
            }
        },{
            field: "ln", title: "Legal Name", width: "320px",
            filterable: {
                ui: function(element) {
                    element.kendoAutoComplete({
                        dataSource: dataSource1,
                        dataTextField: "ln"
                    });
                }
            }
        },{
            command: ["edit"], title: " ", width: "200px"
        }],
        editable: "inline",
        filterable: {
            extra: false,
            operators: {
                number: {
                    eq: "Is equal to",
                    gt: "Greater than",
                },
                string: {
                    startswith: "Starts with",
                    contains: "Contains",
                }
            }
        },
    });
 
var dataSource2 = new kendo.data.DataSource({
        transport: {
            read: { url: "${listUrl}", dataType: "json" },
            create: { url: "${createUrl}", dataType: "json", type: "post" },
            update: { url: "${updateUrl}", dataType: "json", type: "post" },
            parameterMap: function(options, operation) {
                return {
                    category: category,
                    queryType: queryType.value(),
                    models: kendo.stringify(options.models) 
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number", editable: false },
                    desc: { type: "string", validation: { required: true } }
                }
            }
        },
        requestEnd: onRequestEnd
    });
 
    $("#grid2").kendoGrid({
        autoBind: false,
        dataSource: dataSource2,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns:
        [{
            field: "id", title: "ID", width: "80px",
            filterable: {
                ui: function(element) {
                    element.kendoAutoComplete({
                        dataSource: dataSource2,
                        dataTextField: "id"
                    });
                }
            }
        },{
            field: "desc", title: "Description", width: "840px",
            filterable: {
                ui: function(element) {
                    element.kendoAutoComplete({
                        dataSource: dataSource2,
                        dataTextField: "desc"
                    });
                }
            }
        },
        {
            command: ["edit"], title: " ", width: "200px"
        }
        ],
        editable: "inline",
        filterable: {
            extra: false,
            operators: {
                number: {
                    eq: "Is equal to",
                    gt: "Greater than",
                },
                string: {
                    startswith: "Starts with",
                    contains: "Contains",
                }
            }
        },
    });

Please help me to find the reason, Thanks!

Grid

answered on 07 Jul 2015

1 answer

139 views

[Solved] Adding different types of tasks

Hi,

I want to achieve the functionality such that,

When i click 'Add task' button, it opens a popup where task detail is filled and the 'Task type' is filled.

There could be 3 task types T1, T2, T3. The relation between these are T1>T2>T3

i.e

1- T1 cannot be a child of T3 or T2

2- T3 cannot be a direct child of T1 etc.

I want to prevent Task drop if above conditions not satisfied.

Is there any event available which gets called when tasks are re-arranged (drag drop) something like 'ondrop' having info of droped task data and position where it is droped?

also please suggest how to open popup when 'Add'

Gantt

answered on 07 Jul 2015

1 answer

240 views

Sizing horizontal stacked bar plot area to series

Hi all,

I'm finding the JS Kendo UI pretty great thus far, but I'm having an issue with some sizing of a horizontal stacked bar. Basically I'd like the complete displayed area to only be as big as the value of the series, with no space shown around the 1st series (chart will only ever have one series, being used as a linear gauge more or less).

Code I have thus far for the init:

$("#chart").kendoChart({
chartArea:{
height:40,
width:200,
margin:5,
background:"green",
margin:0
},
title: {
text: ""
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true,
margin:15,
gap:2
},
panes:[
{name: "top-pane",height:70}
],
series: [{
name: "Red Portion",
data: [10],
color: "#ff0000"
}, {
name: "Yellow Portion",
data: [25],
color: "#ffff00"
}, {
name: "Green Portion",
data: [100],
color: "#00ff00"
}],
labels:{
visible:true
},
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: false
},
majorGridLines:{
visible: false
},
labels:{
visible:false
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
labels:{
visible:false
},
visible:false
},
tooltip: {
visible: true

}
});

The above results in pretty much what I want in terms of one series represented as one stacked horizontal bar, but there's still some extra space around it which I'd like to eliminate so the eventual SVG renders as just the series bar itself.

Charts

answered on 07 Jul 2015

9 answers

499 views

IE11 - Dropdownlist closes after initial expand

Hi, I am not sure if I am having exact same problem as other post "Drop down's not working in IE11" but you locked it so I can't reply to it.

Anyways, in IE11 sometimes on initial click of a DropDownList, the list auto-closes. Then it works fine afterwards. I switched to combobox for testing purposes and it does not have the same behavior. Firefox and Chrome are both fine. I cannot reproduce in demo though. Any ideas? Our code freeze for next release is fast approaching so I would prefer a work-around or hack if possible. Otherwise, I may have to hack combobox control to replace this.

DropDownList

answered on 07 Jul 2015