Questions on UI for ASP.NET MVC Forum

7 answers

2.1K+ views

Change color of cell based on value entered in other cells.

Lets say i have a grid with three columns A,B and C. Also lets assume the grid is Batch so that mean In-Cell edit. If a user is entering a row and and the user enters the same number in both cells A and B, then I want cell C to have a background color of red.

Basically this is a conditional on edit of two cells and if they meet the condition a third cell's background color is changed. This is not needed during databound because it's a simple batch that will clear the entries once saved some no data binding taking place if that makes sense.

I tired using a clientTemplate but it seems to work only on a new record or during databinding. If they edit an existing row it needs to perform the check.

Any suggestions appreciated

I'm assuming on the Save event (in-cell), but how do you get and set the cell background color of C?

Grid

answered on 16 Aug 2016

9 answers

2.8K+ views

How to pass the ViewModel edited with an ajax post

I would like to send a viewModel selected with edit "Edit" action grid to update this row data in controller side .
I would like then to send back the new version of row data : update Popup and datasource grid.

For now, the ajax post to send the edit row doesn't work fine. The data propertie of ajax call return an javascript Error.

Do you have a suggestion ? Thanks.

View :

@(Html.Kendo().Grid<KendoGridAjaxEditing.Models.ProductViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(product => product.ProductName);

columns.Bound(product => product.UnitsInStock).Width(250);

columns.Command(commands =>

{

commands.Edit(); // The "edit" command will edit and update data items

commands.Destroy(); // The "destroy" command removes data items

}).Title("Commands").Width(200);

})

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.Scrollable()

.Groupable()

.Events(e =>

{

e.Edit("onRequestEdit"

); // Ajax Call to update

})

.Editable(editable => editable.Mode(GridEditMode.PopUp)) // Use inline editing mode

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model

model.Field(product => product.ProductID).Editable(false).DefaultValue(0); // Make the ProductID property not editable

})

.Events(events =>

{

events.Error("onError");

})

.ServerOperation(false)

.Create(create => create.Action("Products_Create", "Home")) // Action invoked when the user saves a new data item

.Read(read => read.Action("Products_Read", "Home")) // Action invoked when the grid needs data

.Update(update => update.Action("Products_Update", "Home")) // Action invoked when the user saves an updated data item

.Destroy(destroy => destroy.Action("Products_Destroy", "Home")) // Action invoked when the user removes a data item

)

.Pageable()

)

JavaScript (ajax call) :

function onRequestEdit(arg) {

alert("onRequestEdit : Edit row");

var griddata = $("#grid").data("kendoGrid");

var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid");

kendoConsole.log('onRequestEdit : Edit uid :' + uid);

var model = $("#grid").data("kendoGrid").dataSource.getByUid(uid);

// Show row value with currente model -> OK

kendoConsole.log("onRequestEdit : Edit model : " + model.ProductID + ":" + model.ProductName);

// Show row value with argument -> OK

kendoConsole.log("onRequestEdit : Edit argument : " + arg.model.ProductID + ":" + arg.model.ProductName);

$.ajax({

url: '@Url.Action("Products_CheckLock", "Home")',

type: 'POST',

datatype: 'json',

contentType: "application/json; charset=utf-8",

//data: JSON.stringify({ product: arg.model.data() }), // Return a javaScript Error

//data: JSON.stringify({ product: arg.model() }), // Return a javaScript Error

//data: JSON.stringify({ product: arg.model.dataSource(this) }), // Return a javaScript Error

//data: JSON.stringify({ product: arg.model.dataSource.data() }), // Return a javaScript Error

data: JSON.stringify({ product: arg.model.dataSource.data() }), // Return a javaScript Error

success: function (result) {

// Update record in Popup Edit

// Is it a good way ?

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

var dataSource = new kendo.data.DataSource({

data: result.Data

});

grid.setDataSource(dataSource);

grid.dataSource.refresh();

},

error: function () { alert('SM : Error Edit row'); }

})

}

Controller :

public ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, ProductViewModel[] product)

//public ActionResult Products_CheckLock([DataSourceRequest]DataSourceRequest request, String product)

