Questions on Kendo UI for jQuery Forum

1 answer

122 views

Implementing the Popup editing in this way:
$("#gridAddresses").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {url:'api/AddressInfo?type=customer&id=' + idEntity, type:'GET'},
update: {url:'api/AddressInfo', type:'PUT'},
destroy:{url:'api/AddressInfo',type:'DELETE'},
create: {url:'api/AddressInfo?idCustomer=' + idEntity, type:'POST'}
},

pageSize: 3,
batch:false,
schema: {
model: {
id: "idAddressInfo",
fields: {
idAddressInfo: { editable: false },
Description: {type:"string" },
Address: {type:"string" },
City: { type:"string"},
State: { type:"string"} ,
ZipCode: { type:"string"}
}
}
}

},
toolbar: [{name:"create",text:"",width:20}],
columns: [
{ field:"Description", title: "Description", width: "180px" },
{ field:"Address", title: "Address", width: "200px" },
{ field: "City", title:"City", width: "150px" },
{ field: "State", title:"State", width: "90px" },
{ field: "ZipCode", title:"Zip", width: "60px" },

{ command: [{name:"edit",text:"",width:20}, {name:"destroy",text:"",width:20}], title: " ", width: "150px" }],
editable:{
mode: "popup"

}
});

Clicking in "Create" button a void "Edit" popup is shown (not a "Create" popup as I axpected)...
Clicking the "Update" on the popup dialog the PUT method is invoked instead PUSH... so the server persisting procedure fails.
What is the problem?

Grid

answered on 17 Oct 2012

4 answers

189 views

Datepicker column not included when submitting

Hi, Sorry if this is a repost on my post, I apologies for that. Btw, I tried doing it myself, but the column does not submit itself when creating or editing. Can you please help me with this? PS: All columns are just examples. Please do not based on their respective names.

Here's the grid:

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

height: 340,

toolbar: ["create"],

columns:

[{"field":"firstName","title":"First name"},{"field":"nickName","title":"Nick Name","template":"#= kendo.toString(nickName,'MM/dd/yyyy') #"},{"field":"lastName","width":"150px","editor":lastNameEditor},

{"command":"destroy","title":" ","width":"110px"}]                            ,

editable: true

});

Here's the DataSource:

var dataSource = new kendo.data.DataSource({

parameterMap: function(options, operation) {

//alert(operation);

return kendo.stringify(options);

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

transport: {

read: {

url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Read",

dataType: "json",

type: "POST",

data: {"SQLCMD":"SELECT * FROM gridTest","Table":["firstName","nickName","lastName"],"PrimaryKey":"peopleID"}

},

update: {

url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Update",

type: "POST"

},

destroy: {

url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Destroy",

type: "POST"

},

create: {

url: "http://localhost/EditableCrudGrid/gridtest.php?table=gridTest&mode=Create",

type: "POST",

data: {

req: ["firstName","nickName","lastName"] }

}

},

// determines if changes will be send to the server individually or as batch

batch: false,

//...

pageSize: 30,

data: blankData,

autoSync: true,

schema: {

model: {

id: "peopleID",

fields:

{

"peopleID":{"editable":false,"nullable":true},

"firstName":{"type":"string","validation":"required":true},"nullable":false,"defaultValue":""},

"nickName":{"type":"date","validation":{"required":true},"nullable":false,"parse":function(value) { return kendo.toString(value) }},

"lastName":{"type":"string","validation":"required":true},"nullable":false}}                             }

, parse: function (data) {

// alert(data);

return data;

}

});

Please, I hope you can help me. Thanks!

Grid

answered on 17 Oct 2012

2 answers

119 views

Horitzontal scroll on grid

Hi,
I cann't see how to create a horizontal scroll in a grid. I am interested to create a scroll that grouped header and body the grid, but not the footer. Is this possible to do?

Grid

answered on 17 Oct 2012

1 answer

103 views

What is best practice for multiple pages?

Hello,

Does anyone have a best practice solution for developing an application with e.g. 30 pages?
Many environments have common layouts reading in HTML fragments per page.
Are there solutions for that in Kendo UI?
Do I need 30 HTML pages or can I do something with e.g. the TabStrip loading partital content?

T.I.A.

Johan Borchers

General Discussions

answered on 17 Oct 2012

0 answers

168 views

Grid DateTime Filter Problem

I am not using Telerik RadGrid.....
and my data is bounded to grid as

@{Html.Telerik().Grid(Model)
            .Name("HistoryGrid").HtmlAttributes(new { style = "width:100%" })
            .ToolBar(toolbar => toolbar.Custom().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { style = " background-image: url('../../Content/images/clear-filter.png') !important" }).HtmlAttributes(new { onclick = "clearFilt(event)", title = "Clear All Filter" }))
            .DataKeys(keys => keys.Add(c => c.AssetID))
            .Columns(columns =>
            {
                columns.Bound(o => o.TableObject).Width(120).Title("Transaction");
                columns.Bound(o => o.TransactionType).Width(120).Title("Transaction Type");
                columns.Bound(o => o.UName).Width(120).Title("Updated by");
                columns.Bound(o => o.ColumnObject).Width(120).Title("Field Name");

               columns.Bound(o => o.DateofTransaction).Width(150).ClientTemplate("<#= toServerTime(DateofTransaction) #>").Title("Date of Transaction");

                columns.Bound(o => o.OldValue).Width(120);
                columns.Bound(o => o.NewValue).Width(120);
            })
            .DataBinding(binding => binding.Ajax()
                                       .Select("_History", "AssetInfo"))


            .Pageable(pager => pager.Style(GridPagerStyles.PageSizeDropDown | GridPagerStyles.NextPreviousAndInput))
            .Filterable(filtering => filtering.Enabled(true))
             .EnableCustomBinding(true)

            .Resizable(resizing => resizing.Columns(true))
            .Sortable(s => s.Enabled(true))
            .ColumnContextMenu()
            .Scrollable(builder => builder.Enabled(true).Height("100%"))
            .Selectable()
            .Render();
        }

