Questions on Kendo UI for jQuery Forum

2 answers

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

202 views

[Solved] 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

278 views

FileManager

Hello Sir!!!

How to CRUD operation can be done in File Manager.

FileManager

answered on 26 Feb 2020

2 answers

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

893 views

[Solved] 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

369 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

6 answers

184 views

Grid - Filter - Standard Drop down first actual filtered results

Please correct me if I am wrong. When we try to search in the Name field (without tabbing out), a drop down appears, but only appears to use StartsWith. While when you tab out, the filtering actually uses the filter operator.

Other than wiring up a filter template to a combobox and then wire up to the "Operator button" (change event) make sure the Grid Filter operator matches the Combobox operator, is there anything else I can do?

Thanks

Sample code below:

@(Html
.Kendo()
.Grid<ItemViewDisplay>()
.Name("saleItemSearchGrid")
.Columns(columns =>
{
columns.Bound(c => c.ItemCostId).Hidden(true);
// Name:
columns.Bound(c => c.Name).Filterable(KendoConstants.Grid.FilterConfigs.ContainsOperator);
// IngredientNumber:
columns.Bound(c => c.IngredientNumber).Filterable(KendoConstants.Grid.FilterConfigs.ContainsOperator);
// BarcodeCount:
columns.Bound(c => c.BarcodeDisplayList).Filterable(f => f.Cell(cell => cell.Operator("contains").Delay(1500)))
.ClientTemplate("#=BarcodeDisplayStr#");
columns.Command(command => { command.Custom("gridSelect").Text("Select").Click("jsSaleItemSelected"); }).Title("Action");
})
.HtmlAttributes(KendoConstants.Grid.StandardHtmlAttributes)
.Scrollable()
.Sortable()
.PersistSelection()
.Filterable(KendoConstants.Grid.FilterByRow)
.Pageable(KendoConstants.Grid.Paging5Button)
.DataSource(dataSource => dataSource
.Ajax()
.Events(KendoConstants.StandardErrorFunction)
.Model(model => model.Id(p => p.ItemCostId))
.Read(read => read.Action("MenuButtonItemList_Read", "Menu"))
.PageSize(KendoConstants.Grid.StandardPageSize)
)
)

Grid

answered on 24 Feb 2020

3 answers

554 views

categoryAxis doesn't show all labels

Charts

answered on 24 Feb 2020

3 answers

60 views

Need explanation on something fixed in R1 2020 SP1

H team,

Found this many times in last kendo UI release note :

"Input wrapped in class - 'input-validation-error' is not submitted by jquery-validate greater than version 1.12.0"

Can someone explain me this in details please ?

Best regards,

Laurent.

General Discussions

answered on 21 Feb 2020

1 answer

492 views

Responsive Column Width in Timeline View?

I have a scheduler in timeline view built in Kendo for jQuery. The rest of the site is in ASP.NET MVC. I'm wondering if there's any way to dynamically/responsively set the column width so that on most desktop screens, the whole day is visible without scrolling. I have columnWidth:70 set in the views option, but this is too small on large screens, but 80 is too big on small screens. Any way to tell Kendo to scale the column widths based on window size?

Scheduler

answered on 21 Feb 2020