Questions on Kendo UI for jQuery Forum

4 answers

223 views

Special slots

In vue "Day", How to display area (SlotTemplate) over several hours with text inside, in background of scheduler.

Scheduler

answered on 18 Jun 2018

4 answers

687 views

How to include in html a script file that is contained in a folder with a special caracter

    After including the node_modules folder as part of my solutions I downloaded kendo- from Telerik running an command, it ended creating a folder structure like this:

node_modules
--@progress
----kendo-
------js
--------kendo.all.js

The thing is that I want to include those files as part of my HTML view.

**1-** I would like to know which is the approach if you need to include kendo.all.js in the without razor

**2-** I would like to know if exist a better way in razor than the one I am using below that allows me to use the files

@{
var kendoPath = "@progress";
}

@section Styles{
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.common.min.css" rel="stylesheet" />
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.default.min.css" rel="stylesheet" />
<link href="~/node_modules/@kendoPath/kendo-ui/css/web/kendo.default.mobile.min.css" rel="stylesheet" />
}

@section Scripts
{
<script src="~/node_modules/jquery/dist/jquery.min.js"></script>
<script src="~/node_modules/@kendoPath/kendo-ui/js/kendo.all.js"></script>
<script src="~/node_modules/@kendoPath/kendo-ui/js/kendo.all.js"></script>
}

General Discussions

answered on 18 Jun 2018

5 answers

525 views

Cannot filter data on grid

I'm currently trying to add a search bar at the top of my gridview. My data is displaying properly in the grid but when I try to search, I am met with this error: Uncaught TypeError: (d.ComponentId || "").toLowerCase is not a function. I have tried updating the schema and trying all of the examples I've found online but I cannot seem to get it to work properly. I will include my grid definition and sample of the JSON Data I'm passing into the table. I am using a template to properly populate the grid so I'm not sure if that is the problem.

grid definition

$("#grid").kendoGrid({
toolbar: [
{ template: kendo.template($("#template").html())}
],
dataSource: {
data: filteredData
},

schema: {
model: {
fields: {
ComponentId: { type: "string" },
Description: { type: "string" }
}
}
},
selectable: true,
allowCopy: true,
height: 430,
sortable: true,
refresh: true,
filterable: {
mode: "row"
},
columns: [
{ field: "ComponentId",title: "Component Id", template: "#=test(data)#",filterable:true},
{ field: "Description",title: "Description", template: "#=description(data)#",filterable:true }
],
}).data("kendoGrid");

$("#btnSearch").on("click", function () {
alert("clicked");
var filter = { logic: "or", filters: [] };
$searchValue = $('#searchBox').val();
if ($searchValue) {
$.each($("#grid").data("kendoGrid").columns, function( key, column ) {
if(column.filterable) {
filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
}

});
}
$("#grid").data("kendoGrid").dataSource.query({ filter: filter });
});

Here is a small data sample. I am pulling these from a larger JSON file.

