Questions on Kendo UI for jQuery Forum

1 answer

375 views

Getting null while passing JSON from toolbar create button to C# controller

Hello, need help:

I'm getting null in all fields of an incoming parameter (class that has all same fields as the JSON) while passing JSON from toolbar "create" button to C# controller. And If I try to add some additional properties in kendo like: contentType: "application/json; charset=utf-8", I get nothing at all in the controller.

How can I pass JSON correctly?

Kendo/Jquery:

$(document).ready(function () {

//var arrayOfCheckedCheckBoxes = [];

var crudServiceBaseUrl = "/api/Grid/",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudServiceBaseUrl + "GetContacts",

dataType: "json"

},

create: {

url: crudServiceBaseUrl + "CreateContacts",

type: "POST",

dataType: "json"

}

},

batch: true,

pageSize: 20,

schema: {

model: {

id: "ID",

fields: {

ID: { editable: true},

Name: { type: "string" },

Number: { type: "number" },

Status: { type: "string" },

Discontinued: {

type: "boolean",

value: false

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 550,

toolbar: ["create",

{

template: '<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>'

}

],

columns: [

{ field: "ID", title: "ID" },

{ field: "Name", title: "Имя"},

{ field: "Number", title: "Номер" },

{ field: "Status", title: "Статус" },

{ template: '<input type="checkbox" class="chkbx" />', width: 40 },

{ command: ["edit"], title: " ", width: "250px" }],

editable: "popup"

});

$(".k-grid-delete").click(function () {

var grid = $("#grid").data("kendoGrid");

var arrOfCheckedCheckboxes = new Array();

// put all checked rows ID in to an array

$("#grid")

.find("input:checked")

.each(function () {

var rowId = grid.dataItem($(this).closest('tr')).ID;

arrOfCheckedCheckboxes.push(rowId);

});

//pass array to controller

$.ajax({

type: "POST",

url: "/api/Grid/DestroyContacts",

data: JSON.stringify(arrOfCheckedCheckboxes),

dataType: "json",

contentType: 'application/json; charset=utf-8',

success: function(result) {

var grid = $("#grid").data("kendoGrid");

grid.dataSource.read();

}

});

C# controller:


namespace taskColoredGrid.Controllers
{
    public class GridController : ApiController
    {
         [HttpPost]
        public HttpResponseMessage CreateContacts([FromBody] Contacts contacts)
        {
 
            return Request.CreateResponse(HttpStatusCode.OK);
        }
  }
}

C# model:


namespace taskColoredGrid.Models
{
    public class Contacts
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Number { get; set; }
        public string Status { get; set; }
        public string Discontinued { get; set; }
    }
}

PrintScreen of data I'm receiving in controller in attachment:

Toolbar

answered on 17 Aug 2016

6 answers

1.2K+ views

[Solved] KendoWindow not displaying any action buttons

When I display a window, the actions are not visible, so I did a simple test. Same thing - no action buttons.

                $("#MyWindow").kendoWindow({
                    actions: ["Minimize", "Close"]
                }).open();

See attached image.

Window

answered on 17 Aug 2016

1 answer

162 views

[Solved] Using kendo UI pro with JSPM

Hi I just want to hear if it possible to use kendo ui pro with jspm

General Discussions

answered on 17 Aug 2016

1 answer

191 views

Kendo Grid batch edit

I have a grid in batch editing mode. When I click on add new row, it triggers a create event and when I edit a row , it triggers an update event. This is all good and it is as per documentation.

But My requirement is as such When I click on "add new row" it should trigger an update event instead of create event is that possible ?

What I am trying to do is , since it is batch save. So even a new row added should be treated like modifying a row. So for example if I do the following

(1) Add a new row

(2) modify an existing row

On clicking save changes button, it should trigger a update action and 2 objects should be sent to server for update . Please let me know if it is possible ?

Grid

answered on 17 Aug 2016

1 answer

841 views

Format Currency

Below is my kendo chart where I'm binding the datasource via angular. The data displays but I want my field which is monthTotal to be formatted as currency.

Charts

answered on 17 Aug 2016

5 answers

464 views

Date sorting Issue

Sorting by date issue..

<table id="grid">
                <thead>
                    <tr>
<th>SNO</th>
                        <th data-field="NAME">NAME</th>
                       <th data-field="EMPID">EMPID</th>
                       <th data-field="CATEGORY">CATEGORY</th>
                       <th data-field="SUBCATEGORY">SUBCATEGORY</th>
                       <th data-field="CONTACTDURING">CONTACTDURING</th>
                       <th data-field="DEPARTMENT">DEPARTMENT</th>
                       <th data-field="SUBDEPARTMENT">SUBDEPARTMENT</th>
                       <th data-field="STATUS">STATUS</th>
                       <th data-field="datefrom">FROM DATE</th>
                       <th data-field="TODATE">TO DATE</th>
                       <th data-field="TOTALDAYS">TOTALDAYS</th>
                       <th data-field="DEATHCATEGORY">DEATHCATEGORY</th>
                    </tr>
                </thead>
                <tbody>
                   <?php
$i=1;

                      foreach($leaveInfo as $records){
                          $newDate = date("d/M/y", strtotime( $records['FROMDATE']));
                          $newDate1 = date("d/M/y", strtotime( $records['TODATE']));
                          ?>
                          <tr>
                      <td></td>
                      <td><a href="<?php echo $this->baseUrl()?>/index/employeeprofile/id/<?php echo $records['EMPID']?>"><?php echo $records['NAME']?></a></td>                      <td><?php echo $records['EMPID']?></td>
                      <td><?php echo $records['CATEGORY']?></td>
                      <td><?php echo $records['SUBCATEGORY']?></td>
                      <td><?php echo $records['CONTACTDURING']?></td>
                      <td><?php echo $records['DEPARTMENT']?></td>
                      <td><?php echo $records['SUBDEPARTMENT']?></td>
                      <td><?php echo $records['STATUS']?></td>
                      <td><?php echo $newDate;?></td>
                      <td><?php echo $newDate1;?></td>
                      <td><?php echo $records['TOTALDAYS']?></td>
                      <td><?php echo $records['DEATHCATEGORY']?></td>
                          </tr>
                   <?php }?>
                </tbody>
</table>
<?php }else{   echo "</br></br><div align='center'><h2>No Leave Record Found</h2></div>";
}?>
<script type="text/javascript">
var record=0;
$("#grid").kendoGrid({
        schema: {
        model: {
            fields: {
SNO: { type: "number"},
               NAME: { type: "string"},
               EMPID: { type: "string"},
               CATEGORY: { type: "string" },
               SUBCATEGORY: { type: "string" },
               CONTACTDURING: { type: "string" },
               DEPARTMENT: { type: "string" },
               SUBDEPARTMENT: { type: "string" },
               STATUS: { type: "string" },
               datefrom: { type: "date" },
               TODATE: { type: "date" },
               TOTALDAYS: { type: "string" },
               DEATHCATEGORY: { type: "string" }


            }

        }
    },
    groupable: true,
    navigatable: true,
    columnMenu: true,
    columns: [
   {
       title: " ",
       template: "#= ++record #",
       width: 60

    },
{
        field: "NAME",
        title: "NAME",

    },

    {
        field: "EMPID",
        title: "EMPID",

    },
    {
        field: "CATEGORY",
        title: "CATEGORY",

    },
    {
        field: "SUBCATEGORY",
        title: "SUBCATEGORY",

    },
    {
        field: "CONTACTDURING",
        title: "CONTACTDURING",

    },
    {
        field: "DEPARTMENT",
        title: "DEPARTMENT",

    },
    {
        field: "SUBDEPARTMENT",
        title: "SUBDEPARTMENT",

    },
    {

    field: "STATUS",
     title: "STATUS",


    },
    {
         field: "datefrom",
         title: "FROMDATE",
         template: '#= kendo.toString(kendo.parseDate(datefrom, "dd/MMM/yy"), "dd/MMM/yy") #'
         //format: "{0:dd/MMM/yy}"

        },
    {

        field: "TODATE",
        title: "TODATE",
        template: '#= kendo.toString(kendo.parseDate(TODATE, "dd/MMM/yy"), "dd/MMM/yy") #'
        //format: "{0:yy}",
      },
      {
          field: "TOTALDAYS",
          title: "TOTALDAYS",


      },


    {

    field: "DEATHCATEGORY",
     title: "DEATHCATEGORY",
    }
],

    scrollable: true,
    navigatable: true,
    sortable: true,
    filterable: true,
    editable: "popup",

    dataBinding: function() {
        record = 0;

      }
   });

in above code from date and to date is not sorting properly..

Please help..

Grid

answered on 17 Aug 2016

1 answer

212 views

Angular directive elements in Kendo Row Templates

Hi guys,

I'm currently using Angular 1.5.x with Kendo UI Professional, the latest release (version 2016.2.504).

I have a kendo grid which uses row templates. In these row templates, I have a number of angular directive elements that is basically a wrapper around the Kendo combo box and a button. The kendo combo box is bound to a remote data source using the kendo.data.DataSource object. Whenever I attempt to add a new Row or remove an existing row from the Kendo grid, I think Kendo redraws everything in the grid and all of my angular elements get recreated so that each angular element with the remote data source goes through a DataBound event and calls the remote source again. This is highly inefficient is something that I want to avoid overall. I know that if I just use a plain old kendo combo box instead of my angular wrapper element, this doesn't happen, but that's not what I want. Can anyone help me with this? Is there some way I can stop the angular element from being recreated whenever I want to add a new row or remove an existing row from the Kendo grid?

Thanks in advance for the help!

Grid

answered on 16 Aug 2016

1 answer

106 views

[Solved] Propose TypeScript definitions files structure update

Idea was born because of this answer.

I propose you should reconsider splitting options into two interfaces. One for constructor and one for common use. TypeScript users would gain a lot, since this tell us which properties exists on specific widget and are safe to use.

The other benefit is to avoid typecasting to any.

Propose definition structure:

class Window extends kendo.ui.Widget

{

static fn: Window;

options: WindowProperties; //notice a change

readonly isMaximized?: boolean;

element: JQuery;

wrapper: JQuery;

static extend(proto: Object): Window;

constructor(element: Element, options?: WindowOptions);

center(): kendo.ui.Window;

close(): kendo.ui.Window;

content(): string;

content(content?: string): kendo.ui.Window;

content(content?: JQuery): kendo.ui.Window;

destroy(): void;

maximize(): kendo.ui.Window;

minimize(): kendo.ui.Window;

open(): kendo.ui.Window;

pin(): void;

refresh(options: any): kendo.ui.Window;

restore(): kendo.ui.Window;

setOptions(options: any): void;

title(): string;

title(text?: string): kendo.ui.Window;

toFront(): kendo.ui.Window;

toggleMaximization(): kendo.ui.Window;

unpin(): void;

}

interface WindowOptions {

name?: string;

actions?: any;

animation?: boolean|WindowAnimation;

appendTo?: any|string;

autoFocus?: boolean;

content?: WindowContent;

draggable?: boolean;

iframe?: boolean;

height?: number|string;

maxHeight?: number;

maxWidth?: number;

minHeight?: number;

minWidth?: number;

modal?: boolean;

pinned?: boolean;

position?: WindowPosition;

resizable?: boolean;

scrollable?: boolean;

title?: string|boolean;

visible?: boolean;

width?: number|string;

activate?(e: WindowEvent): void;

close?(e: WindowCloseEvent): void;

deactivate?(e: WindowEvent): void;

dragend?(e: WindowEvent): void;

dragstart?(e: WindowEvent): void;

error?(e: WindowErrorEvent): void;

maximize?(e: WindowEvent): void;

minimize?(e: WindowEvent): void;

open?(e: WindowEvent): void;

refresh?(e: WindowEvent): void;

resize?(e: WindowEvent): void;

}

interface WindowProperties extends WindowOptions

{

isMaximized?: boolean;

}

General Discussions

answered on 16 Aug 2016

1 answer

98 views

drawDOM drops a div tag in Chrome, but not in IE or Firefox

We generate a rather complex nested div and when we use drawDOM to export to PDF it works most of the time. Sometimes, however, it drops one of the internal divs. This only happens in Chrome, and not in IE or Firefox.

Please see sample code at dojo.telerik.com/uTAnE/5

Note then when run Safari, the exported PDF correctly includes both boxes on the 13th (the yellow and the gray box). On Chrome, however, the yellow box is missing. This seems to be data-dependent as if we have more internal boxes, everything is OK.

Any help you could provide would be greatly appreciated.

Drawing API