Questions on UI for ASP.NET MVC Forum

4 answers

1.3K+ views

Update an EditorFor value in a popup editor template using JavaScript

I have a grid that is bound to some data that includes a ProjectID and a Project_Name column. The Project_Name column is a lookup into another database table based on ProjectID, but I return it as part of the result set for simpler display and binding in the grid. The grid's edit mode is PopUp and I have created an EditorTemplate with a Kendo ComboBox that is bound to ProjectID for value and Project_Name for display. When you change the ProjectID and click Update, the new ProjectID is persisted in the DB, but the Project_Name value doesn't change unless I refresh the page or the grid. I have all the information that I need to be able to assign the new Project_Name to the row, so I do not want to have to rebind the grid or refresh the page just to do this.

Now, I know that controls in the templated pop-up that are bound to the model will automatically update the grid's dataItem when they change. If I add an Html.TextBoxFor(o => o.Project_Name) to the editor and type a new value into it, I can see it change in the grid at the same time. I was planning to hide this textbox and update its value in JavaScript when the ProjectID's combobox value changes in order to update the grid's dataItem, but after some experimentation, I have found that changing the Project_Name textbox's value with JavaScript does not update the grid's dataItem; only typing into it does. I have tried updating the textbox's value both by using the JQuery val() method and by accessing the HTML input's value property directly. I cannot see any event handlers attached to the textbox, so I don't understand the mechanism by which the value that I type in is sent back to the grid, while a value assigned in JavaScript is not sent back.

So, a few questions:
1. Why does the bound textbox update the grid's dataItem when I type a value in, but not when I assign a value via JavaScript?
2. Is there a way for me to trigger the bound checkbox to update the grid's dataItem after I update the value in JavaScript?
3. Is this the best way for me to update Project_Name in the edited row in the grid, or is there a better way to do so without having to rebind the grid or refresh the page?

Grid

answered on 25 May 2016

5 answers

203 views

ListView template with unnamed Datasource members

I am binding a ListView to a collection of strings. How can I access that data in the template definition? Model.SearchResults is a type of IEnumberable<string>

@(Html.Kendo().ListView(Model.SearchResults)

.Name("listClients")

.TagName("div")

.ClientTemplateId("clientsTemplate")

.Pageable(pageable => pageable

.PreviousNext(true)

.Info(true)

.PageSizes(true))

.HtmlAttributes(new{style="min-height:300px"})

.DataSource(dataSource => dataSource

.PageSize(1)))

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

@Html.Action("LoadProfileView", new { clientId = **HOW DO I GET THE VALUE HERE**})

</script>

ListView

answered on 25 May 2016

4 answers

131 views

Fever chart with Bubble chart

Hi How to draw a fever chart in Kendo bubble chart in ASP.Net MVC . PFA. I would like to draw a background for the buble chart

I got a code for scatter but it is not working for Buble

http://docs.telerik.com/kendo-ui/controls/charts/how-to/draw-on-scatter-plots

Chart

answered on 24 May 2016

5 answers

565 views

Progress Indicator on PopUp Window

Hi,

I'm using a grid with PopUp edit mode, using a template, declared like this:

...
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("CompanyEditorTemplate")
.Window(w => w.Title("Gestione Cliente")))
...

All works fine. But I'd like to add progress indicator to the window using this kendo.ui.progress($("#gridClienti"), true) but the problem is that I can't retrieve the window div element to pass to this function. I tried to add ID throw HtmlAttributes() method but it doesn't work.

Any suggestion will be appreciated.

Thanks!!

Grid

answered on 24 May 2016

3 answers

118 views

Spreadsheet - Defined Name for Formulas

I want to be able to use Defined Name when creating my spreadsheet so that I can use them in formulas. IE instead of having to create a formula that is

= SUM(A1:A20) I define A1 to A20 a name "Period1" and then I can do things like = SUM(Period1 Apples) etc. How do you create the Defined Names in the Spreadsheet and does the formulas then support this feature. Also when exporting the spreadsheet to excel do the formulas and names export?

