Questions on Kendo UI for jQuery Forum

2 answers

126 views

[Solved] Keyboard navigation in filter demo

I was checking out https://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog for a demo on how to client-side filter a treeview component. The demo works like a charm butI noticed that keyboard navigation is broken when the treeview is filtered (it works fine when not filtered). Is there a work around of fix for this problem?

Thanks,
Ron

TreeView

answered on 06 Mar 2018

1 answer

184 views

Selected item in Treeview not visible in modal window (scroll needed)

Hello,

I face a problem with treeview and larger tree structure. When I select some item and the modal window appears, I cannot see the selected item, it is necessary to scroll down, if selected item is out of visible area.

The second problem I face is witjh automatic scroll, when moving around tree using keyboard, automatic scroll does not work.

Thank you for your kind help.

TreeView

answered on 06 Mar 2018

3 answers

1.5K+ views

Passing data from window to parent object.

I have a window with a list box and on the window close I'm trying to move the data from that list into a list in the parent window.

Here is the html snippet for the window content

<div id="selectcontactwindow" class="k-content">

<script type="text/javascript">

$(document).ready(function () {

$("#parent").val("Select an Agency Contact");

$("#contactselect").kendoComboBox([

{ text: "Contact 1", value: 1 },

{ text: "Contact 2", value: 2}]);

$("#add").click(function () {

var obj = $("#contactselect option:selected");

if ($("#selectedcontacts option[value="+obj.val()+"]").length == 0) {

$("#selectedcontacts")

.append($("<option></option>")

.prop("value", obj.val())

.text(obj.text()));

}

});

$("#remove").click(function () {

$("#selectedcontacts option:selected").remove();

});

</script>

<table>

<tr>

<td>

<label for="parent" class="k-label">Parent</label>

</td>

<td>

<input id="parent" disabled="disabled" type="text" class="k-textbox"/>

</td>

</tr>

<tr>

<td>

<label for="contactselect" class="k-label">Select a Contact</label>

</td>

<td>

<select id="contactselect" class="k-combobox" placeholder="Please select a contact" >

</select>

</td>

</tr>

<tr>

<td>

<label for="selectedcontacts" class="k-label">Selected Contacts</label>

</td>

<td>

<select id="selectedcontacts" multiple="multiple" class="k-list-container" style="width: 100%">

<option value="11">Contact 11</option>

<option value="12">Contact 12</option>

</select>

</td>

</tr>

<tr>

<td></td>

<td>

<button id="add" class="k-button">Add</button>

<button id="remove" class="k-button">Remove</button>

</td>

</tr>

</table>

</div>

Here is the code for the parent window.
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
    <link href="../Styles/kendo.common.min.css" type="text/css" rel="stylesheet"/>
    <link href="../Styles/kendo.metro.min.css" type="text/css" rel="stylesheet"/>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                var window = $("#window");
                $("#openwindow").click(function () {
                    window.data("kendoWindow").open().center();
                });
                if (!window.data("kendoWindow")) {
                    window.kendoWindow({
                        content: "selectcontact.htm",
                        title: "Select a Contact",
                        actions: ["Refresh", "Close"],
                        visible: false,
                        modal: true,
                        close: onClose
                    });
                }
                function onClose(e) {
                    $("#selectedcontacts option").each(function() {
                        $("#returnedcontacts")
                            .append("<option></option>")
                            .prop("value", $(this).val())
                            .text($(this).text());
                    });}
            });
        </script>
        <p id="window"></p>
        <button id="openwindow" class="k-button">Open Window</button>
        <br/>
        <select id="returnedcontacts" multiple="multiple" ></select>
    </div>
</body>
</html>

Any idea why the code in my onClose event isn't doing anything?

Window

answered on 06 Mar 2018

3 answers

400 views

Excel Export of Master/Detail with Group Applied

Hello,

I found a great example of how to export the master detail grids to excel but I'm struggling when there's a "group" applied. Could someone please provide an example on how that could be done?

Thanks!

Kendall

Grid

answered on 06 Mar 2018

7 answers

1.4K+ views

[Solved] Select first item automatically

Using the auto complete widget, is it possible to automatically highlight (but not select) the first item in the dropdownlist, but still allow the user to type into the textbox?

Currently, when you type in the textbox and see the item you want as the first in the dropdownlist you have to hit the down arrow to select it, then tab to go to the next field. We'd like it to have that selected by default.

