Questions on Kendo UI for jQuery Forum

0 answers

183 views

Save changes button doesn't call update method (apply changes from template column)

Hi

I have grid with template for column A

template: '<input type="checkbox" class="Acolumn" #= A ? checked="checked" : "" # />'

and delegate

$(divGrid).delegate(".AColumn", "click", function (e) {

var dataItem = grid.dataItem($(this).closest("tr"));

dataItem.A = $(this).is(':checked');

});

Data Source configured with following options: autosync, transport update url, batch

Grid configuration : editable. Save changes button at the grid header.

It works ok when checkbox is selected data in data source changed successfully but Save changes button of the grid doesn't call update method of data source.

What could be a reason of this issue?

Grid

asked on 24 Jul 2012

2 answers

72 views

TabStrip and Backbuttons (doubled transition)

I'm using a TabStrip together with some list / detail views like in the sushi demo.
Whenever you're opening a details page, clicking back and afterwards opening a details page of another tab the following back-transition is executed twice.
Confirmed that on the sushi demo as well.
Tested in android, iOS and Google Chrome.
Any Workarounds?

Thx

TabStrip (Mobile)

answered on 24 Jul 2012

1 answer

108 views

Form Control Touch Problem

I have several html selects on a form. Once I package my application and deploy it via phonegap, it is VERY hard to select the drop down lists. I have to push about 3/4 of an inch to the top and left of each list to get it to work and even then it doesn't seem to work all of the time. Is there something that I am doing wrong. They are just regular select lists:

<select id="SelectText">
    <option selected="selected" value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

General Discussions

answered on 24 Jul 2012

0 answers

103 views

Select single row without command column

I have used Kendo grid, I need to select a row without command columns.

Here is my code..

var grid = $("#grid").kendoGrid({
  dataSource: grid,
  height: 450,
  sortable: true,
  selectable: "row",
  columns: [
  { field: "user" },
  { field: "subject" },
  { field: "status" },
{ command: ["Update"], title: "Subscribe" },
  { command: ["destroy "], title: "Delete"}
]
  });

In UI i want to select user, subject, status only.

Grid

asked on 24 Jul 2012

2 answers

77 views

i understand about gird not support html

help me please!

Grid

answered on 24 Jul 2012

1 answer

109 views

Tab Key in modal Window

When I use modal Window and press Tab Key, focus leave the Window. It's not right. Do you have a solution of this problem? Or I need add the handler "keydown" on document and catch window blur? Thank's.

Window

answered on 24 Jul 2012

0 answers

103 views

events calender/scheduler like Radscheduler

Any plans to implement one in Kendo UI,

Found this which is the perfect thing we are looking for

http://wijmo.com/demo/explore/#eventscalendar|overview

But would rather it in Kendo ui?

Calendar

asked on 24 Jul 2012

4 answers

255 views

Problem with Displaying Tabs

Hi,

I am having problem with dynamically adding tabs.I want to add a new tab when ever i have clicked the addtab in the tabstrip.
Then a new tab with the content is adding.but the thing is it is showing two contents.
I am sending a sample project please have a look and can you provide me an solution or sample

Thanking You

TabStrip

answered on 24 Jul 2012

1 answer

286 views

KendoUI JQuery with MVC

I know this does not sound smart but im trying to use KendoUI Jquery grid with MVC and the problem is the parameter of the event create, update is empty

    <script type="text/javascript">
        $(document).ready(function () {
 
            var transport = {
                read: {
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "JQueryGrid/Grid_Read"
                },
                update: {
                    url: "JQueryGrid/Grid_Update",
                    contentType: "application/json; charset=utf-8",
                    type: "POST"
                },
                create: {
                    url: "JQueryGrid/Grid_Create",
                    type: "POST"
                },
                destroy: {
                    contentType: "application/json; charset=utf-8",
                    url: "JQueryGrid/Grid_Destroy",
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (data, operation) {
                    return kendo.stringify(data);
                }
            };
 
            var dataSource = new kendo.data.DataSource({
                transport: transport,
                batch: true,
                pageSize: 30,
                schema: {
                    model: {
                        id: "PersonalID",
                        fields: {
                            PersonalID: { type: "number", editable: false },
                            FirstName: { type: "string", validation: { required: true} },
                            LastName: { type: "string", validation: { required: true} },
                            DOB: { type: "date" }
                        }
                    }
                }
            });
 
            $("#grid").kendoGrid({
                dataSource: dataSource,
                height: 250,
                filterable: true,
                type: "odata",
                sortable: true,
                pageable: true,
                editable: "inline",
                toolbar: ["create"],
                columns: [
                    {
                        field: "PersonalID",
                        filterable: false,
                        width: 100
                    }, {
                        field: "FirstName",
                        title: "First Name",
                        width: 200
                    }, {
                        field: "LastName",
                        title: "Last Name",
                        width: 200
                    }, {
                        field: "DOB",
                        title: "Date born",
                        width: 100,
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        command: ["edit", "destroy"], title: "&nbsp;", width: "210px"
                    }
                ]
            });
        });
    </script>

        public ActionResult Grid_Read()
        {
            var personalDtos = _personalService.GetAllPersonalByFilters(1, string.Empty);
            return Json(personalDtos);
        }
 
        [HttpPost]
        public ActionResult Grid_Update(PersonalDto dto) //<--- comes empty
        {
            var personalDtos = _personalService.GetAllPersonalByFilters(1, string.Empty);
            return Json(personalDtos);
        }
 
        [HttpPost]
        public ActionResult Grid_Create(PersonalDto dto) //<--- comes empty
        {
            var personalDtos = _personalService.GetAllPersonalByFilters(1, string.Empty);
            return Json(personalDtos);
        }

Grid

answered on 24 Jul 2012

0 answers

197 views

Change grid properties based on condition/role

Hi All,

I was wondering if something I used frequently in the MVC suite is available in the framework release of the kendoui grid.

Basically I tend to vary the columns/edit function of a grid based on user role = Previously I would do something like this..

var grid = Html.Telerik().Grid<StaffRoleGridItem>()

.Name("OStaffRoles")

.DataBinding(db =>

{

db.Ajax()

.Select("_ListUsers", "Ajax", new { type = Model.Type });

})

.Columns(c =>

{

c.Bound(o => o.Id).Hidden();

c.Bound(o => o.Name).Title("User/Group Name");

c.Bound(o => o.Role).Title("Role in Project");

});

if ((POModel.ViewMode)ViewBag.Mode == PMOBaseModel.ViewMode.CREATE)

{

grid

.DataKeys(keys => keys.Add(o => o.Id))

.ToolBar(cmd =>

{

cmd.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left: 0" }).Text("Add New Role");

})

.DataBinding(db =>

{

db.Ajax()

.Insert("_InsertUser", "Ajax", new { type = Model.Type })

.Update("_EditUser", "Ajax", new { type = Model.Type })

.Delete("_DeleteUser", "Ajax", new { type = Model.Type });

})

.Columns(c =>

{

c.Command(cmd =>

{

cmd.Edit().ButtonType(GridButtonType.Text);

cmd.Delete().ButtonType(GridButtonType.Text);

}).Width(190);

})

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

.ClientEvents(ev => ev.OnEdit("onRoleEdit"));

}

grid.Render();

Calling the .Render() function of the MVC grid late gives me the option to change its nature based on the roles attributed to the user.

Does anyone know of a method to do something similar to this in the clientside JS for the grid?

any help appreciated.

Grid

asked on 24 Jul 2012