Telerik Forums
Kendo UI for jQuery Forum
2 answers
199 views

I'm having quite a few small issues with implementing a remote transport using Kendo Grid, with Node/Express backend. I basically want to build a simple backend catering to Kendo. I made a simple table on the server called Todo, with two fields: TodoID and TodoItem. I'm using this just to try and create a REST based CRUD using Kendo Grid.

Here's my datasource and grid definition:

var dataSource = new kendo.data.DataSource({
        autoSync: true,
        batch: true,
        schema: {
            model: {
                id: "TodoID",
                TodoID: {editable: false, nullable: true}
            }
        },
        transport: {
            create: {
                url: "http://localhost:3000/todo/create",
                contentType: 'application/json',
                dataType: "json"
            },
            read: {
                url: "http://localhost:3000/todo/read",
                contentType: 'application/json',
                dataType: "json"
            },
            update: {
                url: "http://localhost:3000/todo/update",
                contentType: 'application/json',
                dataType: "json"
            },
            destroy: {
                url: "http://localhost:3000/todo/delete",
                contentType: 'application/json',
                dataType: "json"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        }
    });

 

And here's the grid:

$("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: true,
        editable: "inline",
        toolbar: ["create"],
        columns: [{
            field: "TodoID",
            title: "ID",
            filterable: false
        }, {
            field: "TodoItem",
            title: "Item",
            filterable: false
        }, {
            command: ["edit", "destroy"], title: " ", width: "250px"
        }]
    });

 

Read and Update are working fine on both client and server. Delete and Create are odd.

1. When I click delete button, the REST method on server is called twice. Why?

I searched and looked into bath, auto sync, results I'm returning, etc. but can't figure out why. Here is the code on the server:

router.get('/delete', function(req, res, next) {
    var models = JSON.parse(req.query.models);
    connection.query('DELETE from Todo WHERE TodoID =' + models[0].TodoID + ';', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            console.log(results);
            res.status(200).json(models);
        }
    });
});

 

And here is the server logged messages (two of them one after another): 