Thanks

Lee

Spreadsheet

answered on 23 May 2016

1 answer

359 views

MultiSelectFor with checkbox

Hi, i found an example of a Multiselect with checkbox on item templatem unfortunately only with UI syntax and tried to use that in

MultiSelectFor in MVC but struggle with the item template. Can somebody help me please ?

Knowlege Article from UI

http://www.kendoui.io/kendo-ui/web/multiselect/how-to/checkbox-item-template#create-checkbox-custom-item-template

Here is my code for the editor template

@(
Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("Value")
        .DataValueField("Key")
        .ItemTemplate("<input type='checkbox'/> #:data.text#")
        .TagMode(TagMode.Single)
        .BindTo((System.Collections.IEnumerable)ViewData["FsrList"])
)

MultiSelect

answered on 23 May 2016

3 answers

56 views

Grid Editor for simple object with cascading dropdowns

Hi!

I found a sample that features a grid working with API calls to edit a collection type object. It also shows that the three drop-downs on the grid are cascade-locked with each other. However, the sample was seriously dated and had an issue that the cell were displaying values instead of name even though the editor templates were defined properly. I have upgraded the sample to the very latest Kendo MVC and the behavior is still there and i'm not able to track it to the source. I'm following this example to create a solution to handle similar situation that I've been asking around for quite sometime now: http://stackoverflow.com/questions/37246701/simple-kendo-grid-to-represent-a-listbasicviewmodel-with-add-edit-and-delete

Kindly inform me why the dropdowns are not taking the DisplayText

P.S.: I didn't use NuGet to add commercial Kendo so I have deleted the CSS and JS related to Kendo. You'll have to paste in manually from you own licence.

Grid

answered on 22 May 2016

4 answers

807 views

Kendo grid with templates and Kendo upload

I have a Kendo grid which represents some documents, each row is a document, i need to upload a pdf which is a digitalized copy of the physical document. All rows need to be save as a List in the server so i'm using a template like this

.ClientTemplate("#= OficioId #<input type='hidden' name='OficioAban[#= index(data) #].OficioId' value='#= OficioId #'/>");

All fields are working ok but the upload.

i'm trying to save the file in a HttpPostedFileBase which is part of OficioAban Class but this template is not working.

This is the Grid

