Questions on Kendo UI for jQuery Forum

1 answer

295 views

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

225 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

2 answers

159 views

Dealing with complex data in grid

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "http://localhost:8888/mysite/xml/sample.json"

},

schema: {

model: {

fields: {

id: { type: "number" },

data: { type: "json" }

}

},

pageSize: 5

},

height: 250,

pageable: true,

columns: [{

field:"id",

title: "Record ID",

filterable: false

},

{

field: "data",

title: "Data String"

}

],

});

and I have json data in this format:

[

{

"id":0,

"data":[

{

"source":"Lotus Domino XML Mail",

"title":"Mr SYDPER",

"path":"/NSF//Marketing/Travel Itininery"

}

]

},

{

"id":1,

"data":[

{

"source":"Lotus Domino XML Mail",

"title":"Re: CMI statement for",

"path":"/Marketing/Mark"

}

]

}

]

How do I have my data column display the data in the grid?

Thanks

Grid

answered on 24 Jul 2012

7 answers

321 views

[Solved] Querystring lost

Loading content with querystring parameters

content:
"../../content/web/window/ajax/ajaxContent.html?op=b3A9bGlzdCZpZD03MTUwNmY4Ni1jODk3LTQ3MjItYjcxNy01OTgxNWNiZmQxNmI="

The problem since Kendo Window is loaded as an XHR, the rquestUrl is not visable to the script running inside the Content.html (i.e. location.search) page. Ideas on passing parameters to Kendo Windows?

Window

answered on 24 Jul 2012

8 answers

229 views

[Solved] EmptyText property?

Is there an EmptyText property in the combobox like you have in the silverlight combobox? If not, what is the best way to go about duplicating that functionality? In the old days I would just set it and clear it in the gotfocus / onfocus events, is that how it shoud be done here or is there an easier way?

ComboBox

answered on 24 Jul 2012

1 answer

133 views

[Solved] Missing _dequeueRequest?

Hi,
I'm using custom errors where retrieving data from server.

dataSource = new kendo.data.DataSource({

type: "json",

serverPaging: true,

serverSorting: true,

serverFiltering: false,

error: function (e) {

// display custom error

},

...

});

If an error occurred on the server when retrieving data, server respond with some error message which is handled in your success function.

success: function(data) {

var that = this,

options = that.options,

hasGroups = options.serverGrouping === true && that._group && that._group.length > 0;

data = that.reader.parse(data);

if (that._handleCustomErrors(data)) {

// should dequeue request!

// that._dequeueRequest();

return;

}

...

that._dequeueRequest(); // only called if any data is retrived

that._process(that._data);

}

but there is no that._dequeueRequest(), so any new request is not started.

Thanks in advance!

Data Source

answered on 24 Jul 2012

8 answers

2.8K+ views

[Solved] MVC Kendo Grid, Ajax Request

Im using the MVC wrappers for the Kendo UI, and placing a grid on the page, getting its data from an Ajax Request. Im following the example almost identically (VS MVC Kendo UI examples - Paging) however my site issues a GET request where the demo issues a POST request. I cant find where that is happening or how to change it. My site $)$ errors, because I dont have a GET request action method, mine follows the

[HttpPost]
        public ActionResult _AjaxProducts([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_ps.GetProducts(ViewData["ProductType"].ToString()).ToDataSourceResult(request));
        }

Any ideas why my page uses a GET but the demo uses POST?

Html.Kendo().Grid<Web.BusinessLayer.Models.Product.ProductModel>()
    .Name("Products")
    .ColumnMenu()

    .Columns(columns =>
    {
....
    })
    .Pageable(pager => pager
        .Refresh(true)
        .PageSizes(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_AjaxProducts", "Inventory"))
    )
)

Grid

answered on 24 Jul 2012

3 answers

950 views

Working with arrays

How are you supposed to work with arrays? I am messing with the "elements.html" example provided in the download for the beta and when I try to change the array of fruits to a new array, it doesn't work correctly (places that bind to it show the array as a comma-separated list instead of as distinct values).

In the example, I added this method to the viewModel (bound to a button)...

changeStuff: function(e) {
e.preventDefault();
this.set("fruits", ["Pear", "Peach", "Plumb"]);
}

When I click the button, the "Select" and "Multiple select" lists are updated, but instead of individual lines for each fruit, it shows all the fruits on the same line separated by commas.

Also, how would I just change a single value in the list? For example, change "Banana" to "Pineapple"?

MVVM

answered on 24 Jul 2012

3 answers

420 views

Rebuild TreeView with new data

Hello,

I want to rebuild the Treeview with new data. I use this code:

$(#treview)

.removeClass('k-treeview')

.empty();

$(#treeview).kendoTreeView({

dataSource: getNewdata(),

select: onNodeSelect

});

The tree is rebuild well but the function onNodeSelect is called two times if I select a node.
Is there a way to clear also event handling for select?

TreeView