Article:{#text: Array(6), InventoryOnReceipt: {…}, HasOwnIdentification: {…}, ComponentList: {…}, AccessoryList: {…}, …}
Characteristic:{@attributes: {…}, #text: Array(15), CCTMS: {…}, CCFMS: {…}, CZCMS: {…}, …}
ComponentGroup:{#text: Array(2), GroupId: {…}}
ComponentGroupTree:{#text: Array(4), GroupId: {…}, Description: {…}, ComponentGroupTree: {…}}
ComponentId:{#text: "SCH_225-03"}
CouplingUseCharacteristic:{#text: "True"}
DatasetState:{#text: "1"}
Description:{#text: "Fräseranzugsschraube 16/M8"}
Description_en:{#text: "Clamping srew for combi shell mill holder 16/M8"}

also here are my two template functions which just returning the correct data for the two fields I'm populating on the grid.

function description(data)
{
return data.Description["#text"];
}

Sorry if this is too much information at once. Thank you.

Grid

answered on 18 Jun 2018

1 answer

264 views

dataSource.filter running twice

In our app, we are using "custom filtering", as we set our own function in the "operator" property of the filter.

I found, that, every operator is called twice. If I have 10 rows to filter, and 1 operator set for 1 specific filter, it runs 20 times, from 1 to 10, and again from 1 to 10.

Steps to reproduce:

http://dojo.telerik.com/@foxontherock/EfOyiwIS

After some investigation, I found this:

In your "query" function, you run this:

(copied from the minified version + chrome prettyPrint in F12)
result = this._queryProcess(this._data, this._mergeState(options));

The filter is applied.

Then, a few lines later, that:

this._aggregateResult = this._calculateAggregates(this._data, options);

And, from that line, the whole filtering is applied again.

When we have only a few lines to filter, it's quick.

But with 5000 rows of 10 filters per row, running it twice is a good difference in cpu, memory and time!

You can look at my dojo sample, it's easy to reproduce.

Data Source

answered on 18 Jun 2018

1 answer

78 views

Kendo Grid filter for JQuery the same as for WPF

Dear all,

in our WPF application we used filter which you can see in the attachment. After that we decided bought and for our new Web Application, use Kendo for JQuery.

The problem is that the filter marked in red circle (see the attachment), doesn't work as in WPF!

On this example:

https://dojo.telerik.com/EcUdaFeT

you can see that filter with checkboxes works file, but when I try to use input fields, the filter doesn't work.

Could you be kind to show us how to do that?

Please, don't show us solutions you already have to your documentation since we saw all of them and are not suitable for our clients.

Thanks for the help!

Grid

answered on 18 Jun 2018

3 answers

265 views

Load pane with ajax

Can you please share a simple working sample in which we have:

- vertical splitter with three panes (A,B,C)
- in pane A there area images(logos)
- in pane B there is a menu
- when you select an option(item) of the menu, you can load a page (url) into the pane C
- pane C could be a pane or iframe

I had been searching in the forum, but there is not a sample like the one I mentioned, using ajaxrequest or contentUrl it doesnt work

Splitter

answered on 15 Jun 2018

7 answers

742 views

Checkboxes not being populated on display.

I have a grid

@(

Html.Kendo()

.Grid<Papr2WebMvc4.Models.PiprForms.PartnershipForm>()

.Name("partnerShipFormGrid")

.Columns(columns =>

{

columns.Bound(form => form.Id).Hidden(true);//0

columns.Bound(form => form.Date).Format("{0:M/yyyy}").Title("Month");//1

columns.Bound(form => form.CommentsDescriptionsNotes).Hidden(true).Title("Partnership Description");//8

columns.Command(command => { command.Edit(); command.Destroy(); }).Hidden(false);

})//end columns

.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("AddEditPartnership").Window(window => window.Width(750)))

.ToolBar(toolbar => toolbar.Create())

.Selectable(select => select.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(true)

.Model(model => model.Id(form => form.Id))

.Read(read => read.Action("GetForm", "Form", new

{

planId = Model.PlanId,

planActivityId = Model.Activity.PlanActivityId,

activityType = Model.Activity.ActivityType,

activityTypeId = Model.Activity.ActivityTypeId

}))//end read

.Create(create => create.Action("AddForm", "Form", new

{

planActivityId = Model.Activity.PlanActivityId,

activityTypeId = Model.Activity.ActivityTypeId

}))//end create

.Destroy(destroy => destroy.Action("DeleteForm", "Form", new { planActivityId = Model.Activity.PlanActivityId }))

.Update(update => update.Action("EditForm", "Form", new

{

planActivityId = Model.Activity.PlanActivityId,

activityTypeId = Model.Activity.ActivityTypeId

})))//end datasource

//.Events(events => events.Change("onChange").DataBound("onDataBound"))

.Pageable(pages => pages.PageSizes(true))

)//end partnershipgrid Here is my editor template


@model Papr2WebMvc4.Models.PiprForms.PartnershipForm
@{
    if (!Model.Year.HasValue)
    {
        Model.Year = null;
    }
    if (!Model.Month.HasValue)
    {
        Model.Month = null;
    }
   Model.Groups= Model.GetGroups(Model.PlanActivityId, 0, Model.Id);
}
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
 
<fieldset>
    <legend>@Model.FormActivityType</legend>
 
    <div class="editor-label">
        Month partnerhsips were formed
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Month)/@Html.EditorFor(model => model.Year, new { @placeholder = "yyyy" })
    </div>
@*    @Html.Hidden("Date", new DateTime(Model.Year.Value, Model.Month.Value, 1))*@
    <div>
        @for(int i=0;i<Model.Groups.Count;i++)
        {
            <label>@Model.Groups.ElementAt(i).GroupName@Html.CheckBox("IsSelectedGroup"+@Model.Groups.ElementAt(i).GroupId)</label>
            @*<label>@Model.Groups.ElementAt(i).GroupName@Html.CheckBoxFor(model => model.Groups.ElementAt(i).IsSelectedGroup, new { @id = "Group" + Model.Groups.ElementAt(i).GroupId })</label>*@
        }
       @* @{Html.RenderAction("GetGroups", "Form", new { planActivityId = Model.PlanActivityId,formId=Model.Id });}*@
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CommentsDescriptionsNotes, "Additional description of new partnerships")
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CommentsDescriptionsNotes)
    </div>
</fieldset>


My problem is that I cannot get the checkbox to show selected when I select a form to edit. I also cannot seem to use checkboxfor in my edit templates because it says value is required and when I select one it selects them all. I can get my checkbox information to save properly using the regular checkbox method but this isn't working for getting those values back.I can use checkboxfor just fin outside of the grid editor templates.

Grid

answered on 15 Jun 2018

1 answer

354 views

Dynamically set the axisCrossingValue

We have charts that are databound and can have variable numbers of categories. A second axis can be added, but we would like it to also display on the far right of the chart. This means that setting the axisCrossingValue = [0, 10] (or something to that effect) might not work in every case. Is there a way to set the second axis to always be at the right without just setting the crossing value to some very large number?

Charts