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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid control (grouping+template coulumn TemplateID) (one more)

Thread ID:

Created:

Updated:

Platform:

Replies:

130306 May 5,2017 09:39 AM UTC May 8,2017 04:02 PM UTC ASP.NET MVC 2
loading
Tags: Grid
egor
Asked On May 5, 2017 09:39 AM UTC

Hi guys,

Something strange was happen with my previous question. So I repeat it in another thread.

I try to use grouping. Here sample code, just copy it to VS and run:

@using WizzartBuyer.Models.Client
@using WizzartBuyer.Models.Shared
@model List<WizzartBuyer.Models.Shared.CategoryModel>

@{
    ViewBag.Title = "Список продукции";
    var datasource = new[]
    {
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 },
    }; 
}


<script>
    function OnAddProductClicked(productId, amount)
    {
        
    }

    function OnTemplateRefresh(args) {

        var editProductAmount = $(args.cell).find(".editProductAmount");
        var amount = editProductAmount.val();


        editProductAmount.ejNumericTextbox({
            watermarkText: "Кол.шт.",// set watermark in numeric
            minValue: 1,
            value: amount,
            width: "80px",
            height: "30px"

        });

        $(args.cell).find(".buttonAddProduct").ejButton({
            width: "80px",
            height: "30px",
            click: function () { OnAddProductClicked(args.data.Id, editProductAmount.val()); }
        });
    }

</script>

<script type="text/x-jsrender" id="productFillGridAdd">
    <table>
        <tr>
            <td>
                <input type="text" id="productAmount_{{:Id}}" class="editProductAmount" value="1" />
            </td>
            <td>
                <button id="productAdd_{{:Id}}" class="buttonAddProduct" >Добавить</button>
            </td>
        </tr>
    </table>
</script>



<div id="operationResultNotice"></div>

<div class="container">


                <div class="panel-body">
                    @(Html.EJ().Grid<ClientProductModel>("productFillGrid")
                                .Datasource(ds => ds.Json(datasource)
                            .Adaptor(AdaptorType.RemoteSaveAdaptor))
                        //.AllowFiltering(true)
                        //.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
                        .AllowSorting()
                        .AllowGrouping()
                        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Name"); }).EnableDropAreaAnimation(false); })
                        .Columns(col =>
                        {
                            col.Field("Id").HeaderText("№").IsIdentity(true).IsPrimaryKey(true).Visible(false).Width(25).Add();
                            col.Field("Name").HeaderText("Наименование продукции").Tooltip("#cellTooltip").AllowEditing(false).Width(105).Add();
                            col.Field("Portion").HeaderText("Фасовка").AllowEditing(false).Width(35).Add();
                            col.Field("PackCount").HeaderText("Кол. в упак.").AllowGrouping(false).AllowSorting(false).AllowFiltering(false).AllowEditing(false).Visible(true).Width(35).Add();
                            col.Field("CurrentPrice").HeaderText("Цена за ед.").Visible(true).AllowEditing(false).Width(35).Add();
                            col.Field("Add").HeaderText("Добавить").AllowGrouping(false).AllowSorting(false).AllowFiltering(false).Visible(true).Template(true).TemplateID("#productFillGridAdd").Width(75).Add();
                        })
                        .GridLines(GridLines.Vertical)
                        .ClientSideEvents(eve => eve.TemplateRefresh("OnTemplateRefresh").QueryCellInfo("OnQueryCellInfo").DataBound("OnDataBound")))
                </div>
        

</div>


At result I got some thing like this:



Some controls were overloaded (36), other not.

Is there any solution to avoid this confuse.

Thanks a lot.
Best regards


egor
Replied On May 5, 2017 09:46 AM UTC

And I want to show html tooltip with picture for one of the cell. 
But there is not solution how to do that. 

I try 
https://help.syncfusion.com/api/js/ejgrid#members:columns-tooltip
and manipulation with "title" throw the Custom attributes or like this article:
https://help.syncfusion.com/aspnetmvc-classic/grid/how-to/how-to-show-tooltip-on-grid-cell-mousehover-in-server-mode

Best regards, 
Egor.


Jayaprakash Kamaraj [Syncfusion]
Replied On May 8, 2017 04:02 PM UTC

Hi Egor,  
Query 1: Some controls were overloaded (36), other not. 
 
We have analyzed your query and we are able to reproduce the reported issue from our end.   
 
So, we suggest you to change the column template as shown in the below code example.  
 
 
<script type="text/x-jsrender" id="productFillGridAdd">  
  
    <input type="text" id="productAmount_{{:Id}}" class="editProductAmount" value="1"style="float:left;padding-right:10px" />  
              
    <button id="productAdd_{{:Id}}" class="buttonAddProduct" >Добавить</button>  
             
</script>  
 
We have prepared a sample and it can be downloadable from the below location.  
 

Query 2: And I want to show html tooltip with picture for one of the cell.  
 
We have achieved your requirement using QueryCellInfo event of Grid. In this event, we need to bind ejTooltip in grid cell using below code example, 
 
@(Html.EJ().Grid<OrdersView>("FlatGrid") 
        .Datasource(ds => ds.Json(datasource) 
        .Adaptor(AdaptorType.RemoteSaveAdaptor)) 
        .AllowGrouping() 
        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Name"); }).EnableDropAreaAnimation(false); }) 
        .ClientSideEvents(eve => eve.TemplateRefresh("OnTemplateRefresh").QueryCellInfo("OnQueryCellInfo").DataBound("OnDataBound")) 
        .Columns(col => 
        { 
            col.Field("id").HeaderText("ID").Width(75).Add(); 
            col.Field("Name").HeaderText("Name").Width(80).Add(); 
            col.Field("Portion").HeaderText("Portion").Width(75).Add(); 
            col.Field("PackCount").HeaderText("Pack Count").Width(75).Add(); 
            col.Field("CurrentPrice").HeaderText("Current Price").Width(75).Add(); 
            col.Field("Add").HeaderText("Добавить").Visible(true).Template("#productFillGridAdd").Width(75).Add(); 
        }).ClientSideEvents(eve=>eve.QueryCellInfo("querycellInfo"))) 
</div> 
<script type="text/javascript"> 
    function querycellInfo(args){ 
        $(args.cell).ejTooltip( 
{ 
    width: "100px", 
    content: ' <img src="http://js.syncfusion.com/demos/web/images/tooltip/template-2.png" width="50px" height="50px">' + args.text + '</div>' 
}); 
} 
 



 


Regards, 

Jayaprakash K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;