Telerik Forums
UI for ASP.NET Core Forum
1 answer
192 views

I have a grid which is a part of bigger form. I want to be able to do all sorts of data manipulation without saving it immediately. When saving form, I need to save data in a grid.

I'm experiencing a problem when editing a row in InLine mode. When I click on "edit", then "cancel", the row disappears from the grid depending on how I load data into the grid.

If Read method looks like this, than canceling edit works good but I'm not able to save data temporarily.

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            ToDestinations = _entities.ToDestinations.ToList();
            //var data = HttpContext.Session.Get("ToDestinationsData");
            //if (data != null)
            //{
            //    ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
            //}

            return new JsonResult(ToDestinations.ToDataSourceResult(request));
        }

On the other hand, if Read method looks like below, every row that I'm doing "edit" => "cancel" disappears. (This was a start to making grid data persistent while doing all kinds of data manipulation in a grid.)

public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            //ToDestinations = _entities.ToDestinations.ToList();
            var data = HttpContext.Session.Get("ToDestinationsData");
            if (data != null)
            {
                ToDestinations = JsonConvert.DeserializeObject<List<ToDestination>>(Encoding.UTF8.GetString(data));
            }

            return new JsonResult(ToDestinations.ToDataSourceResult(request));
        }

This is my grid.

@(Html.Kendo().Grid<ToDestination>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.ForeignKey(c => c.TravelTypeId, ds => ds.Read(read => read.Url(Url.Page("Create", "TravelTypes"))), "TravelTypeId", "TravelTypeName").Title("Vrsta putovanja");

                columns.ForeignKey(c => c.CountryId, ds => ds.Read(read => read.Url(Url.Page("Create", "Countries"))), "CountryId", "CountryName", true).Title("Država")
                .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                columns.ForeignKey(c => c.PlaceId, ds => ds.Read(read => read.Url(Url.Page("Create", "Places"))), "PlaceId", "PlaceName", true).Title("Mjesto")
                .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                columns.ForeignKey(c => c.CenterId, ds => ds.Read(read => read.Url(Url.Page("Create", "Centers"))), "CenterId", "CenterName", true).Title("Centar")
                .EditorTemplateName("CenterEditor"); // Specify a custom editor template for the Center dropdown.

                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Pageable()
            .Sortable()
            .Scrollable()
            .DataSource(ds => ds.Ajax()
            .Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
            .Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
            .Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
            .Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
            .Model(m =>
            {
                m.Id(id => id.ToDestinationId);
            })
            ))

I hope what I wrote makes sense.

What is the best practice to achieve saving grid data temporarily without "edit" => "cancel" bug appearing?

Stoyan
Telerik team
 answered on 04 Sep 2023
1 answer
168 views
 

Hello,

after upgrading the versions buttons will not shown correctly

  • Edit Button is disabled
  • Delete Button will not shown anymore

We using dotnet core version 7 and Telerik version 2023.2.606:

Here is the code of the columns.

                      <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command template="<a class='k-grid-edit k-icon k-i-edit button_icon' href='\#'> </a>" text="\{Edit\}" icon-class="k-icon k-i-edit button_icon" name="edit"></column-command>
                            </commands>
                        </column>
                        <column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
                            <commands>
                                <column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
                            </commands>
                        </column>

Have you any idea to fix the problems? I think the icon class is changed with the update.

Second problem is to disable the buttons via javascript:

                $(".k-grid-edit").addClass("k-state-disabled")
                $(".k-grid-custom").addClass("k-state-disabled")

Before the update this commands works well after not. Have you any idea to find the icon via javascript.

Best regards
Jens

Jens
Top achievements
Rank 1
Iron
 answered on 29 Aug 2023
1 answer
94 views

Hi, I have the following graph:

I would like to keep the values in the left side but without showing the negative sign, because they represent quantities. I tried several things for formatting the ValueAxis in order to perform some sort of Math.abs operation but nothing works. Is it possible what I want to achieve?

Otherwise, I wouldn't mid not showing the value axis if I can show the absolutes quantities using label template. However, I get a lot of undefined values that I don't know how to remove:

 .Series(series =>
            {

            series.Bar(
                model => model.Quantity,
                categoryExpression: model => model.Price
            ).Labels(l => l.Visible(true).Template("#= customLabelFormat(value) #").Position(ChartBarLabelsPosition.OutsideEnd).Color("#RGBA"));
        })

 

 

 function customLabelFormat(value) {
           
             return Math.abs(value).toString();
 
        }

 

Thanks a lot.

 

Alexander
Telerik team
 answered on 29 Aug 2023
2 answers
619 views

How to cascade DropDownList in Grid?

I've tried a lot of stuff using JavaScript, JQuery and Ajax but I can't get this to work. I wasn't able to find an example on how to do this.

This is my code for grid and editor templates...