{

if (ModelState.IsValid)

{

using (var northwind = new NorthwindEntities())

{

// Create a new Product entity and set its properties from the posted ProductViewModel

var entity = new Product

{

ProductID = product[0].ProductID,

                        ProductName = "Last_Version-" + product[0].ProductName,

                        UnitsInStock = product[0].UnitsInStock

};

}

// Return the removed product. Also return any validation errors.

return Json(new[] { product }.ToDataSourceResult(request, ModelState));

}

Grid

answered on 15 Aug 2016

5 answers

680 views

Accessing Field in clientdetailtemplate

Hello,

I am having an issue accessing a field that exists in the model for the clientdetailtemplate it keeps searching the parent grids model and not the clientdetail:

below in the template grid the line columns.Bound(c => c.PurchaseOrder).ClientTemplate("<button class='k-button' onclick=\"showDetails('#=PurchaseOrder#','#=DC#')\">Item Details</button>").Title("Item Details"); fails with "Uncaught ReferenceError: DC is not defined" but i can swith DC in that line to PODateShort and it send that number to the onclick function. so im assuming that #=field# can only reference the main grids model but i need to get the DC from the secondary grid so that i can send that to the onclick and search for all the items in that po for that dc.

Any help would be greatly appreciated.

@(Html.Kendo().Grid<PurchaseOrderResults>()
.Name("POGrid")
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.HtmlAttributes(new { style = "height:600px;" })
.Columns(columns =>
{
columns.Bound(c => c.PurchaseOrder);
columns.Bound(c => c.PODateShort);
columns.Bound(c => c.RequestDateShort);
columns.Bound(c => c.ActualShipDateShort);
columns.Bound(c => c.ArrivalDateShort);
})
.Scrollable()
.ClientDetailTemplateId("POtemplate")
.Sortable()
.Pageable(builder => builder.PageSizes(new[] { 10, 50, 100 }))
.DataSource(datasource => datasource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetPOSearch", "PO", new { SiteID = Model.SiteID, PONumbers = Model.PONumbers }))
)
)
</div>
<script id="POtemplate" type="text/kendo-tmpl">
@(Html.Kendo().Grid<PurchaseOrderDCResults>()
.Name("POGrid_#=PurchaseOrder#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(c => c.PurchaseOrder);
columns.Bound(c => c.DC);
columns.Bound(c => c.OrderDollars);
columns.Bound(c => c.UnitsOrdered);
columns.Bound(c => c.PurchaseOrder).ClientTemplate("<button class='k-button' onclick=\"showDetails('#=PurchaseOrder#','#=DC#')\">Item Details</button>").Title("Item Details");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetPODCSearch", "PurchaseOrder", new { SiteID = Model.SiteID, PONumber = "#=PurchaseOrder#" }))
)
.Pageable(builder => builder.PageSizes(new[] { 10, 50, 100 }))
.Sortable()
.ToClientTemplate()
)
</script>

Grid

answered on 15 Aug 2016

2 answers

247 views

Custom PasteCleanup, Deserialization and Serialization callback usage

Hello,

I am having some trouble using custom callbacks for PasteCleanup, Deserialization or Serialization. Whatever input string I give as the custom callback, be it a function name or declaration, just gets double quoted in the editor configuration javascript that is generated and is then seemly ignored. Unlike how setting an event callback works.

How do I setup an editor to use these features?

Sample code:

@(Html.Kendo().Editor()

.Name("bloop")

.PasteCleanup(e => e.Custom("onPaste"))

.Deserialization(e => e.Custom("onDeserialization"))

.Serialization(e => e.Custom("onSerialization"))

.Events(e => e.Change("onChange"))

)

<script type="text/javascript">

function onPaste(html) {

console.log('onPaste');

return html;

}

function onSerialization(html) {

console.log('onSerialization');

return html;

}

function onDeserialization(html) {

console.log('onDeserialization');

return html;

}

function onChange() {

console.log('onChange');

}

</script>

Using that above code Html.Kendo().Editor() is generating the following javascript when it executes:

jQuery(function(){jQuery("#bloop").kendoEditor({"change":onChange,"deserialization":{"custom":"onDeserialization"},"pasteCleanup":{"custom":"onPaste"},"serialization":{"custom":"onSerialization"},"tools":[{"name":"formatting"},{"name":"bold"},{"name":"italic"},{"name":"underline"},{"name":"justifyLeft"},{"name":"justifyCenter"},{"name":"justifyRight"},{"name":"insertUnorderedList"},{"name":"insertOrderedList"},{"name":"outdent"},{"name":"indent"},{"name":"createLink"},{"name":"unlink"},{"name":"insertImage"},{"name":"createTable"},{"name":"addColumnLeft"},{"name":"addColumnRight"},{"name":"addRowAbove"},{"name":"addRowBelow"},{"name":"deleteRow"},{"name":"deleteColumn"}]});});

Note how onDeserialization is double quoted where onChange is not.

Using R2 2016 SP2 (2016.2.714) with MVC4.

Thank you

Editor

answered on 12 Aug 2016

2 answers

102 views

tool bar location

In the editor, Is there a way to relocate the tool bar to the bottom left as opposed to the upper left?

Editor

answered on 12 Aug 2016

10 answers

90 views

Stockchart: Line and Volume in same pane

Hi,

the example http://demos.telerik.com/aspnet-mvc/financial/panes show how to plot the volume in a second pane.

How can I plot Line + Volume in one pane? Similar: http://finance.yahoo.com/chart/aapl

Peter

Chart

answered on 11 Aug 2016

1 answer

128 views

Paging remembers previous value in ASP.NET MVC

I have a form with input text boxes, search button and grid to display the result. Once user clicks on Search button, the result get displayed in the grid. I have 10,20, 50, 100, All set as paging option in the grid. At first when the result gets displayed in the grid the paging value is 10. The issue is once the user selects different paging value e.g. 50 and perform search again, the result that get displayed in the grid is with paging value of 50.

Is there anyway to reset paging value back to 10 again whenever new search is performed?

Thanks.

Avinash

Grid

answered on 11 Aug 2016

2 answers

145 views

Resizable feature

Is it known that the editor feature behaves differently in chrome for windows vs chrome for mac?

Editor

answered on 11 Aug 2016

1 answer

53 views

Popup localisation in french langage

How to localize in french create event popup ?

Please see attached file, i would like have title in french :

Event ==> Evenement

None ==> aucun

Time ==> heure

Here is my code

@(Html.Kendo().Scheduler<TaskViewModel>()
                .Name("schedule")
                .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
                .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 9, 00, 00))
                .EndTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 00, 00))
                .HtmlAttributes(new { @class = "ra-section" })
                .Views(views =>
                {
                    views.DayView(dayView => dayView.Selected(true));
                    views.WeekView();
                    views.MonthView();
                    views.AgendaView();
                })
                .Editable(true)
                .Timezone("Etc/UTC")
                .DataSource(dataSource => dataSource
                .Model(m =>
                {
                    m.Id(f => f.TaskID);
                    m.Field(f => f.Title);
                    m.Field(f => f.Start);
                    m.Field(f => f.End);
                    m.Field(f => f.EndTimezone);
                })
                .Events(e => e.Error("error_handler"))
                .Read("ChargerTous", "TaskScheduler")
                .Create("Ajouter", "TaskScheduler")
                .Update("Modifier", "TaskScheduler")
                .Destroy("Supprimer", "TaskScheduler")
                )

