We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Beginner's question

Beginner's question

Hi,

I'm very new to the ASP.NET MVC and unexperienced. Part of my test application is the following:
        @(Html.EJ().Grid<PlanData>("PlanGrid")
        .AllowGrouping()
        .AllowFiltering()
        //.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
        //.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
        //.FilterSettings(filter => { filter.FilterType(FilterType.Excel).MaxFilterChoices(4); })
        .AllowPaging()
        .AllowResizing()
        .AllowSelection()
            .SelectionType(SelectionType.Single)
            .SelectionSettings(select => { select.SelectionMode(mode => {mode.AddMode(SelectionMode.Cell);  }); })
        .AllowScrolling()
        .AllowSorting()
        .Columns(col =>
        {
            col.Field("PRPLANID").HeaderText("PRPLANID").IsPrimaryKey(true).Visible(false).Add();
            col.Field("PRODUCTIONLINE").HeaderText("Production line").TextAlign(TextAlign.Left).Visible(false).Width(80).Add();
            col.Field("LOTNr").HeaderText("LOT Number").TextAlign(TextAlign.Left).Width(60).Add();
            col.Field("MATERIALNR").HeaderText("Material number").TextAlign(TextAlign.Left).Width(75).Add();
            col.Field("PRODDESC").HeaderText("Description").TextAlign(TextAlign.Left).Width(120).Tooltip("#descTip").ClipMode(ClipMode.EllipsisWithTooltip).Add();
            col.Field("STARTTIME").HeaderText("Start time").TextAlign(TextAlign.Left).Width(75).Add();
            col.Field("ENDTIME").HeaderText("End timet").TextAlign(TextAlign.Left).Width(75).Add();
            col.Field("WORKCENTER").HeaderText("Machine").TextAlign(TextAlign.Left).Width(45).Add();
            col.Field("QUANTITY").HeaderText("Quantity").TextAlign(TextAlign.Right).Width(50).Add();
        })
        .EnableResponsiveRow(true)
        .IsResponsive(true)
        .ToolbarSettings(toolbar =>
        {
            toolbar
                .ShowToolbar(true)
                .ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.ExcelExport);
                    items.AddTool(ToolBarItems.WordExport);
                    items.AddTool(ToolBarItems.PdfExport);
                });
        }))
The gird data source is filled by a doropdown box change, which works perfectly (I'm doing a kind of prefiltering data):
function drophchanged(args) {
      var data = ej.DataManager({ url: "MachineChanged", adaptor: "UrlAdaptor" });
      $("#PlanGrid").ejGrid({
          dataSource: data,
          query: new ej.Query().addParams("Machine", args.selectedText)
      });

So here are some questions:

1) how can I copy a cell content to the clipboard? I'm able to select he cell by double clicking on it, but CTRl+C does not works.
2)  I tried to use different filter settings, which are commented out now. If I start to use the Filtersettings, they have no effect. Even the table is filled by data, the filter does not populate it. How can I fill the filter with the current grid content?
3) I've few date fields, but had to convert them to string, because during the export I lost the date part and had only time in Excel, but worked perfectly in PDF. I tried to use ServerExcelQueryCellInfo, but at that point I have only the time part of datetime.
4) A bonus question: If the grid is empty, how can I disable the Toolbaritems?

Thanks in advance!
József

6 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 6, 2017 10:17 AM UTC

Hi Jozsef, 
 
Thanks for contacting Syncfusion Support.  
 
Query #1: how can I copy a cell content to the clipboard? 
 
By default, user-select property will be set to none in the ejGrid. If you would like to disable this, you have to override this property in the Grid. This can be achieved by using the CssClass property of the Grid as shown in the following code example and screenshot. 
 
<div id="ControlRegion"> 
    @(Html.EJ().Grid<object>("Grid") 
                .CssClass("copyText") 
    ) 
