Questions on Kendo UI for jQuery Forum

1 answer

102 views

Error when clicking edit button - editable: popup

My grid loads all the data without any errors and it's configured to be a popup edit window. When clicking edit, nothing happens to the grid and I don't get a popup window. Instead I receive the following error:

Uncaught TypeError: Cannot read property 'type' of undefined

I'm not really sure where to start on this since my error isn't so helpful. Any ideas? I also don't want to throw a bunch of useless information up here so let me know what details are needed from my script to get started.

Grid

answered on 07 Sep 2012

2 answers

167 views

Instant Grid Editor + more information on cell editors

A lot of people in my company hate the "click to activate edit mode". For the boolean editor, you have to click to edit it and then click again to switch it.

Replacing the rendering with just a checkbox has weird results. So I've tried to come up with a custom editor:

function instantBoolEditor(container, options) {

// flip value

options.model.set('enabled', !options.model.enabled);

// replace html with the same template the column uses

[...]

// should I do something like trigger change?

options.model.trigger("change", {container: container, model:options.model});

}

Is this the right way to do it and maintain that changes get fired on the datasource change event? Am I messing up data binding?
Is there any more information about custom editors except for the one example here? (http://docs.kendoui.com/api/web/grid) It's very terse info!
That api page mentions these items, but there is no example use that gives any indication what kind of options are "additional options" ??

columns.editor.container Object

The container in which the editor must be added.

columns.editor.options Object

Additional options.

columns.editor.options.field String

The field for the editor.

columns.editor.options.model Object

Grid

answered on 07 Sep 2012

3 answers

947 views

Grid Details Toolbar Create function not working

The toolbar in the details grid will not open a "popup" or "inline" when I click the create function. The "save", "cancel", "delete" all work. Am I missing something? Also, the "create" in the main grid works just fine.




    var sigSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "signatures/sigrequests_json_output",
                dataType: "json"
            },
            create: {
                url: "signatures/Create",
                dataType: "json"
            }
        },
        schema: {
            data: "results",
            total: "count",
            model: {
                id: "sigreq",
                fields: {
                    ticket_uid: { editable: false },
                    name: { type: "string", validation: { required:true } },
                    description: { type: "string" },
                    assigned_to: { editable: false, defaultValue: return_user() },
                    current_status: { editable: true },
                    priority: { editable: true },
                    ticket_tlp: { editable: true },
                    ticket_type: { editable: true },
                    discovery: { editable: true },
                    rule_type: { editable: true },
                    rule_category: { editable: true },
                    parent_template: { editable: true },
                    reference: { editable: true },
                    date_created: { editable: false }
                }
            }
        },
        batch: false,
        pageSize: 100,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
     
    $("#kendosigsrequests").kendoGrid({
        dataSource: sigSource,
        filterable: true,
        sortable: true,
        scrollable: true,
        reorderable: true,
        columnMenu: true,
        height: 600,
        toolbar: [ { name: "create", text: "Create New Request" } ],
        pageable: {
            refresh: true,
            pageSizes: [10, 20, 50, 100, 150, 200, 300]
        },
        detailInit: detailInit,
        dataBound: function() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [ 
            { field : "name", title : "Name", width : 200 }, 
            { field : "description", title : "Description", width : 200 }, 
            { field : "assigned_to", title : "Assigned To", width : 200 }, 
            { field : "current_status", title : "Current Status", width : 150, editor: stautsDropDownEditor },
            { field : "priority", title : "Priority", width : 90, editor: priorityDropDownEditor }, 
            { field : "ticket_tlp", title : "TLP", width : 90, editor: tickettlpDropDownEditor },
            { field : "ticket_type", title : "Type", width : 90, editor: tickettypeDropDownEditor},
            { field : "discovery", title : "Discovery", width : 100, editor: discoveryDropDownEditor },
            { field : "rule_type", title : "Rule Type", width : 100, editor: ruletypeDropDownEditor },
            { field : "rule_category", title : "Rule Category", width : 100 },
            { field : "parent_template", title : "Parent Template", width : 300, editor: categoryDropDownEditor },
            { field : "reference", title : "Reference" },
            ],
            editable: "popup"
    });
     
/////////////////////////////////////////
    function detailInit(e) {
         
        var detailRow = e.detailRow;
 
        var commentSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "signatures/Comments",
                    dataType: "json"
                },
                create: {
                    url: "signatures/NewComment",
                    dataType: "json"
                },
                update: {
                    url: "signatures/UpdateComment",
                    dataType: "json"
                }
            },
            batch: true,
            pageSize: 6,
            schema: {
                data: "comments",
                model: {
                    id: "comment",
                    fields: {
                        ticket_uid: { editable: true },
                        user: { editable: true },
                        comment: { editable: true },
                        date_created: { editable: true }
                    }
                }
            },
            filter: { field: "ticket_uid", value: e.data.ticket_uid }
        });
 
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: commentSource,
            toolbar: ["create"],
            pageable: true,
            editable: "inline",
            columns: [
                { field: "date_created", title: "Date",  width: 150 },
                { field: "user", title: "By", width: 100 },
                { field: "comment", title: "Comment" },
                { command: "edit" }
            ]
        });
    }

