Questions on Kendo UI for jQuery Forum

1 answer

540 views

So I'm working with the Kendo Grid in MVC and my customer needs a grid in which he can filter columns on certain sets of choices. And he needs to see which filters are currently active.
I'm using a grid with the row filtermode set and I'm setting the template on the filter (through the FilterableSettings.CellSettings.Template.HandlerName property of the GridBoundColumn). I'm showing a dropdown with the choices the customer can check. Basically what I want to accomplish is this but it doesn't work with the row filtermode set. I found this example and I'm using it with the template to show a dropdown in every column, except it has side-effects I don't want. The effects are:

It shows the dropdown with empty rows in between the actual options, see the dropdown screenshot. Why does this happen?
It filters the wrong way (on objects, see the filter screenshot) on closing of the dropdown. I want to override the way of filtering, but where can I hook in to override this? I don't know which event is thrown when closing the dropdown nor do I know on which element the element is hooked.

Below shows the code I'm having so far for the filtertemplate:

function filterMenu(container) {

debugger;

// Determine which field this is and get the appropriate choices

var currentColumnIndex = $(".k-filter-row").children().length - 1;

var headers = $($(".k-grid-header").children()[0]).children();

var currentHeader = headers[currentColumnIndex];

var customField = currentHeader.getAttribute("data-customfield"); // Use for support in < IE 11, otherwise could have use .dataset.customfield

var choices = specialFilterFields[customField];

var dropDown = container.element.kendoDropDownList({

dataTextField: "Choice",

dataValueField: "Choice",

template: '<li unselectable="off" class="k-item nowrap check-item">' +

'<input type="checkbox" name="#= Choice #" value="#= Choice #" class="check-input" />' +

'<span>#= Choice #</span>' +

'</li>',

placeholder: "Filter...",

select: function(e) {

e.preventDefault();

},

dataSource: choices,

valuePrimitive: false

}).data("kendoDropDownList");

dropDown.list.find(".check-input,.check-item").bind("click", function (e) {

var $item = $(this);

var $input;

if ($item.hasClass("check-item")) {

$input = $item.find("input");

$input.prop("checked", !$input.is(":checked"));

} else {

$input = $item;

}

// Update the style of the checkboxes

$.uniform.update($input);

// Update the text of the dropdown

updateDropDown(dropDown);

e.stopImmediatePropagation();

});

updateDropDown(dropDown);

}

function updateDropDown(dropdown) {

var items = [];

dropdown.list.find(".check-input").each(function () {

var $input = $(this);

if ($input.val() != "" && $input.is(':checked'))

items.push($input.val());

});

dropdown.text(items.toString());

}

Grid

answered on 13 Feb 2015

1 answer

65 views

Filter question for Dates

Hi I am trying to recreate the example of the filter row.

http://dojo.telerik.com/iYUPU/2

After creating data myself the filter does not work anymore.

On my local test environment I am using
transport: {
read: {
url: "partials/tasks.json",
dataType: "json"
}
},

...which also does not seem to kick off the filter when I type anything or press enter.

What is wrong with this example? http://dojo.telerik.com/iYUPU/2

Thanks

Grid

answered on 13 Feb 2015

1 answer

695 views

Kendo UI Autocomplete not working as expected

I have run into an issue with the new version of Kendo UI that throws an exception when an autocomplete text box is manually deleted. In the old version of Kendo, when you remove the input from the text box, no subsequent call is made to the server to retrieve new data. The new versions, however, will make a call to the server with an empty string when the input is deleted which causes my application to get an error. The behavior in the Kendo UI Dojo returns all the values when the input is deleted which seems incorrect. I would think there would be no drop-down values if there is no input. You can see the difference in behavior by performing the following:

Go to http://dojo.telerik.com/AyEfe

Select Kendo 2014 Q2 from the library drop-down.
Run
Type "che" in the input box - you will get a drop-down with the search results
Manually delete the input using backspace - the drop-down results go away

Now select Kendo 2014 Q3 SP2 from the library drop-down.
Run
Type "che" in the input box - you will get a drop-down with the search results
Manually delete the input using backspace - the drop-down lists all the values

I think the Q3 SP2 version has a bug since a blank input should return no drop-down data. Is this accurate or is this by design? Should I log a bug for this issue?