</div> 
<style> 
    .e-grid.copyText .e-rowcell { 
        -moz-user-select: inherit; 
        -khtml-user-select: inherit; 
        -webkit-user-select: text; 
        -ms-user-select: inherit; 
        user-select: inherit; 
    } 
</style> 
 
 
 
 
Query #2: I tried to use different filter settings, which are commented out now. If I start to use the Filtersettings, they have no effect. Even the table is filled by data, the filter does not populate it. 
 
FilterSettings is the dependent property and it depends on the AllowFiltering property of the Grid. If you have set the FilterSettings.FilterType to any of the filters (Excel/Menu/FilterBar), the Grid will render the respective filter dialogs or filter inputs. You can able to filter the Grid using these type of filters which has been explained in the following Help Document and showcase demo. 
 
 
If would like to render the Grid at the initial load with the filtered columns, you have to push the needed values to the FilterSettings.FilteredColumns property of the Grid. Refer to the following code example and API Reference.  
 
@(Html.EJ().Grid<MvcApplication66.OrdersView>("FlatGrid")  
        .FilterSettings(filter => 
            { 
                filter.FilterType(FilterType.Menu).FilteredColumns(fi => 
                { 
                    fi.Field("ShipCity").Value("Be").Predicate("and").Operator(FilterOperatorType.StartsWith).Add(); 
                }); 
            }) 
        .Columns(col => 
        { 
         . . . .   
        }) 
) 

 
 
You can also filter the Grid columns from external action using the filterColumn method of the Grid. Refer to the following code example and API Reference.  
 
 
@Html.EJ().Button("btn").Text("Filter").ClientSideEvents(events => events.Click("onClick")) 
 
@(Html.EJ().Grid<object>("Grid") 
        .AllowPaging() 
        .AllowFiltering() 
             . . . 
                . . . 
) 
 
<script> 
    function onClick(args) { 
        var gridObj = $("#Grid").ejGrid("instance"); 
        var dropObj = $("#FilterOperators").ejDropDownList("instance"); 
        var val = dropObj.getValue(); 
        if (val == "clearfiltering") 
            gridObj.clearFiltering(); 
        else 
            gridObj.filterColumn("CustomerID", val, $("#GridCustomerIDFilter").val()); 
    } 
</script> 

 
Please make a note that the clearFiltering method has been used to clear the filters applied to the Grid. 
 
 
Please let us know your requirement. 
 
Query #3: I've few date fields, but had to convert them to string, because during the export I lost the date part and had only time in Excel, but worked perfectly in PDF. I tried to use ServerExcelQueryCellInfo. 
 
We are unable to reproduce any problem at our end. We have prepared a sample that can be downloaded from the following location. 
 
 
Please share the following information to analyze the problem at our end. 
 
1)      Complete Code example of the Grid and code behind 
2)      Screenshot with the replication procedure or video demo for the issue 
3)      Version of the Essential Studio 
4)      If possible, modify the attached sample and reproduce the problem at our end. 
5)      Exported excel sheet 
 
Query #4: If the grid is empty, how can I disable the Toolbaritems 
 
We have already discussed about disabling individual items of the toolbar in the following KB.  
 
 
You can also disable the toolbarItems in the Grid using the ejToolbar’s enable property of the Grid. Refer to the following API Reference.  
 
 
In the Grid, you can disable/enable the Grid in the DataBound and ActionComplete events. Refer to the following code example and API References. 
 
@(Html.EJ().Grid<object>("Grid") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .AllowPaging() 
        .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items => 
                { 
                    items.AddTool(ToolBarItems.ExcelExport); 
                })) 
        .ClientSideEvents(events => events.DataBound("dataBound").ActionComplete("actionComplete")) 
) 
 
