Questions on Kendo UI for jQuery Forum

5 answers

470 views

RE: Two Trees -- Allowing the drop, but preventing the draggable from moving...

Simply put, I want to allow dragging items from one tree to another -- but prevent the moving of the dragged tree item to the destination tree.

I want it cloned and put in the droppable place within the destination tree. Is there a simple event method or configuration setting I can use to accomplish this?

TreeView

answered on 17 Oct 2012

2 answers

124 views

Error in Adding new Item with Combobox.

I am working with the good example of Editing custom editor under the MVC examples.
It shows how to build a dropdownlist for use when editing a cell in a grid.
I have to create a new post in the grid and I add the following to the file; Editing_Custom.cshtml:

.Create(create => create.Action("EditingCustom_Create", "Grid"))

.ToolBar(toolBar => { toolBar.Save(); toolBar.Create(); })

And I already get an error here before I come to do the coding in the .cs-file.
When debugging with firebug, I get an error from javascript that says: ReferenceError: EnrollTypes is not defined.
EnrollTypes is the class that is used for making the dropdownlist.
Could someone please give me a hint on what I have to do when creating a post in a grid with relational data?

I saw in some forum that Foregin key will sove this problem, but in my case there is no key column which can be named as foreign key. I just want to have a dropdown in grid column and it should also appear when I click on Add New Item button.

Regards,
Nitin

Grid

answered on 17 Oct 2012

5 answers

362 views

Splitter bar appears on left at first. No right pane.

Hi,

I have a simple splitter set up with two panes. Some navigation stuff in the left pane, and content on the right. The html is as follows:

<div id="koulutuspuuSplitter" style="height:500px;" >
    <div id="koulutuspuu"></div>
    <div id="koulutusPuuKomponentti"></div>
</div>

In document.ready I call

        $("#koulutuspuuSplitter").kendoSplitter({
            panes: [
                { collapsible: true, size: "350px" },
                { collapsible: true },
            ]
        });

After which the contents of the left pane are loaded by ajax. The contents of the right pane are not loaded until an item is clicked in the left pane. So it is empty for now.

The problem: When the page loads, the splitter bar appears on the left edge (to the left of the "left pane"). The left pane is loaded just fine, with its own scrollbar and everything. But in place of the right pane is just empty space, and clicking on an item to load contents doesn't fill it (so the pane is not where its supposed to be). Doing any kind of resize event (resize browser window, open firebug panel, etc.) causes the splitter bar to "jump" from the left, to its proper position in between the panes. After this jump, the right pane contents also show up properly.

Presumably there is just something I am doing wrong. Perhaps wrong order of operations? Perhaps the problem is that the panes have no content when splitter is loaded? Something else?

Splitter

answered on 17 Oct 2012

1 answer

102 views

Grid Popup Edititing

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

165 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

104 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

85 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

139 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

358 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

97 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