@(Html.Kendo().Grid<ToDestination>(Model.ToDestinations)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.ForeignKey(c => c.TravelTypeId,
                    (System.Collections.IList)ViewData["TravelTypes"], "TravelTypeId", "TravelTypeName").Title("Travel Type");

                    columns.ForeignKey(c => c.CountryId,
                    (System.Collections.IList)ViewData["Countries"], "CountryId", "CountryName").Title("Country")
                    .EditorTemplateName("CountryEditor"); // Specify a custom editor template for the Country dropdown.

                    columns.ForeignKey(c => c.PlaceId,
                    (System.Collections.IList)ViewData["Places"], "PlaceId", "PlaceName").Title("Place")
                    .EditorTemplateName("PlaceEditor"); // Specify a custom editor template for the Place dropdown.

                    columns.Bound(c => c.PlaceName);
                    columns.Bound(c => c.CenterName);
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
                })
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .DataSource(ds => ds.Ajax()
                .Create(c => c.Url("/TravelOrders/Create?handler=Create").Data("forgeryToken"))
                .Read(r => r.Url("/TravelOrders/Create?handler=Read").Data("forgeryToken"))
                .Update(u => u.Url("/TravelOrders/Create?handler=Update").Data("forgeryToken"))
                .Destroy(d => d.Url("/TravelOrders/Create?handler=Destroy").Data("forgeryToken"))
                .Model(m =>
                {
                    m.Id(id => id.ToDestinationId);
                    m.Field(tt => tt.TravelTypeId).DefaultValue(1);
                    m.Field(c => c.CountryId).DefaultValue(1);
                })
                )
                )

@model int? // Assuming CountryId is nullable

@(Html.Kendo().DropDownList()
    .Name("CountriesList")
    .DataTextField("CountryName")
    .DataValueField("CountryId")
    .BindTo((System.Collections.IEnumerable)ViewData["Countries"])
    .OptionLabel("Select a country")
    .Events(e => e.Change("onCountryChange"))
)

@model int? // Assuming PlaceId is nullable

@(Html.Kendo().DropDownList()
    .Name("PlacesList")
    .DataTextField("PlaceName")
    .DataValueField("PlaceId")
    .BindTo((System.Collections.IEnumerable)ViewData["Places"])
    .OptionLabel("Select a place")
)

Alexander
Telerik team
 answered on 29 Aug 2023
0 answers
158 views

I want to disable drag and drop images from local folders or copy paste the images from clipboard into the Kendo Editor (https://demos.telerik.com/aspnet-core/editor). 
I am using this function emailEditorPaste() to prevent such ,

function emailEditorPaste(e) { var clipboardData = e.event.clipboardData || window.clipboardData; var items = clipboardData.items; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.type.indexOf("image") !== -1) { e.preventDefault(); console.log("Images cannot be pasted here"); break; } } }

and I have appended it to the Paste events on Editor as in here
@(Html.Kendo().EditorFor(m => m.MsgT.body) . .Tools(tools => tools .Clear() .FontName().FontSize() .Bold().Italic().Underline() .JustifyLeft().JustifyCenter().JustifyRight() .ForeColor().BackColor() .InsertUnorderedList().InsertOrderedList() .Outdent().Indent() .CreateLink().Unlink() .InsertImage() ) .Events(events => events .Change("emailEditorChange") .Paste("emailEditorPaste")

emailEditorPaste() works fine in not allowing me the user to drag and drop the images but when I have a text copied to clipboard and I try to paste it into editor , it doesn't paste on first attempt and throws a console error:
"Cannot read properties of undefined (reading 'clipboardData')
TypeError: Cannot read properties of undefined (reading 'clipboardData')" .

On second attempt the text is pasted into the editor just fine.

I looked all places but I am still missing something, can you please share me some resources on how to disable the drag and drop images into the editor.

shashank
Top achievements
Rank 1
Iron
 asked on 28 Aug 2023
1 answer
287 views

I need to show the notification on my razor page. The message comes from the controller. Below is what I have:

 

 public ActionResult Index()
        {
           

            if (test == "Success")
                return View("Successfully stored);
            else
                return View("failed to store");
        }

 

On My razor page, I want to show the Success notification message when test is Success otherwise show the failure message. How can I achieve this. I don't want to click any button to show the success and failure notification.

Mihaela
Telerik team
 answered on 28 Aug 2023
1 answer
124 views

Hi there,

I'd like to trigger the virtualization scroll event programatically. My idea is to use a global body scroller to register the scroll down, and completely turn off the scroller on the listview container.

When I use the following code it will only replace my existing rows.

$("#allProductsListView").data("kendoListView").dataSource.read({ page: 2, pageSize: 36 })

I need a way to append in order to make virtualization work programatically.

Thank you.

Mihaela
Telerik team
 updated answer on 28 Aug 2023
1 answer
143 views

I need grouping, filtering, sorting for a column. When I'm trying to bind to a field of an object which can be null, I get:

Uncaught TypeError: Cannot read properties of null (reading 'Name')

kva
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 28 Aug 2023
2 answers
419 views

Hello,

can be hidden Saturdays and Sundays from the scheduler control in all views and how?

Many thanks!

 

Michel
Top achievements
Rank 1
Iron
 answered on 27 Aug 2023
1 answer
124 views

I am looking for a sample of a responsive pie chart. I have tried different suggestions from the forums but none seem to work. Is there a fully worked sample I can reference?

Alexander
Telerik team
 answered on 25 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?