AutoComplete

answered on 06 Mar 2018

1 answer

207 views

Detail Template with Fixed Columns

I have a grid that has some fixed columns.

There was a need to create a detailed template for this grid, but I can not.

If I remove the fixed columns, the detail template is created successfully.

Grid

answered on 05 Mar 2018

2 answers

423 views

[Solved] how to round up

Is there how to round up the value ?

　ex)　16.543　→　16.55

I can only set rounding or truncation for the "round" option...

NumericTextBox

answered on 05 Mar 2018

23 answers

1.1K+ views

Grid filter and edit

I have a column inside a grid that is bind to DevelopersDataSource this is object that contains only id and name.

But the filter doesn't work and fell exception then if I change to simple string then the edit doesn't work properly.

so what can I do?

this is my grid:

this is my mode:

namespace TaskManagementUI.Models
{
public class TaskViewModel
{
public TaskViewModel()
{
DevelopersDataSource=new List<Developer>();
}
public int? ID { get; set; }

[Display(Name = "Project Name")]
public int ProjectID { get; set; }

[Display(Name = "Name")]
[Required(ErrorMessage = "Please enter task name")]
public string Name { get; set; }

[Display(Name = "Project Name")]
public string ProjectName { get; set; }

[Required(ErrorMessage = "Please select a developer")]
[Display(Name = "Developers")]
public List<int> DevelopersID { get; set; }

[DataType(DataType.Date)]
[Required(ErrorMessage = "Please select a date")]
[Display(Name = "Estimated Start Date")]
public DateTime EstimatedStartDate { get; set; }

[GreaterDate(EarlierDateField = "EstimatedStartDate", ErrorMessage = "End date should be after Start date")]
[DataType(DataType.Date)]
[Required(ErrorMessage = "Please select a date")]
[Display(Name = "Estimated End Date")]
public DateTime EstimatedEndDate { get; set; }

[DataType(DataType.Date)]
[Required(ErrorMessage = "Please select a date")]
[Display(Name = "Actual Start Date")]
public DateTime ActualStartDate { get; set; }

[GreaterDate(EarlierDateField = "ActualStartDate", ErrorMessage = "End date should be after Start date")]
[DataType(DataType.Date)]
[Required(ErrorMessage = "Please select a date")]
[Display(Name = "Actual End Date")]
public DateTime ActualEndDate { get; set; }

[UIHint("PercentCompletedEditor")]
[Required(ErrorMessage = "Please enter percent")]
[Display(Name = "Percent Completed")]
public float PercentCompleted { get; set; }

[Required(ErrorMessage = "Please enter comment")]
[Display(Name = "Comment")]
public string Comment { get; set; }

[Required(ErrorMessage = "Please select a developer")]
[UIHint("DevelopersEditor")]
public List<Developer> DevelopersDataSource { get; set; }

public string DevelopersNames
{
get
{
if(DevelopersDataSource!=null)
return String.Join(",", DevelopersDataSource.Select(s=>s.Name));
else
{
return null;
}

}

}

public List<Project> Projects { get; set; }

}
}

this is the object developer:

namespace TaskManagementUI.Models
{
public class Developer
{
public int? ID { get; set; }
[Required(ErrorMessage = "Please enter a name")]
[Display(Name = "Name")]
public string Name { get; set; }
}
}

this is my filter function to DevelopersDataSource :

var developersMultiFilter = function (element) {
element.kendoMultiSelect({
dataValueField:"ID",
dataTextField:"Name",
dataSource: {
transport: {
read: "/Project/DevelopersList"
},
valuePrimitive: false
},

});
}

thanks

Grid

answered on 04 Mar 2018

1 answer

1.1K+ views

Passing data to parent window from Kendo popup window

I am trying to pass data back from a Kendo window to the parent page or at least get a reference back to the parent page; but its not working.

Any help resolving this would be appreciated. Everything works except I cannot get a reference to the parent page to pass data to it. the grid on the parent page is not getting populated.

<h5 class="bold"><a name="associates"></a>Known Associates</h5>
<div id="GridMessage_Associate" style="display: none;"></div>

