Questions on Kendo UI for jQuery Forum

3 answers

351 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

321 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

673 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

635 views

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

158 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

1 answer

135 views

Overlapped Pager Numeric In ListView

Hello,

I am using ListView and attached a Pager to it, when displayed in mobile device, the numeric of pager will overlapped on next button(see the attached screen with red boder), is anyone give me an advice?

Many thanks,

Steven

ListView

answered on 30 May 2017

4 answers

930 views

Different alignment of menu items

Hello!

How can I create a menu, with some items being aligned on the left side and some other items being aligned on the right side?

For example, the menu in the second row of the Telerik website: http://www.telerik.com/

Products, Demos etc. are on the left side; Search, shopping cart etc. are on the right side.

Best regards,

Kaan

Menu

answered on 30 May 2017

1 answer

100 views

ThDataGrid Blank Area

With grid that has resizable columns, if you drag the columns to be smaller, there'll be a blank area on the right (see attached screenshot). Can we get this fixed?

Grid

answered on 30 May 2017

3 answers

182 views

Timezone - "Today" button

When I set the timezone in Scheduler to something quite different to my local time then click the "Today" button, it is not using this timezone to determine what date it is today - rather it is using the local timezone. Can you confirm this happens, and whether it is intentional or a bug?

Scheduler

answered on 30 May 2017

1 answer

198 views

Sortable is broken after replacing HTML

I have a set of nested HTML buckets with sortable enabled at the parent and child level. This works perfectly.

However, some events or changes on the page require me to replace the HTML of the parent container -- essentially re-rendering all of the children and children's children on the page. After this happens, it looks live the first set of children are still sortable since I did not remove the parent container.

After this HTML replacement, however, the children's children are not longe sortable, even if I re-run the kendoSortable call on the child containers. There are no errors in my javascript console, and from the documentation I'm not finding any method of "destroying" the initial sortable instances.

// Parent

$("#cb-ContentList").kendoSortable({

change: function(e) {

var order = [];

var i = 1;

var cms_pages_ID = $("#editor_panel").data('cms_pages_id');

$("#cb-ContentList > div").each( function() {

order[i] = $(this).attr("data-contentbuilder_id");

i++;

});

// Do something

}

});

// Children

$("div.verticalBuckets .bucketColumn").kendoSortable({

move: function(e) {

currentTarget = e.target.parent();

},

change: function(e) {

var order = [];

var i = 1;

currentTarget.children("div").each( function() {

order[i] = $(this).attr("data-contentbuilder_id");

i++;

});

// Do something

}

});

As per above, I make an AJAX call then gives me new HTML for #cb-ContentList -- which I do $("#cb-ContentList").replaceWith(data) with. Now the children under #cb-ContentList are still sortable, but the children under the .verticalBuckets are no longer sortable, even if I re-run the code above.

Sortable

answered on 30 May 2017