Scheduler

answered on 11 Aug 2016

1 answer

112 views

Cannot add a spreadsheet control inside a PanelBar

Hello Support,
Columns and Rows are not displayed when the Spreadsheet Control is placed inside a Panel Bar.
The spreadsheet control crashes with missing references when clicking on it.

Sample "simple" code.

@(Html.Kendo().PanelBar()
    .Name("TestPanelBar")
    .Items(items =>
    {
        items.Add()
            .Text("Spreadsheet1")
            .Content(@<text>
                    @(Html.Kendo().Spreadsheet()
                                        .Name("TestSpreadsheet")
                                        .HtmlAttributes(new { style = "width:100%" })
                                        .Sheets(sheets =>
                                        {
                                            sheets.Add()
                                                .Name("Sheet1")
                                                .Columns(columns =>
                                                {
                                                    columns.Add().Width(200);
                                                    columns.Add().Width(200);
                                                })
                                                .Rows(rows =>
                                                {
                                                    rows.Add().Height(25).Cells(cells =>
                                                    {
                                                        cells.Add()
                                                            .Value("Column1")
                                                            .Background("rgb(167,214,255)")
                                                            .Color("rgb(0,62,117)")
                                                            .TextAlign(SpreadsheetTextAlign.Center);

                                                        cells.Add()
                                                            .Value("Column2")
                                                            .Background("rgb(167,214,255)")
                                                            .Color("rgb(0,62,117)")
                                                            .TextAlign(SpreadsheetTextAlign.Center);
                                                    });
                                                });
                                        })
                    )
                </text>);
            })
)

Spreadsheet

answered on 11 Aug 2016