and as of now am able to solve my UTC issue when I retrieve TIME along with DATE from Database and it is working fine.......

But now my problem is that the filter on the GRID datetime column is not working.....even though I has given time along with picking up the date from the calender......I need to get the filter by giving only Date, and the filtered values must be read based on Date only even-though, I show the Time in the grid. May I know how to solve the issue as soon as possible....Is there any simple solution I can find by simply changing the Telerik Scripts.... Am new to the usage of this product, please don't mind of giving me the detailed solution of solving this issue......

Thanks and Regards,
Jyotsna

Grid

asked on 17 Oct 2012

1 answer

378 views

Bind Object from DropdownList

How do i Bind object in model from dropdownlist ?

public class Country
{
public int Id {get; set;}
  public string Name{ get; set; }
}

public class City
{
public int Id {get; set;}
  public string Name{ get; set; }
public Country Country {get; set;}
}

Controller ....

public ActionResult Create()
{
var model = new City();
ViewBag.Countries= ... //Loading all countries typeof IQuerable<Country>
return View(model);
}

cshtml....

@model Entities.City

   @(Html.Kendo().DropDownListFor(m => m.Country)
.BindTo(ViewBag.Countries)
.DataValueField("Id")
.DataTextField("Name")
.OptionLabel("Please select."))

public ActionResult Create(City model)
{
if (ModelState.IsValid) /// <<== Error here..
{
var _obj = new City()
{
Name= model.Name,
Country = model.Country
};
}

Error is Model state is not valid. Because System.String cannot convert to Entities.Country

DropDownList

answered on 17 Oct 2012

2 answers

119 views

Using ad framework in your kendo app?

Are there ways to also use native things in your apps such as ad frameworks? Or even any other native functionality... This could be a deal breaking on my ability to use Kendo if not:(

General Discussions

answered on 17 Oct 2012

2 answers

718 views

DataSource Group by multiple fields remotely

Hi,

I would like to group data by multiple fields remotely on server. What is the data format for the grouping and grouped items ? For eg.,

I have a list of employees as follows :

Employee[] empList = new Employee[6];

empList[0] = new Employee() { Name = "CA", State = "A", Department = "xyz" };

empList[1] = new Employee() { Name = "ZP", State = "B", Department = "xyz" };

empList[2] = new Employee() { Name = "AC", State = "B", Department = "xyz" };

empList[3] = new Employee() { Name = "AA", State = "A", Department = "xyz" };

empList[4] = new Employee() { Name = "A2", State = "A", Department = "pqr" };

empList[5] = new Employee() { Name = "BA", State = "B", Department = "pqr" };

I would like to group the employee list by State and then by Department.   So my groupings and grouped items would be :
A - XYZ
    - EMP[0], EMP[3]
A - PQR
   - EMP[4]
B- XYZ
- EMP[1], EMP[2]
B - PQR
- EMP[5]

What is the format in which datasource requires these groupings and grouped items ? I saw this post http://www.kendoui.com/forums/framework/data-source/datasource-remote-grouping.aspx    but could not figure out how to present multiple key values.

Thanks

Data Source

answered on 17 Oct 2012

8 answers

4.2K+ views

How do you default a TreeView to expanded on initialization?

Hello,

I'm attempting to build a Kendo TreeView that is fully expanded by default.

My data structure is a simple un-ordered list similar to this:

<ul id="treeView">

<li>1

<ul>

<li>1.1</li>

</ul>

</li>

<li>2

<ul>

<li>2.1

<ul>

<li>2.1.1</li>

</ul>

</li>

</ul>

</li>

</ul>

Then on document.ready():

$(document).ready(function () {

$("#treeView").kendoTreeView();

});

Any suggestions?

Thanks,
Daniel

TreeView

answered on 17 Oct 2012

3 answers

848 views

Grey-out a row in Kendo grid

I have a kendo grid with one of the columns as check boxes. I want to achieve the following:

1. Select a row using check box, click on delete button external to grid and get that row deleted. (looking out for bulk delete also)
2. Select a row using check box, click on a button to grey-out / disable ( row should still be present in the grid) that row.

I could able to achieve first task. I need help for the second task.

Any quick help with sample code will be appreciated. I'm new to kendo.

is this the right way to get a column with check boxes?

checkBox is an empty string ( "" ) which i'm getting from controller

columns.Bound(p => p.checkBox).ClientTemplate("<input type= 'checkbox' id= 'chkbox' onchange= 'chkchnage()' />").Title("");

columns.Bound(p => p.frontOffice).Title("Rule Description").HeaderHtmlAttributes(new { style = "text-align:center" });

.

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(m => m.checkBox))  //not sure why I added this.Model id is mandatory it seems

.PageSize(20)

)

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

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

.Editable(editing => editing.DisplayDeleteConfirmation(true))

.Navigatable()

.Pageable()

.Sortable().Render();

Grid

answered on 17 Oct 2012