The DateTimePicker does not appear to be able to bind to a DateTimeOffset type nor have the capability to deal with different time zones. With global applications this capability is important. Is there a plan to include this functionality in the future? In the meantime, is there a recommended pattern to handle DateTimeOffset values?

Hi friends,

I have a strange problem in Kendo UI - which I dont understand.

This is my code.

$(document).ready(function() {

        var kendo_dataSource = new kendo.data.DataSource({
            autoSync: true,
            batch: true,
            transport: {
                read: {
                    url: "<?php echo BASE_URL . 'kendo/kendo_grid_read' ?>",
                    dataType: "json"
                },
                destroy: {
                    url: "<?php echo BASE_URL . 'kendo/kendo_grid_destroy' ?>",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function(data, type) {
                    if (type == "destroy") {
                        return {models: data.models}
                    }
                }
            },
            serverFiltering: true,
            serverGrouping: true,
            serverPaging: true,
            page: 1,
            pageSize: 5,
            schema: {
                data: "results",
                total: "total",
                model: {
                    id: "field1"
                }
            }
        });

        $("#kendo_grid2").kendoGrid({
            dataSource: kendo_dataSource,
            height: 300,
            filterable: true,
            sortable: true,
            pageable: true,
            selectable: "multiple row",
            columns: [
                {
                    field: "field1"
                },
                {
                    field: "field2"
                },
                {
                    field: "field3"
                }
            ]
        });

        $("#test_button").on("click", function() {
            var selectedRows = $("#kendo_grid2").data("kendoGrid").select();
            if (selectedRows.length > 0) {
                for (var i = 0; i < selectedRows.length; i++) {
                    var dataItem = $("#kendo_grid2").data("kendoGrid").dataItem(selectedRows[i]);
                    console.log(dataItem);
                    kendo_dataSource.remove(dataItem);
                }
            }
        });

    });

Here goes the situation.

When the $("#test_button").on("click", function() is fired, it checks for the selected rows in the grid - and delete the rows.

If I select 2 rows, it deletes 2 rows. And the 2 rows are disappeared from the Grid.

But, I see something strange -

whhen 2 rows are deleted, there is 2 POST request - which is fine.

But the first POST request's parameters are

    models[0][field1]    3
    models[0][field2]    poioioi
    models[0][field3]    oiuoiuuigbhkjh
    models[0][field4]    kjh kjhkjhyt

And the second POST request's parameters are

    models[0][field1]    3
    models[0][field2]    poioioi
    models[0][field3]    oiuoiuuigbhkjh
    models[0][field4]    kjh kjhkjhyt
    models[1][field1]    4
    models[1][field2]    kjhk hkiui
    models[1][field3]    khkj
    models[1][field4]    mkhkhkhkjhghgfgdf

And I understand that, I can access the data in the server like this

    foreach ($_POST['models'] as $model) {
                echo $model['field1'];           
    }

I was wondering if its possible to send only one request - possibly the second POST request only, as I can delete the 2 rows in one request.

Or sending 2 separate request but with only one model at a time?

Is it possible?

Any help would be greatly appreciated.

I understand that autoSync should be set to false and I should I call  to solve this situation.

But, I wonder if where should I call it? After the for loop ?

With kind regards,

Ajeesh

Hi, 

I  am trying to create a Kendo Mobile ListView with infinite scrolling and a detail view.
When I select a list item the e.dataItem allows me to pass data to display on selected Item Detail view.
This works fine until the infinite scroll is triggered and loads in more list items...
The DataSource then appears to no longer contain the old items, and therefore e.dataItem is undefined.
I can't seem to find a method that works?

Thanks for your help,
David

// kendoMobileListView code snippet:

PS. It would also be nice to have some examples/demos showing infinite scroller and a detail view?

   Hi, 
I was trying to open the following window on the button click using " $("#window").data("kendoWindow").open();" but the window opens with a extremely small  width and height i tried to specify height and width to window but to no vail. 
Have specified the following window inside a Form tag 
@(Html.Kendo().Window()
    .Name("window")
    .Title("PersonSearch")
                .Content(
                                          Html.Partial("_PersonSearch", new PersonSearchModel()).ToHtmlString()
                        )
    .Draggable()
    .Resizable()
    .Width(980)
            //.Height(350)
    .Visible(false)
    .Modal(true)
    .Events(ev => ev.Open("onOpen"))
)

_personsearch is the partial view that i load in the window it gets loaded properly

I am new to kendo ui and mvvm, and I'm facing this issue:

I'm having a JSON file in the follow format:

    [
    {
    "Id":1,
    "img":"shoes.png"},
    {"Id":2,
    "img":"books.png"}
        }
    ]
I am reading the file using the sample mentioned online by you'll as follows:

    var crudServiceBaseUrl = "pro.json";
        var viewModel = kendo.observable({
                productsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        destroy: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                            return options;
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "Id"
                        }
                    }
                })
            });

            kendo.bind($("#form-container"), viewModel);

