Questions on Kendo UI for jQuery Forum

2 answers

654 views

Unable to select multiple items programatically

Hi

I'm using a multiselect and trying to select 2 values programmatically but only the first is really showing. Here is a piece of code of what i'm doing.

var multi= $("#pilotProgram").data("kendoMultiSelect");

multi.value(["1", "2"]);
multi.trigger("change");

Thank you

MultiSelect

answered on 27 Feb 2020

3 answers

373 views

How to sort funnel chart using category axis

Hi,

I'm trying to follow this example - https://www.telerik.com/forums/best-way-to-dynamically-build-pareto-chart and sort the funnel chart using the dataBound event, but unfortunately it doesn't work. Please check my dojo - http://dojo.telerik.com/OJUcikOr . My requirements are to group the data by the category property and then to sort it desc.

Waiting for an advice.

Best Regards, Boyan.

Charts

answered on 27 Feb 2020

1 answer

1.0K+ views

Problems applying k-link to <a>

Hi,

Whats up with the k-link class not apply any hyperlink styles?

I got the class from here: https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-classes. but when I apply it, it actually removed styling, see dojo https://dojo.telerik.com/edUQOkop.

Please advise,

Grant

General Discussions

answered on 27 Feb 2020

6 answers

2.2K+ views

Updating the value of a non-editable cell

Hi,

I hoping this will be a easy answer.

I have a grid and to keep it simple it only has two columns. Quantity and Value. There is an additional JavaScript variable called 'price'. In this example price = 10.

Quantity is inline editable, and Value is defined in the schema as being { editable: false }

When the user clicks the Quantity cell and enters a new number, I need the cell next to it (Value) to recalculate and display the new number in Quantity * price.

So, initially the grid row would be Quantity 0, Value 0.

User enters 10 in Quantity. Value changes to 100.

For some reason I just can't get this to work. Any help would be appreciated!

Grid

answered on 27 Feb 2020

2 answers

1.0K+ views

Can't access model value in client template

So I have a grid with a ClientDetailTemplate, with both having client templates referring to item values. This works fine, basically something like

@(Html.Kendo().Grid(Model.Fields)

.Name("FieldsGrid")

.Columns(columns =>

{

columns.Bound(o => o.Title).Title("Title").Width("25%")

.HeaderHtmlAttributes(new { Title = "Title", style = "text-align:center;" })

.HtmlAttributes(new { Class = "lt" }).ClientTemplate(

"<a target='_blank' href='#= Url #'>#= Title #</a>"

);

})

.ClientDetailTemplateId("template")

)

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

@(Html.Kendo().Grid(Model.JobSearchResults)

.Name("CareerJobSearchResultGrid_#=JobSearchId#")

.Columns(columns =>

{

columns.Bound(o => o.Title).Title("Title").Width("40%")

.HeaderHtmlAttributes(new { Title = "Title", style = "text-align:center;" })

.HtmlAttributes(new { Class = "lt" }).ClientTemplate(

"<a target='_blank' href='\\#= Url \\#'>\\#= Title \\#</a>"

);

})

.ToClientTemplate()

)

</script>

The problem is when I want to add some HTML attributes based on some model information, trying to do something like

.HtmlAttributes(new { Class = "lt", data_title = "#= Title #" })

I can't get this to work for either the grid or its client template, regardless of escapes etc.

Basically, it doesn't appear to do the substitutions, and in both cases, I get an error:

SyntaxError: missing : after property id

...tes:{Class:"lt",data-title:"#= Title #"},width:"10%",tem

Is what I'm trying to do possible and I'm just using the wrong syntax? Or is it not possible?

Thanks in advance.

Grid

answered on 26 Feb 2020

4 answers

179 views

Custom Toolbar Template + Angular

How can I create a custom toolbar button, using a template, and attach an event to it from an Angular controller?

Any help would be awesome.

Toolbar

answered on 26 Feb 2020

1 answer

244 views

FileManager

Hello Sir!!!

How to CRUD operation can be done in File Manager.

FileManager

answered on 26 Feb 2020

2 answers

4.4K+ views