AutoComplete

answered on 13 Feb 2015

1 answer

155 views

Radial Gauge arrow

Hello Radial Gauge / Scale options has very good control but we need to change the arrow! I can draw new arrow with svg but I don't know how to include it in Radial Gauge. How can I do this ?

Thank you in advance !

LinearGauge

answered on 13 Feb 2015

1 answer

181 views

kendoDatePicker "Member Not Found" issue in IE11 browser with IE7 document mode

Using Browser "IE11" with document mode as IE7
<httpProtocol><customHeaders><add name="X-UA-Compatible" value="IE=7" /></customHeaders></httpProtocol>

http://demos.kendoui.com/web/datepicker/index.html

jquery.min.js Script Error "Member not found" at kendoDatePicker()

We are facing this issue in our application since we migrated to IE11, and our application has a need to run in IE7 compatible mode. So please suggest a solution for this bug.

DatePicker

answered on 12 Feb 2015

1 answer

507 views

MVC Grid client side Updating

I have a MVC Grid as declared below what I want to do is instead of using the popup editor I want to edit and create rows in a custom template.
The 'GridFieldDefinitions_EditClick' function pops up a dialog and inserts my custom template 'templateField' into it. Basically any edits I make to the template I want reflected in the grid then I'll do my own custom batch Save to save all changes I did in the grid.
I'm having some problems reflecting the template changes into the grid.

1. Should these changes not be refelected automatically from my template?
2. If they are not why not?
3. If they are not meant to then I propose to use the Template Save button 'updateGridField' onClick method to reflect the cahnges to the grid - is this possible?

My template is as follows:

<script type="text/x-kendo-tmpl" id="templateField">

<div class="divFields">

@*<div style="overflow:auto; width:100%; height:10em; border:1px solid;">*@

<div>

<table class="tbl2Cols">

<tr>

<td>Uid</td>

<td>#= data.uid #</td>

</tr>

<tr>

<td>Oid</td>

<td>#= data.oid #</td>

</tr>

<tr>

<td>Key</td>

# if (data.oid) { #

<td>#= data.key #</td>

#} else { #

<td>

<input class="k-textbox k-textbox person" data-val-required="The Key is required." id="key" name="key" style="width:100%" />

<span class="requiredAfter"></span>

<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="key"></span>

</td>

# } #

</tr>

<tr>

<td>Label</td>

<td>

<input data-bind="value:label" class="k-textbox" id="label" name="label" style="width:100%" value="#= data.label #" />

</td>

</tr>

<tr>

<td></td>

<td>

<div id='#= data.uid #' class="k-button" onclick="updateGridField(this);" data-rowid="#= data.uid #">Save</div>

</td>

</tr>

</table>

</div>

</script>

My MVC Grid

@(Html.Kendo().Grid<field>()

.Name("GridFieldDefinitions")

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

//.ToolBar(toolbar =>

//{

// if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)

// {

// toolbar.Create().HtmlAttributes(new { @class = "ignoreDirty" });

// }

//})

.Scrollable(s => s.Height("auto"))

.Columns(columns =>

{

if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)

{

columns.Command(command => command.Custom("Edit").Click("GridFieldDefinitions_EditClick"));

}

columns.Bound(p => p.order).Title("").HtmlAttributes(new { @class = "noEdit noCreate" }).Width(50);

columns.Bound(p => p.key).Title("Key").HtmlAttributes(new { @class = "noEdit", @disabled = true }).Width(150);

columns.Bound(p => p.label).Width(200);

columns.Bound(p => p.valueLength).Title("Length").Width(100);

})