I am able to bind the data from the data source to a Kendo Control such as a dropdownlist or some other Kendo Control. But when I try binding the data to an HTML Control (mostly an img tag). It stops working and gives an error saying "this.parent" is not a function.

following is the HTML which works:

    Select Product: <select data-role="dropdownlist" data-value-field="Id" data-text-field="img"
                             data-bind="source: productsSource"></select>

However binding to a normal `<img>` tag does not work. In short I need to bind images based on src value to a div using kendo ui mvvm.

Kindly help me out. Thanks!!

-
Hardik

Hello,

This is an example on how to use Kendo Splitter to build a Web Application Fluid Layout,

It is very simple... It just resize the panes based on the window and outer panes size...

Fluid Web App Layput - DEMO SPLITTER

Maybe Kendo DEVS want to optimize it and put this on Official Demo.

I hope this help you....

I want to use NumericTextBox to input student scores. Most of the time this is numbers. It's easier with tablets.

However we have some special codes that we have to treat.

Like "AB" for Absent, ou "EX", Exemption.  We convert these code to negative numbers, on input/output.

What do you think is the better way to deal with this kind of input with Kendo ? 

Thanks

This should be simple
My grid gets the data initially as expected but doesn't do anything when the update button is clicked while adding a new record.

@(Html.Kendo().Grid<DepartmentViewModel>()

      .Name("DepartmentsGrid")

      .ToolBar(t => t.Create().Text("New Department"))

      .Editable(editable => editable.Mode(GridEditMode.InLine))

      .Columns(columns =>

          {

              columns.Bound(d => d.Name);

              columns.Bound(d => d.Email);

              columns.Bound(d => d.Phone);

              columns.Command(c => c.Edit());

          }).Filterable().Groupable().Sortable().Pageable()

            .DataSource(datasource => datasource

                .Ajax()

                .Events(events => events.Error("error_handler"))

                .Create("CreateDepartment","Admin")

                .Update("UpdateDepartment","Admin")

                .Model(m=> m.Id(id => id.Id))

                .Read(read => read.Action("DepartmentsGridData", "Admin"))))

My server code is here.

public partial class AdminController

   {

       public ActionResult Departments()

       {

           return View();

       }

 

       public ActionResult DepartmentsGridData([DataSourceRequest] DataSourceRequest request)

       {

           var data = _departmentService.GetDepartments();

           var model = data.ToDataSourceResult(request);

           return Json(model);

       }

       [HttpPost]

       public ActionResult CreateDepartment([DataSourceRequest] DataSourceRequest request,Department department)

       {

           return null;

       }

       [HttpPost]

       public ActionResult UpdateDepartment([DataSourceRequest] DataSourceRequest request,Department department)

       {

           return null;

       }

   }

Any help would be greatly appreciated.

Hello

I'm using KendoUI with ASP.NET. Setting the position of a KendoUI window element is relatively easy, but I'm finding it difficult to get position(top, left) dynamically.

Can it be done? If window is moved from its original position to other, can I somehow read the new coordinates. The information has to be somewhere because positions are know when a window is closed and opened again.

Cheers,
JoonasK

My solution requires us to add rows programatically. There is a complication in that the rows need to be added to a subgrid. Looks like it works but the data is now being saved. To test our problem, I have added a button which runs the function below on your grid-odata-crud example which I downloaded from github.

            function AddRow() {
                var productsGrid = $('#grid').data('kendoGrid');
                var dataSource = productsGrid.dataSource;
                dataSource.add({ ProductID: 10002, ProductName: 'A Johns Product 1', UnitPrice: 10.00, UnitsInStock: 5, Discontinued: false });
                dataSource.sync();
                console.log('Done');
            }

Should the above work. No rows are added to the database using this technique although I can add rows in the usual manner via the 'Add new record' button.

Hope you can help.