@(Html.Kendo().Grid<RecintoFiscal.Models.OficioAban>(Model.OficioAban).Name("OficioAban")
                                                .DataSource(datasource => datasource
                                                    .Ajax()
                                                    .ServerOperation(false)
                                                    .Events(events => events.Error("error_handler"))
                                                    .Model(model =>
                                                    {
                                                        model.Id(t => t.OficioId);
                                                        model.Field(t => t.OficioId).Editable(false);
                                                        model.Field(t => t.Usuario).Editable(false);
                                                    })
                                                )
                                                .Events(e => e.Edit("onEdit"))
                                                .EnableCustomBinding(true)
                                                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                                                .Navigatable()
                                                .Scrollable()
                                                .TableHtmlAttributes(new { @class = "table" })
                                                .ToolBar(commands =>
                                                {
                                                    commands.Create().Text("Nuevo");
                                                })
                                                .Columns(columns =>
                                                    {
                                                        columns.Bound(o => o.OficioId).Hidden().ClientTemplate("#= OficioId #<input type='hidden' name='OficioAban[#= index(data) #].OficioId' value='#= OficioId #'/>");
                                                        columns.Bound(o => o.NumeroOficio).ClientTemplate("#= getValue(NumeroOficio) #<input type='hidden' name='OficioAban[#= index(data) #].NumeroOficio' value='#= NumeroOficio #'/>");
                                                        columns.Bound(o => o.FechaOficio).ClientTemplate("#= getDate(FechaOficio) #<input type='hidden' name='OficioAban[#= index(data) #].FechaOficio' value='#= getDate(FechaOficio) #'/>");
                                                        columns.Bound(o => o.TipoOficioId).ClientTemplate("#= getTipoOficioText(TipoOficioId) #<input type='hidden' name='OficioAban[#= index(data) #].TipoOficioId' value='#= TipoOficioId #'/>").Title("Asunto");
                                                        columns.Bound(o => o.TipoManiobraId).ClientTemplate("#= getManiobraText(TipoManiobraId) #<input type='hidden' name='OficioAban[#= index(data) #].TipoManiobraId' value='#= TipoManiobraId #'/>").Title("Maniobra");
                                                        columns.Bound(o => o.Remanejos).ClientTemplate("#= getValue(Remanejos) #<input type='hidden' name='OficioAban[#= index(data) #].Remanejos' value='#= Remanejos #'/>");
                                                        columns.Bound(o => o.FechaMovimiento).ClientTemplate("#= getDate(FechaMovimiento) #<input type='hidden' name='OficioAban[#= index(data) #].FechaMovimiento' value='#= getDate(FechaMovimiento) #'/>");
                                                        columns.Bound(o => o.Pedimento).ClientTemplate("#= getValue(Pedimento) #<input type='hidden' name='OficioAban[#= index(data) #].Pedimento' value='#= Pedimento #'/>");
                                                        columns.Bound(o => o.Documento).Width(180).ClientTemplate("#= getValue(Documento) #<input type='hidden' name='OficioAban[#= index(data) #].Documento' value='#= Documento #'/>");
                                                        columns.Bound(o => o.Archivo).ClientTemplate("<input type='hidden' name='OficioAban[#= index(data) #].Archivo'/>");
                                                        columns.Bound(o => o.Liberacion).ClientTemplate("#= Liberacion ? 'Si' : 'No' #<input type='hidden' name='OficioAban[#= index(data) #].Liberacion' value='#= Liberacion #'/>");
                                                        columns.Bound(o => o.Usuario).ClientTemplate("#= getUser(Usuario) #<input type='hidden' name='OficioAban[#= index(data) #].Usuario' value='#= Usuario #'/>");
                                                        columns.Command(command => command.Destroy().Text("Borrar")).Width(95).Title("Acciones");
                                                    })
                                                .Mobile()
                                                .Resizable(resize => resize.Columns(true))
        )

and this is my upload file Editor Template

@(Html.Kendo().Upload()
        .Name("Archivo")
        .ShowFileList(false)
        .HtmlAttributes(new { @class = "form-control filestyle", accept = ".pdf", style = "vertical-align: bottom; padding:0px; margin:0px; border:0px; margin-top:2.5ex;" })
        .Multiple(false)
)

Upload

answered on 20 May 2016

1 answer

250 views

Scheduler Set Dynamic Row Height

Hello,

I have a scheduler with timeline view and need to set the row height dynamically. If I set the default height via css the auto expand won't work but if it's not there are to many white space inside the row. Please check image attached to clarify my mind. And is it possible to set alternate row here?

Thank you in advance.

Scheduler

answered on 20 May 2016

5 answers

541 views

TimePicker : The value 'XXX' is not valid for 'PropertyName'.

I have MVC5 application and I am using kendo time picker to show time in 12 hr format. The ccorresponding model property is of type TimeSpan. When i submit the chosen time to server, the MVC model binding throws error

The value 'XXX' is not valid for 'PropertyName'.

cshtml

@(Html.Kendo().TimePickerFor(x => x.OrderTime)

              .Value("8:00 PM")

              .Min("12:00 AM")

              .Max("11:30 PM")

              .Format("hh:mm tt"))

model

public class MyModel

{

public TimeSpan OrderTime {get;set;}

}

Note that if i remove Format method from the timePicker and submit the time in 24 hr format then i get chosen timespan value on server

Date/Time Pickers

answered on 20 May 2016