.Events(e => e.Edit("GridFieldDefinitions_onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(40)

.Model(model =>

{

model.Id(p => p.oid);

model.Field(p => p.oid).Editable(true);

})

.Events(e => e.Error("handleAjaxError"))

.Read(read => read.Action("FieldDef_Read", "Forms", new { recordTypeOid = Model.Entity.Oid }))

)

Templates

answered on 12 Feb 2015

3 answers

144 views

Don't display loading dialog when loading Kendo UI Mobile listview from external data source?

Is this possible? To not display the little loading spinner when loading JSON into a Kendo UI Mobile listview?

ListView (Mobile)

answered on 12 Feb 2015

3 answers

211 views

CSS issue with with sub items in right aligned menu using Bootstrap theme

Kendo UI Version: 2014.1.415

The issue is that the sub-item inherits an incorrect background color and makes the contents of the sub item unreadable until the user hovers over it. See attached images for clarification. Below are some specifics on how to replicate the issue

This issue occurs when

Using a menu with at least two layers of sub-items
Menu is aligned along right edge of screen so that the first layer's sub-items are forced to expand to the left instead of the right. Attached images can help clarify this.
Theme is set to Bootstrap. Issue does not occur with the other themes in use in our application (BlueOpal and Black)
Note: When the menu menu has enough room to expand its nested sub-items to the right, the issue does not occur.

The attached images use the exact same source code as below. The only difference is that one is aligned along the left side of the screen while the other is aligned along the right side. Any help or advice you could give would be greatly appreciated!

Code

01.@(Html.Kendo().Menu()

02. .Name("Navigation")

03. .HighlightPath(false)

04. .Items(items =>

05. {

06. items.Add().Encoded(false).Text("<span class='fa fa-home'></span>").Action("Index", "Home");

07. items.Add().Encoded(false).Text("<span class='fa fa-navicon' style='padding-right:6px;'></span>Navigation")

08. .Items(item =>

09. {

10. item.Add().Encoded(false).Text("<span class='fa fa-desktop' style='padding-right:6px;'></span>Dashboard").Action("Index", "Dashboard");

11. item.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Shipping").Action("Index", "Test")

12. .Items(ship =>

13. {

14. ship.Add().Encoded(false).Text("<span class='fa fa-tachometer' style='padding-right:6px;'></span>Shop").Action("Shop", "Test");

15. ship.Add().Encoded(false).Text("<span class='fa fa-truck' style='padding-right:6px;'></span>Ship").Action("Index", "Test");

16. ship.Add().Encoded(false).Text("<span class='fa fa-globe' style='padding-right:6px;'></span>Track").Action("Index", "Track");

17. });

18. item.Add().Encoded(false).Text("<span class='fa fa-bar-chart-o' style='padding-right:6px;'></span>Report").Action("Index", "Reports");

19. item.Add().Encoded(false).Text("<span class='fa fa-wrench' style='padding-right:6px;'></span>Tools").Action("Index", "Tools")

20. .Items(tool =>

21. {

22. tool.Add().Encoded(false).Text("<span class='fa fa-print' style='padding-right:6px;'></span>Printing").Action("Index", "Print");

23. tool.Add().Encoded(false).Text("<span class='fa fa-image' style='padding-right:6px;'></span>Image Cleanup").Action("Index", "ImageCleanup");

24. });

25. item.Add().Encoded(false).Text("<span class='fa fa-file' style='padding-right:6px;'></span>Billing").Action("Index", "Main");

26. item.Add().Encoded(false).Text("<span class='fa fa-cogs' style='padding-right:6px;'></span>Admin").Action("Admin", "Admin");

27. });

28. })

29.)

Menu

answered on 12 Feb 2015

1 answer

275 views

[Solved] Unable to refresh datasource when initialized with Javascript Array

Hi,

We are building a mobile app and using Angular JS with Kendo UI. We also have a Worklight Adapter to make the Rest call to get JSON Response Data.
The datasource is being initialized in the Angular JS controller, by the response returned from the Adapter call. Something like

    $scope.gridOptions = {
               dataSource: {
                   data: tempData
                },
    sortable: false,
                pageable: false,
                columnMenu: true,
                height: "35rem",
               columns: [
                  { field: "CarlineName", title: "Carline Name" },
                  { field: "Today", title: "Today" },
                  { field: "PrevDay", title: "Prev Day" }
               ],
               }
           };
       };

The issue with this, when the JSON data is refreshed, I see the Adapter returning new data but the grid does not refresh and reflect the new data. Please help !

How can we make the grid refresh too ?

Grid

answered on 12 Feb 2015

2 answers

127 views

Busy Tile

Hi

Is there a possibility to influence the way the event look (changing the solid blue or green etc.)?

I would like to display events that have a "busy flag" as hatched.

Many thanks

Grid

answered on 12 Feb 2015