Jquery grid not loading data even though Json is returned

I am having an issue which I am hoping is obvious but that I haven't been able to figure out.

I have a grid that when I use call the Read controller the MVC grid it works perfectly fine as below.

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

.Name("grid1")

.Columns(columns =>

{

columns.Bound(p => p.Id).Filterable(false);

columns.Bound(p => p.Name);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("ProductRead", "Admin"))

)

But when I use Jquery to create the grid dynamically it makes the call to the controller and retrieves the same JSON correctly as below, but the grid is always blank. The databound event also

{"Data":[{"Id":1,"Name":"Testing1"},{"Id":2,"Name":"Testing2"},{"Id":3,"Name":"Testing3"},],"Total":3,"AggregateResults":null,"Errors":null}

Here is the javascript. I must be missing something:

<script>

CreateGrid("myGrid");

function CreateGrid(gridID) {

var dataSource = new kendo.data.DataSource({

//type: "odata",

transport: {

read: function (options) {

$.ajax({

url: "/Admin/Wells/ReadAll",

dataType: "json",

data: {

models: kendo.stringify(options.data.models)

},

success: function (result) {

options.success(result);

}

});

},

parameterMap: function (options, operation) {

if (operation !== "read" && options.models) {

return {

models: kendo.stringify(options.models)

};

}

},

batch: true,

pageable: true,

schema: {

model: {

id: "Id",

fields: {

"Id": { "type": "number", "nullable": false },

"Name": { "type": "string", "nullable": false }

}

});

$(gridID).kendoGrid({

sortable: true,

autoBind: false,

dataSource: dataSource,

filterable: true,

columnMenu: true,

resizable: true,

selectable: "single",

autoFitColumn: false,

pageable: {

pageSize: 10 // specifying the pagesize inside the datasource fixed my problem (Nan-Nan of 1 items)

},

//columns: myColumnObject,

columns: [{ field: "Id", minResizableWidth: "125px", type: "number" },

{ field: "Name", minResizableWidth: "350px" }

],

editable: "popup"

});

//Now load the grid with data

var grid = $(gridID).data("kendoGrid");

grid.bind("dataBound", grid_dataBound);

grid.dataSource.fetch();

}

function grid_dataBound(e) {

console.log("dataBound");

}

</script>

and for reference here is the controller it hits.

Productcontroller.cs

public ActionResult ReadAll([DataSourceRequest] DataSourceRequest request)

{

var data = productService.Read();

var serializer = new JavaScriptSerializer();

var result = new ContentResult();

serializer.MaxJsonLength = Int32.MaxValue; // Whatever max length you want here

result.Content = serializer.Serialize(data.ToDataSourceResult(request));

result.ContentType = "application/json";

return result;

}

productService.cs

public IEnumerable<ProductModel> Read()

{

return GetAll();

}



public IQueryable<ProductModel> GetAll()

{

     var wells = entities.WellModel.AsNoTracking().AsQueryable();

     return wells;

}

Grid

answered on 24 Feb 2020

3 answers

836 views

Different closing behaviour for notifications

Hello!

How can I make info and success notifications disappear automatically after a few seconds, but have warning and error notifications to be closed manually by the user?

Best regards,

Kaan

Notification

answered on 24 Feb 2020

1 answer

342 views

Validate partial form

Hello,

I have this valdiation summary:

<div asp-validation-summary="All" class="text-danger" >

<span class="k-invalid-msg" data-for="Description" data-valmsg-for="Description"

id="Description_validationMessage" role="alert" >

</span>

... more fields

</div>

<textarea asp-for="Description" class="form-control mc0" data-bind="value: ent.Description">

</textarea>

let viewModel = kendo.observable({

save: function() {

let editForm = $("#edit-form").kendoValidator().data("kendoValidator");

if (editForm.validate()) {

this.entDataSource.sync();

}

},

})

Because of the business rules, I need to validate only certain fields, based on the current entity state.

Is there a way to validate only certain fields, like all fields with class "mc0" (or fields in a "div#id-for-state-X") and have the error messages displayed in the summary?

Thanks.

Validation

answered on 24 Feb 2020