Questions on Kendo UI for jQuery Forum

2 answers

475 views

Where does the datasource of the destination listbox live?

So I may be missing something quite obvious, but I've been stuck on this for the past day.

I've got a source listbox with a destination listbox to the right. Let's say the datasource of the source listbox is optionList, and the datasource of the destination listbox is selectionlist. It appears selectionList does not get populated with the items moved from the source to destination listbox.

Am I looking in the wrong place to find the output list? It seems this is a new(er) feature so documentation and forum posts are light. I appreciate any help, thanks!

ListBox

answered on 31 May 2017

3 answers

493 views

Bug: popup notifications overlap (with max-width and font-size in pt)

Hi!

It seems like the popup notifications overlap and the last word of short notification texts slips to the next line, when I limit their max-width and set the font-size in pt units.

Here is a demonstration of the bug (don't forget to make the browser window narrow first, so that longer notification texts need get wrapped automatically): http://dojo.telerik.com/iwiXE/13

When you change the font-size units to px, then the popup notifications work as expected. So it seems like the notification widget has a problem with font-size set in pt units. Or maybe I have to set the max-width in a different way?

What font-size and div size units are recommended generally when I want to create responsible web apps with Kendo UI? I am using vw and vh units for divs.

Best regards,

Kaan

Notification

answered on 31 May 2017

1 answer

211 views

Loading datasource shapes and connection from local data

Hello,

Is it possible to fill the datasource of shapes and the datasource connection without using read method for both datasources, like in grid when loading local data ?

@(Html.Kendo().Diagram(Model.Ds, Model.DsCnx)
.Name("diagram")
.DataSource(d => d
.ShapeDataSource()
.Model(m =>
{
m.Id(s => s.Id);
m.Field(s => s.Id).Editable(false);
m.Field(s => s.Name).Editable(false);
m.Field(s => s.CodeMst).Editable(false);
m.Field(s => s.NbEl).Editable(false);
m.Field(s => s.NbImbCode).Editable(false);
m.Field(s => s.ObjType).Editable(false);
m.Field(s => s.ObjectId).Editable(false);

})

)
.ConnectionsDataSource(d => d
.Model(m =>
{
m.Field(c => c.From);
m.Field(c => c.To);
})

)
.Events(e => e.DataBound("onDataBound"))
.Layout(l => l
.Type(DiagramLayoutType.Tree)

.LayerSeparation(50)
.Subtype(DiagramLayoutSubtype.Right)
.NodeDistance(20)
)
.Editable(true)
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
)

.Pannable(true)
.Zoom(0.7)
)

Best regards,

Diagram

answered on 31 May 2017

7 answers

1.0K+ views

mvc controller grid databind

hello this my controller
How to bind data would ? and How can I bind Guid?

example : ?
{
            field: "GUID",
            title: ""
        }, {

// northwind database

[WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public JsonResult GetCustomer()
        {
            _CustomerItems.AddRange(_CustomerProcess.GetCustomer());
            JsonResult js = Json(_CustomerItems); // ( 91 records ready )
            return js;
        }

<html>
<head>
</head
<body>
<div id="grid"></div>
</body>
</html>

function GridDataBind(modul) {

    $("#grid).kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 10
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{
            field: "CompanyName",
            title: "Company Name",
            width: 140
        }, {
            field: "ContactTitle",
            title: "Contact Title",
            width: 190
        }, {
            field: "CompanyName",
            title: "Company Name"
        }, {
            field: "Country",
            width: 110
        }]
    });
}

Grid

answered on 31 May 2017

3 answers

147 views

Set size of PolarLine Chart

is there any way to set specific size of PolarLine Chart (not the ChartArea, the chart)

In the image it can be seen the "space reserver to I don't know what"

So there is two options, determine the size of Chart, or equalize the size of chart to the ChartArea.

General Discussions

answered on 31 May 2017

3 answers

377 views

Problem with Grid Selection Persistence, key not found

Hi,

Kendo UI v2017.2.504

I got java exception when restoring, changing selection : unable to get property mykeyfield...

I not sure, but it seems that in kendo.grid.js : string selector ':not(.k-grouping-row,.k-detail-row)' should be replaced with ':not(.k-grouping-row,.k-detail-row,.k-group-footer)' in _restoreSelection and selectable.change functions.

otherwise it search dataitem associated to the footer and it reaches a dead end.

Can you please confirm ?

Thank you in advance.

Grid

answered on 31 May 2017

4 answers

385 views

Render a nested JSON structure by custom template in Dropdown list

I've a JSON structure as:

$scope.fileList = [

{

name: '340000SRF76',

files: ['123456789', '3248734567754']

},

{

name: '340000EFG76',

files: ['1238436589', '3242334567754']

},

{

name: '340000SHY76',

files: ['123286789', '324584567754']

}

];