<script> 
    function dataBound(args){ 
        if(ej.isNullOrUndefined(this.model.dataSource) || this.model.dataSource.length) 
            $("#"+this._id+"_toolbarItems").ejToolbar({ enabled:  false });   
    } 
    function actionComplete(args){ 
        if(!this.initialRender &&  args.requestType == "refresh"){ 
            if(!(ej.isNullOrUndefined(this.model.dataSource) || this.model.dataSource.length)) 
                $("#"+this._id+"_toolbarItems").ejToolbar({ enabled:  true });  
        } 
    } 
 
</script> 
 
 
Regards,  
Seeni Sakthi Kumar S. 


JA Jozsef Antal April 6, 2017 08:22 PM UTC

Dear Seeni,many thanks for your help! I'm one step further now.Query #1: modified my View and works perfectly.Query #2: still could not filter. If I first load the data, then works. In my case, I load the data with a dropdown on change ( I attached the code). What I don't understand: if I only use AllowFiltering() (with true or empty) then, I am able to filter the records by entering filter values in the fields above the table header. Using the FilterSettings(filter => { filter.FilterType(FilterType.Excel); }) the selection list is always empty.Query #3:the code is in the attached file. Could be important, I'm using a Hu(ngarian) localized version of the grid. Query #4: How can I enable only one item, in my case the 'ProdLine' part of the Custom toolbar?I'm using the latest MVC library, 15.1.0.4, MVC5.Greetings from Hungary:JozsefAttachment: PlanTest_c25651bd.zip

JA Jozsef Antal April 7, 2017 07:26 AM UTC

Dear Seeni,

I edited my comment (added the library version), and lost the attactment.
Morning did another test and found very interesting the Excel export.
If I export the data comming from SQL, then I loose the date part of the Excel column, but when I'm using the list, then have it... I'll check it without dapper...
here are the attachment, again.
Thanks for your valuable support!
Jozsef

Attachment: PlanView_d79766c2.zip

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 7, 2017 02:48 PM UTC

  
Hi Jozsef,  
 
Query #: still could not filter. And Exporting issue. 
 
We are able to reproduce the problem at our end. Since the empty dataSource is bind to the Grid at initial load, columns and their types were not defined, excel filter misbehaves. Exporting a column also depends on the type of the Column So we suggest to mention the column Type as follows. 
 
@(Html.EJ().Grid<object>("Grid") 
            . . . 
                 . . . 
        .Columns(col => 
        { 
            col.Field("PRODUCTIONLINE").HeaderText("Termékcsalád").TextAlign(TextAlign.Left).Visible(false).Width(80).Add(); 
            col.Field("SETUPSTART").Type(ColumnType.DateTime).HeaderText("Beállítás kezdete").TextAlign(TextAlign.Left).Width(80).Format("{0:yyyy-MM-dd HH:mm}").Add(); 
            col.Field("STARTTIME").Type(ColumnType.DateTime).HeaderText("Kezdő időpont").TextAlign(TextAlign.Left).Width(80).Format("{0:yyyy-MM-dd HH:mm}").Add(); 
            col.Field("ENDTIME").HeaderText("Vége időpont").Type(ColumnType.DateTime).TextAlign(TextAlign.Left).Width(80).Format("{0:yyyy-MM-dd HH:mm}").Add(); 
        }) 
) 
 
 
We have prepared a sampled based on code example that can be downloaded from the following location. 
 
 
Query #: How can I enable only one item, in my case the 'ProdLine' part of the Custom toolbar? 
 
We have already mentioned about this in our previous update and referred about the following KB on this requirement.   
  
 
Regards,  
Seeni Sakthi Kumar S. 
 


JA Jozsef Antal April 10, 2017 08:09 AM UTC

Dear Seeni,

many thanks for your very helpfull support. Now the grid works as I wanted!
Reagrds,
Jozsef

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 11, 2017 04:04 AM UTC

Hi Jozsef,  
 
We are happy to hear that your requirement has been achieved and you are good to go. Get back to us, if you require further assistance on this. 
 
Regards,  
Seeni Sakthi Kumar S. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon