Telerik Forums
UI for ASP.NET MVC Forum
3 answers
291 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.9K+ 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
107 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
111 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
760 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
144 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
260 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
265 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
181 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
384 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
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?