Questions on UI for ASP.NET MVC Forum

3 answers

675 views

MVC different field type in grid column and post grid content to Ienumerable using ClientTemplate

Hello everybody,

I need help about ClientTemplate usage cause I really can't solve this problem lookig for solution online.

My goal is:

1) To have the content of a grid saved inside a IEnumerable inside the model, and be able to submit the model (with populated IEnumerable)

2) To have a grid column that can contain different data filed ComboBox(), Numeric or string

For achiving goal 1 I'm tring following this exaple: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/submit-grid-with-form

that use #index(data)# inside the ClientTemplate to save a value to the model ienumerable field,

but that give me an erro, for example using:

(@Html.Kendo().TextBox().Name("ParameterListForCycleTime[#index(data)#].Value")).ToClientTemplate()

function index(dataItem) {

var data = $("#wizardGrid").data("kendoGrid").dataSource.data();

return data.indexOf(dataItem);

}

when I try to access the page it gives me the error: index not defined, and I can't understand why.

As you can see in the code index function is defined in script..

2) If I avoid error of point 1 inserting a static 0 index instead of #index(data)# (or I use another Name) once i load the page I see only big textboxs. Clicking near them make them become what I defined in the ClientTemplate (Checkbox,numericBox or normal textbox): https://gyazo.com/7075e354d62758b4a2618f471d463757

(@Html.Kendo().NumericTextBox().Name("ParameterListForCycleTime[0]).Value(0)).ToClientTemplate()

Really hope somebody can help me cause I'm losing my mental sanity on this..

Thanks,

Gabriele

Here the full grid code:

@using (Html.BeginForm("Wizardpage1Result", "CycleTime"))

{

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

.Name("wizardGrid")

.Columns(columns =>

{

columns.Bound(p => p.ID).Width(180).EditorTemplateName("ReadOnlyTemplate");

columns.Bound(p => p.Description).Width(300).EditorTemplateName("ReadOnlyTemplate");

columns.Bound(p => p.UM).Width(100).EditorTemplateName("ReadOnlyTemplate");

columns.Bound(p => p.Mandatory).Title("Mandatory").Width(100).ClientTemplate("<input type='checkbox' #= Mandatory ? checked='checked' :'' # />");

columns.Bound(p => p.Value).Title("Value").ClientTemplate(

"# if (Type == 'LIST') { #" +

(@Html.Kendo().ComboBox()

.Name("ParameterListForCycleTime[#index(data)#].Value")

.Placeholder("Select relationship...")

.DataTextField("Text")

.DataValueField("Value")

.BindTo(new List<SelectListItem>() {

new SelectListItem()

{

Text = "Option1",

Value = "1"

},

new SelectListItem()

{

Text = "Option2",

Value = "2"

},

new SelectListItem()

{

Text = "Option3",

Value = "3"

},

new SelectListItem()

{

Text = "Option4",

Value = "4"

}

}).Value("")).ToClientTemplate()

+ "# } else if (Type == 'NUMERIC') { #" +

(@Html.Kendo().NumericTextBox().Name("ParameterListForCycleTime[#index(data)#].Value").Value(0)).ToClientTemplate()

+ "# } else { #" +

(@Html.Kendo().TextBox().Name("ParameterListForCycleTime[#index(data)#].Value")).ToClientTemplate()

+ "# } #"

);

/*"#= Value #" + "<input type='hidden' name='ParameterListForCycleTime[#= index(data)#].Value' value='#= Value #' />")*/

})

.ToolBar(toolbar =>

{

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Events(x => x.DataBound("onDataBound"))

.Navigatable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax().Group(g => g.Add(c => c.Category))

.Batch(true)

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.ID);

model.Field(p => p.ID).Editable(false);

model.Field(p => p.Description).Editable(false);

model.Field(p => p.UM).Editable(false);

model.Field(p => p.Mandatory).Editable(false);

model.Field(p => p.Value);

})

.Update("Wizard_Update", "CycleTime")

)

<input type="submit" value="SaveModel" />

}

<script type="text/javascript">

function index(dataItem) {

var data = $("#wizardGrid").data("kendoGrid").dataSource.data();

return data.indexOf(dataItem);

}

function onDataBound(e) {

var gridData = this.dataSource.view();

for (var i = 0; i < gridData.length; i++) {

var currentUid = gridData[i].uid;

var currenRow = this.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).find(".chkbxCliEditRights").attr("disabled", true);

}

$('#wizardGrid script').appendTo(document.body);

