Questions on Kendo UI for jQuery Forum

3 answers

1.4K+ 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

362 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

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

176 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

381 views

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.0K+ 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

816 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

5 answers

792 views

Context Menu In hierarchy grid

Welcome,
I've got a grid , with grid row details like here:
https://demos.telerik.com/kendo-ui/grid/detailtemplate

also each grid ( "master" and "details") have a checkbox select column like here
https://demos.telerik.com/kendo-ui/grid/checkbox-selection

My grids have local javascript variable (array) which is bound, in master with filter "ParentId == null" , in details "ParentId == e.data.Id".

My problem is:
when i right click on master grid - everything is ok.
when i right click on details grid - i get from e.target item from master grid ( i click second item in detail grid -> i get second item in master grid etc.)

Question:
What am I doing wrong? How to fix it?

Source:
function initMasterGrid() {
    $("#modalGrid").kendoGrid({
        dataSource: {
            data: gridSource,
            pageSize: 20,
            filter: { field: "ParentId", operator: "eq", value: null },
            schema: {
                model: {
                    id: "Id"
                }
            }
        },
        height: 550,
        scrollable: true,
        resizable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        change: onChange,
        detailTemplate: kendo.template($("#detailTemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
            //                    this.expandRow(this.tbody.find("tr.k-master-row").first().html);
            var tmpGrid = this;
            tmpGrid.tbody.find("tr[role = 'row']").each(function () {
                var id = tmpGrid.dataItem(this).Id;
                if (expanded.hasOwnProperty(id) && expanded[id]) {
                    tmpGrid.expandRow(this);
                }
            });
        },
        persistSelection: true,
        columns: [
            { selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
            { field: "Id", title: "Id", width: "50px" },
            { field: "ParentId", title: "ParentId", width: "50px" },
            { field: "Name", title: "Nazwa", width: "100px" },
            { field: "Number", title: "Liczba", width: "200px" },
            { command: { text: "Usun", click: RemoveRow }, title: " ", width: "50px" }
        ],
        detailExpand: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = true;
        },
        detailCollapse: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = false;
        }
    });

    $("#nameField").kendoComboBox({
        dataTextField: "Text",
        filter: "contains",
        minLength: 3,
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: "/api/entityname/getnames"
            }
        }
    });
    $("#quantityField").kendoNumericTextBox({
        type: "number"
    });

    var menu = $("#menu"),
        original = menu.clone(true);

    original.find(".k-state-active").removeClass("k-state-active");
    initMenu();
}

function initMenu() {
    var menu = $("#menu").kendoContextMenu({
        orientation: "vertical",
        target: "#modalGrid",
        //        filter: ".k-detail-row tbody tr[role='row']",
        filter: "tr[role='row']",
        animation: {
            open: { effects: "fadeIn" },
            duration: 500
        },
        select: ContextMenuHandler,
        open: AddMenuItems
    });
};
function detailInit(e) {
    var detailRow = e.detailRow;

    detailRow.find(".tabstrip").kendoTabStrip({
        animation: {
            open: { effects: "fadeIn" }
        }
    });

    detailRow.find(".groupInfo").kendoGrid({
        dataSource: {
            data: gridSource,
            filter: { field: "ParentId", operator: "eq", value: e.data.Id },
            schema: {
                model: {
                    id: "Id"
                }
            }
        },
        detailTemplate: kendo.template($("#detailTemplate").html()),
        detailInit: detailInit,
        dataBound: function () {
            var tmpGrid = this;
            tmpGrid.tbody.find("tr[role = 'row']").each(function () {
                var id = tmpGrid.dataItem(this).Id;
                if (expanded.hasOwnProperty(id) && expanded[id]) {
                    tmpGrid.expandRow(this);
                }
            });
        },
        change: onChange,
        persistSelection: true,
        columns: [
            { selectable: true, width: "30px", headerAttributes: { style: "text-align:center" }, attributes: { style: "text-align:center" } },
            { field: "Id", title: "Id", width: "50px" },
            { field: "ParentId", title: "ParentId", width: "50px" },
            { field: "Name", title: "Nazwa", width: "100px" },
            { field: "Number", title: "Liczba", width: "100px" },
            { command: [{ text: "Usuń", click: RemoveRow }, { text: "Usuń z grupy", click: RemoveFromPackage }], title: " ", width: "60px", attributes: { style: "text-align:center" } }
        ],
        detailExpand: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = true;
        },
        detailCollapse: function (e) {
            var id = this.dataItem(e.masterRow).Id;
            expanded[id] = false;
        }
    });
}

function AddMenuItems(e) {
    console.log(item.Id);

// Add options to context Menu

initMenu()
}

Grid

answered on 02 Mar 2018

13 answers

168 views

Need to be able to save "Custom Download" scripts to my telerik account

In a large app it's hard to remember which controls you're using, or we could forget a checkbox in the custom download, or perhaps we use it multiple controls and custom downloads in many projects :)

...if we could save the configs with a friendly name it'd be very helpful so we can come back in with new releases and just re-download.

http://www.kendoui.com/custom-download.aspx

Thanks,
Steve

General Discussions

answered on 02 Mar 2018