@(Html.Kendo().Grid<PeopleSearchResultDO>()
.Name("AssociateGrid")
.AutoBind(false)
.HtmlAttributes(new { style = "display:none;" })
.Columns(columns =>
{
columns.Bound(p => p.PersonId).ClientTemplate("#= PersonId #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].PersonId' value='#= PersonId #' />");

columns.Bound(p => p.FirstName).ClientTemplate("#= FirstName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].FirstName' value='#= FirstName #' />");

columns.Bound(p => p.MiddleName).ClientTemplate("#= MiddleName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].MiddleName' value='#= MiddleName #' />");

columns.Bound(p => p.LastName).ClientTemplate("#= LastName #" + "<input type='hidden' name='PersonAssociates[#= indexAssociate(data) #].LastName' value='#= LastName #' />");

}
)
.DataSource(
dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)

<br />
<br />



<input id="openassociates" value="Search for an Associate" class="btn btn-default btn-lg" />

@(Html.Kendo().Window()
.Name("associatewindow")
.Width(1400)
.Height(500)
.Draggable()
.Resizable()
.Title("Add New Person")
.Visible(false)
.Modal(true)

.Actions(actions => actions
.Minimize()
.Maximize()
.Close().Refresh()
)

.Content("loading associates ...")
.LoadContentFrom("LoadAssociatesForm", "Person")
.Events(ev => ev.Close("onClose"))
)

<div class="responsive-message"></div>

<script>
function onClose() {
$("#openassociates").show();
}

$(document).ready(function () {
$("#openassociates").bind("click", function () {
$("#associatewindow").data("kendoWindow").open();
$("#openassociates").hide();
});
});
</script>

<p>
<input type="submit" id="btnPersonSave" value="Save" class="btn btn-lg btn-primary" />
</p>
}
</div>

<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}

function indexAssociate(dataItem) {
var data = $("#AssociateGrid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}

Here is the content of the Kendo Window

@(Html.Kendo().Grid<PeopleSearchResultDO>()
.Name("AssociateResultsGrid")
.AutoBind(false)
.HtmlAttributes(new { style = "display:none;" })
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(p => p.PersonId).Hidden(true);
columns.Bound(p => p.FirstName).ClientTemplate("<strong>#: FirstName #</strong>");
columns.Bound(p => p.MiddleName).ClientTemplate("<strong>#: MiddleName #</strong>");
columns.Bound(p => p.LastName).ClientTemplate("<strong>#: LastName #</strong>");
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Read(read =>
read.Action("AssociatesSearchResults", "Person")
.Data("getPeopleSearchCriteria").Type(HttpVerbs.Post)
)
)
.NoRecords(n => n.Template("<div class='alert alert-danger'><h3 class='text-danger bold'>No records returned!</h3></div>"))
.Scrollable(s => s.Height("400px"))
)

<p> <input type="button" id="btnAddAssociate" value="Add Selected Associate(s)" class="btn btn-default bold" style="display: none;" />
</p>

<script type="text/javascript">

$("#btnAddAssociate").click(function () {

$("#GridMessage_Associate").css("display", "none");
var entityGrid = $("#AssociateResultsGrid").data("kendoGrid");
var rows = entityGrid.select();

if (rows !== undefined) {
rows.each(function (index, row) {

var selectedItem = entityGrid.dataItem(row);
// selectedItem has EntityVersionId and the rest of your model

var assogrid = $("#AssociateGrid").data("KendoGrid");
assogrid.dataSource.add(
{
PersonId: selectedItem.PersonId,
FirstName: selectedItem.FirstName,
MiddleName: selectedItem.MiddleName,
LastName: selectedItem.LastName,
DOB: selectedItem.DOB,
Age: selectedItem.Age,
LastFourOfSSN: selectedItem.LastFourOfSSN,
AddressLine1: selectedItem.AddressLine1,
CityOther: selectedItem.CityOther,
GenderShortName: selectedItem.GenderShortName,
RaceShortName: selectedItem.RaceShortName
});

$("#AssociateGrid").css("display", "block");
//clear selected items in parent grid

//finally close modal window
var myWindow = $("#associatewindow");
myWindow.data("kendoWindow").close();
});
}
else {
$("#AssociateGrid").css("display", "none");
}
})
</script>

Window

answered on 02 Mar 2018

4 answers

896 views

Alternate way to keep the multiselect open

Is there another way to get the multiselect to stay open other then having autoClose set to false?

I would like it to stay open only while the user is pressing ctrl, so that they could select multiple items and when they release the ctrl key to would close the multiselect, or if they only want to select one they would not have press ctrl and it would close right after they have selected an item.

MultiSelect

answered on 02 Mar 2018