Telerik Forums
UI for ASP.NET MVC Forum
3 answers
276 views
We have a situation where our customer's network is slow and when inserting records into a grid, they'll occasionally grow inpatient and click the update button multiple times, resulting in duplicate records being saved.  I know we can set an onclick event and disable the button but I would rather not have to do that on the dozens of grids we have in our application.  Is there an easy way to set this behavior globally?
Viktor Tachev
Telerik team
 answered on 19 Jan 2017
1 answer
1.8K+ views

I have Kendo MVC Grid on my page with multi column sorting enabled. But sorting on two specific fields is not working:

1. For a column with conditional formatting done through JavaScript

2. Column with ClientTemaplate.

 

Below is my code.

@(Html.Kendo().Grid<Info>()
           .Name("Info")
           .Columns(columns =>
           {
               columns.Bound(c => c.ColumnA).Width("4%").Title("A #").Sortable(true);
               columns.Bound(c => c.ColumnB).Width("4%").Title("B #").Sortable(true);
               columns.Bound(c => c.ColumnC).ClientTemplate("#=ColumnC.Name#").Sortable(true).Width("11%").Title("C");
           })
           .Editable(edit => edit.Mode(GridEditMode.InLine))
           .Events(events => { events.Save("gridSave"); })
           .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
           .DataSource(source => source
               .Ajax()
               .Sort(sort => sort.Add("ColumnA").Descending())
               .ServerOperation(false)
               .Model(model =>
               {
                   model.Id(f => f.Id);
                   model.Field(f => f.ColumnA).Editable(false);
                   model.Field(f => f.ColumnB).Editable(false);
                   model.Field(f => f.ColumnC).DefaultValue(new ColumnC() { Id = 0 });
               })
               //other configuration removed
               .Events(events => { events.RequestEnd("sourceReadComplete");  })
           )
   )

 

Case 1: I am adding a css class based on a condition. Sorting is not working on this column. If I comment the code that is adding the class, then the sort works fine.

function sourceReadComplete(e) {
                var grid = $("#Info").data("kendoGrid");
                grid.one("dataBound", function () {
                    var gridData = grid.dataSource.view();
                    for (var i = 0; i < gridData.length; i++) {
                        //get the item uid
                        var currentUid = gridData[i].uid;
                        //find the row based on the uid and the custom class
                        var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
 
                        //if the record fits the condition
                        if (gridData[i].Condition == true) {
                            currentRow.find("td:first").addClass("followup")
                        }
                    }
                });
            
        }

 

Case 2: Sorting on Column C is not working. If I bind the column directly to ColumnC.Name then sorting works. But I cannot do that as I want a dropdown for this field in Edit mode.

 

Konstantin Dikov
Telerik team
 answered on 19 Jan 2017
1 answer
101 views

Hi

I am using a tabstrip with the content of each tab being retrieved from a controller using LoadContentFrom, the controller for each tab returns a partial view, which all works fine. The problem I have is that some users frequently leave their computers for some time, then when they click on a new tab their session has timed out. I can see the ajax call in this situation correctly gets back a 401, however the tabstrip just displays an empty div which confuses the users.

I've tried hooking all the tab strip events and inspecting the parameters but there does not appear to be anyway of identifying a 401 has been returned, is this possible? If I can trap the 401 in JavaScript I can deal with it appropriately.

My environment is MVC 5, Kendo 2016.3, .Net 4.5.2

TIA

Pete

Nencho
Telerik team
 answered on 19 Jan 2017
2 answers
108 views

I have a Grid created with an ASP.NET partial view:

   @(Html.Kendo().Grid<MyApp.ViewModels.ComponentDisplayInfo>()

        .Name("component_template_grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Description);

        })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ComponentAdmin_Read", "Home"))
            .PageSize(20)
        )

)

there is also a text input users can type into to change the filter values, and I bind the change event on this to:

 

    componentGridFilterInput(e: JQueryInputEventObject) {

        let filters = [];
        let name_input = $("#component_name").val();
        if (name_input.length > 0)
            filters.push({ field: "Name", operator: (item, value) => this.filterFunction(item, value), value: name_input });

        let grid_table = $("#component_template_grid").data("kendoGrid");
        grid_table.dataSource.filter({ logic: "and", filters: filters });
    }

this.filterfunction() is:

    filterFunction(item: string, value: string): boolean {

        let test = item.indexOf(value);

        return test > -1;
    }

the problem is the grid is not updated with this filtering, the filter function is not even called once.