var item = $('#wizardGrid').data().kendoGrid.dataItem($(this.element).closest('tr'));

item.set('Value', this.value());

}

</script>

Grid

answered on 08 May 2020

1 answer

112 views

"kendo-upload" Angular

I'm using "kendo-upload" in my Angular application. I able to upload files upto 125 mb, but i try to upload files like 500MB, 1GB etc, its not going through.

Is there filesize limitations on "kendo-upload", Do i need set any settings for uploading such large files ?

Upload

answered on 08 May 2020

9 answers

1.2K+ views

Sub-Total Row

Hi,

I'm using the currently using the Grid with server side processing, grouped by Project Name, and using the ClientGroupFooterTemplate to display totals. This works great, but is there a way to add a sub-total row, for some other calculations?

I'm currently querying the items needed and then query the sub-totals row then concatenating the queries this is drastically slowing the load time.

Any ideas?

public ActionResult ProjectTaskListAjax(Guid id, [DataSourceRequest] DataSourceRequest request)

{

var tasks = DataService.GetQueryableProjectTasksByUploadId(id);

var queries = new[]

{

// This gets all the current tasks

tasks.Select(x => new GridProjectTaskModel

{

[...]

LabourCostTotal = x.LabourCostTotal,

MaterialCostTotal = x.MaterialCostTotal,

[...]

}),

// This gets all the tasks then groups by the Project and then calculates two columns that need to be displayed on the 'sub-total' row.

tasks.GroupBy(x => x.Project.Name).Select(g => new GridProjectTaskModel

{

[...]

LabourCostTotal = g.FirstOrDefault().PurchaseOrders.Where(x => x.SupplierType == "Sub-Contract Labour").Sum(x => x.TotalEx),

MaterialCostTotal = (g.FirstOrDefault().PurchaseOrders.Where(x => x.SupplierType == "Sub-Contract Labour").Sum(x => x.TotalEx) * -1),

[...]

})

};

// Concat vs Union makes no difference here

var mergedQuery = queries.Select(query => query.AsEnumerable()).Aggregate(Enumerable.Union);

return Json(mergedQuery.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

Grid

answered on 08 May 2020

2 answers

131 views

DropdownList not loading in Defaultly in Grid

Hi

Is there any option to display the DropdownList in the Grid default page loading. I tried this option when we click the cell only its displaying dropdownlist.

https://demos.telerik.com/aspnet-mvc/grid/editing-custom?_ga=2.231591000.698409247.1588223224-368114355.1588223224

Help will be appreciated!!

Grid

answered on 06 May 2020

2 answers

253 views

Mobile switch control not displaying Grid Cell MVC

Hi,

I want to display Mobile switch control in Grid MVC . when i tried only checkbox displaying.

Please help

Grid

answered on 06 May 2020

1 answer

106 views

Date FIlter is not working for "is equal to" in VB.net MVC

I have a records of value in Date column where date and time is given in MM/dd/yyyy hh:mm but while selecting filter for date column in the menu it is giving empty records

Filter

answered on 06 May 2020

1 answer

141 views

css padding help

Hi, I am trying to make my calendar 3 months view with padding of 16px just like the demo. But its not working, some Telerik css is overwriting it. Even if I try to force it inline for each month its not working.

MultiViewCalendar

answered on 06 May 2020

1 answer

233 views

How to show video preview in Grid cell?

Hi

I want to show 2-3 seconds max 2-3mb size video preview in grid cell.

Is it possible?

Grid

answered on 06 May 2020

9 answers

1.7K+ views

style of checkbox in grid

Hi there,

I am using this code in the Html.Kendo().Grid:

columns.Bound(p => p.Positive).ClientTemplate("<input type='checkbox' \\#= Positive ? checked='checked' :'' \\# />");

In the login form I use a @Html.Kendo().CheckBoxFor (checkbox for 'remember me').

How can I change the style of the rendered checkbox in the grid to the style of the kendo checkbox?

Kind regards,

David

Grid

answered on 05 May 2020

3 answers

2.0K+ views

How to add kendo-template in grid's column?

I am binding a Kendo grid using Ajax binding. In the last column of the grid I want to show action buttons based on the status. In html I have a kendo template. But im not sure how to set kendo template in grid column using it's ID.

I'm open for any other suggestions, if there are any other ways to do this.

<div>

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

.Name("grid")

.Columns(col =>

{

col.Bound(p => p.ID);

col.Bound(p => p.OriginalCost);

col.Bound(p => p.Status);

//how do I add new column here which is not bound to any property, but it need to render a template below

})

.AutoBind(true)