OkPacket {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 200 2793.546 ms - 34
OkPacket {
  fieldCount: 0,
  affectedRows: 0,
  insertId: 0,
  serverStatus: 2,
  warningCount: 0,
  message: '',
  protocol41: true,
  changedRows: 0 }
GET /todo/delete?models=%5B%7B%22TodoID%22%3A1%2C%22TodoItem%22%3A%22Item+1%22%7D%5D 304 1615.503 ms - -

2. The second issue is when I click "Add new record" in the grid, it immediately calls my server side Create route. I setup the ID and return that, and the Grid updates, but it's not in edit mode. What I want is click Add and then it let's me edit the row in the grid and then only calls create when done, does nothing if cancelled.

Here is the server side code for create (although I believe this should be called until after the record is added to the grid).

router.get('/create', function(req, res, next) {
    connection.query('INSERT INTO Todo (TodoItem) VALUES ("New item");', function(err, results){
        if(err){
            console.log(err);
        }
        else{
            res.status(200).json([{ TodoID: results.insertId }]);
        }
    });
});

 

What do I need to do on the client side to let the grid editing complete the new item before it calls create on server? Seems like if I disable auto sync it can work they way I want, but then the other operations are broken.

Thanks,
Brett

Milena
Telerik team
 answered on 21 Aug 2018
8 answers
404 views
$("#grid").kendoGrid({ toolbar: ["excel"], excel: { fileName: "Kendo UI Grid Export.xlsx", proxyURL: "https://demos.telerik.com/kendo-ui/service/export", filterable: true}, dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"}, schema:{ model: { fields: {UnitsInStock: { type: "number" },ProductName: { type: "string" },UnitPrice: { type: "number" },UnitsOnOrder: { type: "number" },UnitsInStock: { type: "number" }}}}, pageSize: 7, group: { field: "UnitsInStock", aggregates: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum"},{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "count" }]}, aggregate: [{ field: "ProductName", aggregate: "count" },{ field: "UnitPrice", aggregate: "sum" },{ field: "UnitsOnOrder", aggregate: "average" },{ field: "UnitsInStock", aggregate: "min" },{ field: "UnitsInStock", aggregate: "max" }]}, sortable: true, pageable: true, groupable: true, filterable: true, columnMenu: true, reorderable: true, resizable: true, columns: [{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#", groupFooterTemplate: "Average: #=average#" },{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #", groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }]});

function search() {
            $('#grid').data('kendoGrid').dataSource.read({
                "CusCode": $("#CusCode").val(), "FromDate": $("#FromDate").val(), "ToDate": $("#ToDate").val()
                                    , "IsAllEquity": $("[name=rbStock]:checked").val(), "EquitySymbol": $("#EquitySymbol").val()
                                    , "IsAllDerivative": $("[name=rbDerivative]:checked").val(), "Instrument": $("#Instrument").val()
            });
            $("#grid").data("kendoGrid").refresh();
        }

 

Export Excel But data was lost when I called search() ( Use initialize parameter not in search() )

 

n/a
Top achievements
Rank 1
 answered on 21 Aug 2018
1 answer
146 views

Hi you have a  bug, in the chart i write label in Hebrew(RTL language) and it write the label text in reverse,

תפוח -> חופת

לימון -> ןומיל

It is write the label like mirror

Tsvetina
Telerik team
 answered on 21 Aug 2018
2 answers
133 views

Hi, I'm working with DialogFlow and Kendo UI for JQuery and ASP.NET to build a chatbot. I have an issue with the RenderAttachment method. No matter what value (carousel or list or anything else) I give to the AttachmentLayout parameter, the messages are displayed with a list format (Vertical aligned). Is it normal? If not, please can ou help me?

 

encl: my code

Yves William
Top achievements
Rank 1
 answered on 21 Aug 2018
3 answers
166 views

Hi

I'm using kendo stock chart to plot the temperature data of each device. Let's say If I want to plot 5 devices data, I push data to kendo DataSource Object (format of data point: {device_id: <temperature, date: <date>}) as soon as I get data from the device. Initially, I had a limit of 5 devices per a chart but again got a requirement of putting 128 devices. At any point, I used to maintain 10 data points on the chart by removing older data points. But I have increased the limit to 100 data points when plotting 128 device data. After making this change the browser was unresponsive and finally crashes.

1. Is this because of the continuous refreshing of the chart (after pushing the data point, I update the chart using the refresh method)?

2. Or stock chart could not handle more data points?

How to handle updating the chart with continuous data from device efficiently. Could someone provide me with the best practice to do this?

 

Stefan
Telerik team
 answered on 21 Aug 2018
3 answers
1.1K+ views
I seem to be experiencing an issue with the FilterMenuInit event. I am building and initializing my Grid within a razor view and then binding the events to the grid after initialization.

The problem i am seeing is that the FilterMenuInit is never getting triggered if ColumnMenu(true) is set. If i remove ColumnMenu(true) or set it to false the event is triggered as expected.

I am unsure if this is a bug or if it is something i have configured wrongly.

Konstantin Dikov
Telerik team
 answered on 21 Aug 2018
2 answers
52 views

Hello,

We have a few grids on a page with "filterable: {mode: row}" enabled. This option causes to render a single grid ~700-1000 ms, without this option it takes 10-20 times faster.

Here is example that demonstrates the issue

 

https://dojo.telerik.com/ebavEhos

 

First grid filterable option enabled, the second grid option is not set.

Below the grid, you'll see the time to init each grid.

 

Are there any ways to improve that performance?

 

Thanks,

Max

Max
Top achievements
Rank 1
 answered on 20 Aug 2018
7 answers
1.1K+ views
There have been few discussions on the topic of column minimum widths. And the answers I found so far can be summarized to this:
1. Kendo UI grid does not support min-width for the columns;
2. Developer can set min-width css on the whole grid element;
3. A js function can capture event when user resizes individual column manually and prevent user to go under given width. 

In a most user friendly way the column configuration should have taken column width in % and min-width. 
Are there any plans to implement this feature?

Is there a known function which can work as window.onresize and resize grid columns proportionally with given column min widths? Can min widths be added to columns configuration and then accessed by this function?

Thanks!
Dimo
Telerik team
 answered on 20 Aug 2018
3 answers
1.0K+ views

Hi,

I want to make a cell editable on double click instead of single click. I know this can be achieved by jQuery. But still do we have any option in kendo grid.

Thanks in Advance,

Sam

Tsvetina
Telerik team
 answered on 20 Aug 2018
3 answers
1.2K+ views
Hello,

I'm trying to make a success and fail ratio pie chart now.
I have difficulty making label to be shown clearly.

First problem is that the 'outsideEnd' option is not working properly.
With 'outsideEnd', I guess the label should be positioned outside.
But in my case, the label is positioned inside of the pie.

Second, when I tried with 'circle' or 'column' option, the label text overlapping.
I couldn't find other option to arrange it properly.

Would you please kindly help me to do this?

The following my code;

        function createChart() {
          var dataSource = [
            {category: "FAIL", value1: 1970}, 
            {category: "Manual", value1: 8370}, 
            {category: "Automatics", value1: 185000}];

          $("#chart").kendoChart({
            title: { text: "" },
            legend: { position: "bottom", margin: { top: -3, bottom:0 }},
            dataSource: { data: dataSource, datatype: "number" },
            seriesDefaults: { type: "pie", categoryField: "category",
                             labels: {            
                               visible: true,
                               position: "outsideEnd",
                               background: "transparent",
                               //color:"#d9dbe8",
                               template: "#= category #: \n #= value # (#= kendo.format('{0:P}', percentage) #)"
                             }
                            },
            series:
            [
              { field: "value1", name: 'RATIO', overlay: { gradient: "none" }},
              { field: "value2", name: 'PIE_NM'}
            ],
            valueAxis: { format: "{0}%" },
            seriesClick: function(e) {},
            tooltip: { visible: true, 
                      format: "{0}%", 
                      template: "#= series.name #: #= value # (#= kendo.format('{0:P}', percentage) #)", 
                      background: "#2f3b51", 
                      color:"#fff", 
                      border:{width:0}}
          });  
        }

Thanks in advance.
chun
Top achievements
Rank 1
 answered on 20 Aug 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?