but, if I replace the functional operator for the filter with:

            filters.push({ field: "Name", operator: "contains", value: name_input });

this is working as expected.

Additionally, if on page load I replace the grid's datasource with:

            let grid_table = ("#component_template_grid").data("kendoGrid");

            grid_table.setDataSource(new kendo.data.DataSource({
                    data: [
                        { Name: "Test 1", Description: "Test 1" },
                        { Name: "Test 2", Description: "Test 2" }
                    ]
             }));

 

the functional filter is working as expected.

Only the combination of the functional filter + ajax datasource isn't re-filtering the table when I programmatically change the filter after the table is displayed ...

Thanks for any help.

Troy
Top achievements
Rank 1
 answered on 18 Jan 2017
2 answers
744 views

The Grid has column filter implemented referring to this link > grid-filter-row

When cursor is placed in filter text box and press Enter, the last button click event is firing.

<div id="divGrid">
    @(Html.Kendo().Grid<DocumentModel>()
        .Name("Grid")
    .Columns(columns =>
    {
          
        columns.Bound(e => e.Name)
            .Title("Document Name")
            .Width(220)
            .HtmlAttributes(new { title = "#= Documentpath #" })
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        columns.Bound(e => e.Format)
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
            .Width(140);
        columns.Bound(e => e.Type)
            .Title("Type")
            .ClientTemplate("<div align=center>#=Type#</div>")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));       
        columns.Bound(e => e.LastModifiedDate)
            .Title("Modified Date")
            .Filterable(ftb => ftb.Cell(cell => cell.Operator("Is after")))
            .ClientTemplate("#= kendo.toString(LastModifiedDate, \"dd MMM yyyy HH:mm \") #");
    })
    .NoRecords("No documents to display")
    .Sortable()
    .Scrollable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Pageable(pager => pager.Refresh(true).PageSizes(new int[] { 10, 50, 100 }))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
                         .Events(events => events.Error("Error"))
                .Read(read => read.Action("DocReadData", "Doc",
                    new
                    {   objectID = ViewBag.ObjectID,
                        jurisdiction = @ViewBag.Jurisdiction
 
                    }))
      )
     .Events(events => events
         .DataBound("dataBound"))
    )
</div>
<div class="main-wrap" style="padding-top:1em">
    <div class="floatLeft">
        @(Html.Kendo().Button()
                        .Name("btnBack")
                        .Content("Back")
                        .HtmlAttributes(new { type = "button" })
                        .Events(ev => ev.Click("onbtnBackClick")) ///ajax call
        )
    </div>
    <div class="floatRight">
        @(Html.Kendo().Button()
                            .Name("btnDownload")
                            .Content("Download Doc")
                            .HtmlAttributes(new { type = "button" })
                                    .Events(ev => ev.Click("onbtnDownloadClick")) ///ajax call
        )
        @(Html.Kendo().Button()
                            .Name("btnTest")
                            .Content("TestButton")
                            .HtmlAttributes(new { type = "button" })
                                            .Events(ev => ev.Click("onbtnTestClick"))
                                                    .HtmlAttributes(new { title = @ViewBag.ErrorMessage })///ajax call
        )
    </div>
</div>
<script type="text/javascript">
 
function onbtnTestClick(e) {               
        alert("onbtnTestClick");
    }
</script>  

 

On pressing Enter key in Filter textbox shows the alert message "onbtnTestClick".  

Is there any default form submit event exists in kendo? What is causing this and how to prevent. Please suggest

 

 

Viktor Tachev
Telerik team
 answered on 18 Jan 2017
1 answer
134 views

Hi,

I am using a Grid MVC in a PartialView and when I try add a new record, the PartialView is rendered and obviously the page lost styles and scripts.
How can I use all functionalities of a Grid MVC in a PartialView.

This is my code.

01.@(Html.Kendo().Grid(Model.RelatedCompanies)
02.    .Name("Relatedcompanies")
03.    .ToolBar(tools => tools.Create().Text("Agregar nuevo"))
04.    .Columns(columns =>
05.    {
06.        columns.Bound(p => p.ThirdParties.NumIdentificationThirdParty);
07.        columns.Bound(p => p.ThirdParties.BusinessName).ClientTemplate("#= ThirdParties.BusinessName #" +
08.            "<input type='hidden' name='RelatedCompanies[#= index(data)#].ThirdParties.BusinessName' value='#= ThirdParties.BusinessName #' />"
09.        );
10.        columns.Bound(p => p.DescriptionRelatedCompany).ClientTemplate("#= DescriptionRelatedCompany #" +
11.            "<input type='hidden' name='RelatedCompanies[#= index(data)#].DescriptionRelatedCompany' value='#= DescriptionRelatedCompany #' />"
12.        );
13.    })
14.    .Events(events => events
15.        .Change("relatedCompaniesOnChange")
16.    )
17.    .DataSource(dataSource => dataSource
18.        .Server()
19.        .Model(model =>
20.        {
21.            model.Id(p => p.Id);
22.        })
23.        .Create(update => update.Action("CreateCompany", "ThirdPartiesDef"))
24.    )
25.)
Viktor Tachev
Telerik team
 answered on 18 Jan 2017
1 answer
252 views

My ClientFooterTemplate / Aggregate data is not updating when I press the Edit / Update buttons. The row is successfully updated though.

How do I trigger this update OR what setting do I enable to get this automatically?

Bruce
Top achievements
Rank 1
 answered on 18 Jan 2017
3 answers
251 views

Hello,

I am using a date picker and have some code in the change event that I would like to fire when a date is entered into the input box.  I have found that the change event is not fired when a date is typed into the input box with a 2 digit year (17 vs 2017).  Your DatePicker/Events demo (http://demos.telerik.com/aspnet-mvc/datepicker/events) shows this behavior also.  Type in "1/1/2017" and the change event fires, clear out the box and the change event fires, type in "1/1/17" and the change event does not fire. 

Is there something I can do to make the change event fire when a date with a 2 digit year is entered?

Thanks,

Bryan Smouse

 

 

Angel Petrov
Telerik team
 answered on 17 Jan 2017
7 answers
174 views

Hi,

In one scenario, I used a javascript Ajax call to get data and then I constructed my sheet like this:

var sheet = spreadsheet.insertSheet({ rows: total });

sheet.setDataSource(data);

This way, the columns and rows are constructed by following the format defined in the JSON in data.

Now ... see the attached screenshot. Is it even remotely possible to get a following excel layout using the approach above? I can re-construct the layout without loading data, but in an ideal world, the user would get a spreadsheet without data (but containing the columns layout), and then using some filters outside the spreadsheet, x-number of columns (with the salmon background) would be added. Customers, etc (with green background) would be added.

Is there an alternative to setDataSource to bind data to a starting cell/row, etc.

Thanks,

Nicolas

Veselin Tsvetanov
Telerik team
 answered on 17 Jan 2017
8 answers
375 views

I am not sure if this is a KendoWindow problem or a KendoDropDownList problem, so I will post in both forums.
My Problem:
I have 2 DropDownLists; 'Code' and 'Rule'. 'Rule' cascades from 'Code'. These are both located in a modal KendoWindow.
If I have my controller return a PartialView, the second DropDownList does not even appear as a DropDownList, but as a textbox (Image1.jpg).
If I return a regular view, then both of the DropDownLists appear as they should (Image2.jpg), but then I get all of the stuff on the top of the popup that I do not want or need.

Code for my first DropDownList:

@(Html.Kendo().DropDownListFor(model => model.IncidentCategoryCode)                 //DropDownList for CODE
.HtmlAttributes(new { id = "incidentCategoryCode", style = "width: 99%;", @class = "large-links" })
.DataTextField("IncidentCategoryCode")
.DataValueField("IncidentCategoryCode")
.DataSource(source =>
{
    source.Read(read =>
    {
        read.Action("GetIncidentCategories", "IncidentCategory");
    });
})
)

Code for my second DropDownList:

@(Html.Kendo().DropDownListFor(model => model.ViolationCategoryNumber)                 //DropDownList for RULE
.HtmlAttributes(new { id = "violationCategoryNumber", style = "width: 99%;", @class = "large-links" })
.DataTextField("ViolationCategoryNumber")
.DataValueField("ViolationCategoryNumber")
.DataSource(source =>
{
    source.Read(read =>
    {
        read.Action("GetIncidentViolations", "IncidentViolation").Data("filterCreateIncidentViolation");
    })
    .ServerFiltering(true);
})
.CascadeFrom("incidentCategoryCode")
.CascadeFromField("IncidentCategoryCode")
)

Code for my filter:

function filterCreateIncidentViolation() {
    return {
        code: $("#incidentCategoryCode").val(),
        incidentViolationCodeFilter: $("#violationCategoryNumber").data("kendoDropDownList").value()
    };
}

 

Any ideas on this would be greatly appreciated,

Bob Mathis

Bob
Top achievements
Rank 2
 answered on 17 Jan 2017
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?