Grid

answered on 07 Sep 2012

0 answers

126 views

Store edited nodes in a array

A
1
2
3
B
1
2
3
I have tree view which has editable functionality. When user edits the node and click on save, it should save the newly edited nodes in an array. I gone through some examples given and tried observablearray, assigning new data to the datasource but it is not recorded. Please help!. Thank you.

TreeView

asked on 07 Sep 2012

1 answer

106 views

Unable to create the picker

I am using the Kendo UI web version Trial.
I am using jQuery 1.8.2 and I am unable to create the dateTimePicker in my asp.net mvc website.

I receive a Javascript error stating that the "Object does not support this Property or Method".
I think this might be due to referencing it incorrrectly.
I have looked at the source of the rendred page and it looks ok.

I am not sure what all I should include for it? Please let me know.

Thanks

DatePicker

answered on 07 Sep 2012

0 answers

505 views

Grid with Custom Popup Editor containing DatePicker

I'm trying to get the DatePicker inside my grid's custom popup editor to init/show the Date from my DataSource ...
Here's a fiddle to show you what I mean: http://jsfiddle.net/kzpzC/4/

<div id="grid" class="k-content clearfix"></div>

<script id="templ" type="text/x-kendo-template">
  <div data-container-for="expires_at" class="k-edit-field">
  <input type="date" name="expires_at" data-bind="value:expires_at" data-role="datepicker"/>
  </div>
</script>

$('#grid').kendoGrid({
  dataSource: {
  data: [
  {
  name: 'test 1',
  expires_at: "2010-11-01T00:00:00Z"},
  {
  name: 'test 2',
  expires_at: "2012-04-25T00:00:00Z"}
  ],
  pageSize: 10
  },
  columns: [
  {
  field: "name",
  title: "Name",
  template: '<strong>#=name#</strong>'},
  {
  field: "expires_at",
  title: "Date",
  template: '#= kendo.toString(new Date(expires_at), "MM/dd/yyyy") #',
  width: "100px"},
  {
  command: ["edit"],
  title: " ",
  width: "210px"}
  ],
  editable: {
  mode: "popup",
  template: kendo.template($('#templ').html(), {
  useWithBlock: false
  }),
  update: true,
  destroy: false
  }
});

Maybe someone can point me in the right direction ...!?

thanks

Grid

asked on 07 Sep 2012

4 answers

447 views

[Solved] Double click on grid to show a new get url.

Hi!

How do i make so this code work?

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

function grid_selected(e) {

var id;

grid.select().each(function() {

// CRASH HERE.. Doesent get a dataitem.

var dataItem = grid.dataItem($(this));

id = dataItem.SalonID;

})

window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;

}

The problem is that i doesent get out a SalonID value so i can redirect.

Here is the full code:

<p>

@(Html.Kendo().AutoComplete()

.Name("searchField")

.DataTextField("SalonName")

.Filter("Contains")

.Placeholder("Search..")

.DataSource(dataSource =>

{

dataSource.Read(read =>

{

read.Action("GetAutoCompleteItems", "Salon");

})

.ServerFiltering(false);

})

.Events(events => events.Change("autoComplete_selected"))

)

</p>

<div id="Grid">

@(Html.Kendo().Grid(Model)

.Name("GridField")

.Columns(columns =>

{

columns.Bound(item => item.SalonID);

columns.Bound(item => item.Avtnr);

columns.Bound(item => item.SalonName);

columns.Bound(item => item.Street);

columns.Bound(item => item.ZipCode);

columns.Bound(item => item.City);

columns.Bound(item => item.Telephone);

columns.Bound(item => item.SalonEmail);

columns.Bound(item => item.Description);

columns.Bound(item => item.ContactPerson);

})

.ColumnMenu()

.Groupable()

.Pageable()

.Sortable()

.Resizable(resize => resize.Columns(true))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Read", "Salon"))

.ServerOperation(false)

)

.Events(events => events.Change("grid_selected"))

)

</div>

<script type="text/javascript">

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

function grid_selected(e) {

var id;

grid.select().each(function() {

var dataItem = grid.dataItem($(this

));

	// CRASH HERE.. Doesent get a dataitem. 

	id = dataItem.SalonID;

})

window.location.href = "@Url.Action("Details", "Salon")" + "/" + id;

}

//

// Filter the grid when searching..

//

function autoComplete_selected(e) {

var value = this.value();

if (value) {

grid.data("kendoGrid").dataSource.filter({ field: "SalonName", operator: "contains", value: value });

}

else {

grid.data("kendoGrid").dataSource.filter({});

}

</script>

I also in want that when i type 1 letter in the autocomplet, the grid should filter directly & right now im only avalible to search/filter 1 column in my db, i want to choose several tables to be searchable.

Ty!

Grid

answered on 07 Sep 2012

3 answers

262 views

Kendo Calender not showing up..

I am new to Kendo UI as well as MVC 4 ... i am trying to use this Kendo UI calender in a view but its not showing up... what am i missing ... I am using basic MVC 4 template in Visual studio 2010 and included all js and styles in it

I have given proper js and css links in _Layout.cshtml

Plz help

Calendar