I've to show the dropdown as:

340000SRF76

123456789

3248734567754

340000EFG76

1238436589

3242334567754

340000SHY76

123456789

324584567754

There will be some icon beside each of the 'name's. And by clicking the 'name's, the 'files' list will show and user can select a file. Selected value will be the file-id (like 123456789, 3248734567754 etc).

Can you please help?

DropDownList

answered on 30 May 2017

1 answer

755 views

Focus Kendo Grid Column Headers

Hi,
I want to focus on the kendo Column names rather than the data in the kendo grid.
I tried using $('#grid').data("kendoGrid").table.focus(); it only focuses the data of the first column and first row. When no data is present I am unable to focus on the table.
Need a way to focus on kendo grid even when it has no data. Please provide me a code snippet for the same.

Grid

answered on 30 May 2017

2 answers

702 views

[Solved] Date Range filter with GridFilterMode.Row

Hello,

I am a new user to Kendo and using Grids for a ASP.NET MVC project. What I am trying to do is achieve a Date Range filter for my grid for a single column, while keeping the default GridFilterMode.Row filters for all other columns.

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

I have successfully implemented the Date Range filter by setting the Grid to .Filterable() and using some additional scripts to customize the fields for the dropdown menu.

@(Html.Kendo().Grid<MyWebSite.Models.OrderViewModel>()

.Name("grid")

.HtmlAttributes(new { @class = "orderGrid" })

.Pageable()

//.Filterable(ftb => ftb.Mode(GridFilterMode.Row)) // Switches all Columns to Row type filters

//.Filterable(ftb => ftb.Mode(GridFilterMode.Menu)) // Switches all Columns to Menu type filters

.Filterable() // Does the same as line above I assume ? ^

.Scrollable()

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

.Columns(columns =>

{

columns.Template(c => { }).ClientTemplate("<input class='k-checkbox chkbx' type=\"checkbox\" name=\"cb_#=Id#\" id=\"cb_#=Id#\" /><label class='k-checkbox-label'></label>").Width(40);

columns.Bound(o => o.OrderNo).ClientTemplate(Html.ActionLink("#=OrderNo#", "OrderDetails", "Order", new { orderId = "#=Id#" }, null).ToHtmlString()).Title("Order #");

columns.Bound(c => c.DateCreated).Title("Date Placed").Format("{0:MM/dd/yy}").Width(180);

columns.Bound(c => c.EstimatedTotal).Format("{0:c}").Title("Total Amount").Width(150);

columns.Bound(c => c.OrderStatus).ClientTemplate("#=GetOrderStatusHtml#").Title("Status");

columns.Bound(c => c.PONo).Title("Purchase Order #").ClientTemplate("#if(PONo != null) { #PONo# } else { #N/A# }#");

if (isUserAdmin)

{

columns.Bound(c => c.SOFromMAS).Title("Sage Order #");

columns.Bound(o => o.PropertyName).Title("Property");

columns.Bound(c => c.IsPropertyRehab).Title("Rehab").Width(100);

columns.Bound(c => c.WhosInChargeName).Title("Who's in Charge");

}

columns.Template(@<text> </text>).Hidden(); //Keep for css coloring of filter bar

})

.ToolBar(tools => tools.Excel())

.Excel(excel => excel

.FileName(string.Format("My Orders Report - {0:yyyy-MM-dd}.xlsx", DateTime.Now))

.Filterable(true)

.ProxyURL(Url.Action("Excel_Export_Save", "Order"))

)

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(15)

.Model(model => { model.Id(p => p.Id); })

.Read(read => read.Action("OrderViewModels_Read", "Order"))

)

.Events(x => x.DataBinding("resizeKendoGrid"))

.Events(e => e.DataBound("onDataBound")) //Callback after data is retrieved

.Events(e => e.FilterMenuInit("onFilterMenuInitDateRange"))

)

<script type="text/javascript">

function onFilterMenuInitDateRange(e) {

if (e.field == "DateCreated") {

console.log("Condition passed!")

var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");

beginOperator.value("gte");

beginOperator.trigger("change");

var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");

endOperator.value("lte");

endOperator.trigger("change");

e.container.find(".k-dropdown").hide()

}

</script>

My issue is when I set the Grid to have Menu type filters , All the other columns will too! How can I set one column to use the menu type filter (for Date Ranges) while keeping .Row type filters for the rest of the columns?

Thank you in advance.

Grid

answered on 30 May 2017

1 answer

183 views

Virtual scrolling and group footer problem

When virtual scrolling is enabled, there is a problem with group footer aggregates. When i scroll table the aggregates (sum) are rendering only for visible data.

gridOptions.dataSource.pageSize = 100;
gridOptions.scrollable = {
virtual: true
};

Example in screenshots.

Grid

answered on 30 May 2017