How to check the TABLE if it contains a word? _CreateOrUpdate.SpecificationAttributes.cshtml

1 week ago
i use last version of nopcommerce 4.50

i want to check if TABLE in _CreateOrUpdate.SpecificationAttributes.cshtml contains a word "made in"... and if it contains the word, then I need to do some action, like to add class or javasript.

i tried to do it with javascript, but the problem is that table renders after my script, that's why it doesn't work.

can you please tell me how can i do it in the file?

this is the code from the file _CreateOrUpdate.SpecificationAttributes.cshtml
@model ProductModel

<div class="card-body">
    <p>
        @T("Admin.Catalog.Products.SpecificationAttributes.Hint")
    </p>
    @if (Model.Id > 0)
    {
        /*hide "add spec" table if no attributes are defined*/
        if (Model.HasAvailableSpecificationAttributes)
        {
            <div class="card card-default">
                <div class="card-body">
                    @await Html.PartialAsync("Table", new DataTablesModel
                    {
                        Name = "specificationattributes-grid",
                        UrlRead = new DataUrl("ProductSpecAttrList", "Product", new RouteValueDictionary { [nameof(Model.ProductSpecificationAttributeSearchModel.ProductId)] = Model.ProductSpecificationAttributeSearchModel.ProductId }),
                        Length = Model.ProductPictureSearchModel.PageSize,
                        LengthMenu = Model.ProductPictureSearchModel.AvailablePageSizes,
                        ColumnCollection = new List<ColumnProperty>
                        {
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AttributeTypeName))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.AttributeType").Text,
                                Width = "150"
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AttributeName))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute").Text,
                                Width = "200"
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.ValueRaw))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.Value").Text,
                                Width = "200",
                                Encode = false
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AllowFiltering))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.AllowFiltering").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.CenterAll,
                                Render = new RenderBoolean()
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.ShowOnProductPage))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.ShowOnProductPage").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.CenterAll,
                                Render = new RenderBoolean()
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.DisplayOrder))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.DisplayOrder").Text,
                                Width = "150",
                                ClassName =  NopColumnClassDefaults.CenterAll
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.Id))
                            {
                                Title = T("Admin.Common.Edit").Text,
                                Width = "100",
                                ClassName =  NopColumnClassDefaults.Button,
                                Render = new RenderButtonEdit(new DataUrl("~/Admin/Product/ProductSpecAttributeAddOrEdit?productId=" + Model.ProductSpecificationAttributeSearchModel.ProductId + "&specificationId=", true))  
                            }
                        }
                    })
                </div>
                <div class="card-footer">
                    <a asp-action="ProductSpecAttributeAddOrEdit"
                       asp-route-productId="@Model.Id"
                       class="btn btn-primary">
                        <i class="fas fa-plus-square"></i>
                        @T("Admin.Catalog.Products.SpecificationAttributes.AddButton")
                    </a>

                </div>
            </div>
        }
        else
        {
            <div class="card card-default">
                <div class="card-body">
                    @T("Admin.Catalog.Products.SpecificationAttributes.NoAttributes")
                </div>
            </div>
        }
    }
    else
    {
        <div class="card card-default">
            <div class="card-body">
                @T("Admin.Catalog.Products.SpecificationAttributes.SaveBeforeEdit")
            </div>
        </div>
    }
</div>
1 week ago
Which column you want to check for the words "made in"...?
and where do you want to add that class/javascript?

You may have a look at renderColumnOrderStatus function in src\Presentation\Nop.Web\Areas\Admin\Views\Order\List.cshtml page, if it serves what you are looking for or not?
1 week ago
rmahbub63 wrote:
Which column you want to check for the words "made in"...?

here ColumnProperty(nameof(ProductSpecificationAttributeModel.AttributeName))

rmahbub63 wrote:
and where do you want to add that class/javascript?

i want to apply the javascript code for div in product creation page

rmahbub63 wrote:
You may have a look at renderColumnOrderStatus function in src\Presentation\Nop.Web\Areas\Admin\Views\Order\List.cshtml page, if it serves what you are looking for or not?

no, it doesn't work... i just need to check if TABLE (attribute name) contains words or not... and only if it contains the word "made in" i need to apply my code...
1 week ago
rmahbub63 wrote:
Which column you want to check for the words "made in"...?
and where do you want to add that class/javascript?

how can i do it please?
1 week ago
You may try using HeaderCallback,
it will get called on every draw event, https://datatables.net/reference/option/headerCallback
please look at src\Presentation\Nop.Web.Framework\Models\DataTables\DataTablesModel.cs file it have HeaderCallback & FooterCallback property.
also check at src\Presentation\Nop.Web\Areas\Admin\Views\Report\Bestsellers.cshtml to understand how default nop use FooterCallback.
You will have table data in data property, so you can check if the words "made in" exists in AttributeName property.
Hope this will help you. if you need more help please let me know.
1 week ago
rmahbub63 wrote:
You may try using HeaderCallback,
it will get called on every draw event, https://datatables.net/reference/option/headerCallback
please look at src\Presentation\Nop.Web.Framework\Models\DataTables\DataTablesModel.cs file it have HeaderCallback & FooterCallback property.
also check at src\Presentation\Nop.Web\Areas\Admin\Views\Report\Bestsellers.cshtml to understand how default nop use FooterCallback.
You will have table data in data property, so you can check if the words "made in" exists in AttributeName property.
Hope this will help you. if you need more help please let me know.

can't i do it using just .cshtml file?
i mean just check like if(table) contains "made in" { my js code goes here }
thanks.
1 week ago
The solution I suggest you from cshtml file,
have a look,
<div class="card card-default">
                <div class="card-body">
                    @await Html.PartialAsync("Table", new DataTablesModel
                    {
                        Name = "specificationattributes-grid",
                        UrlRead = new DataUrl("ProductSpecAttrList", "Product", new RouteValueDictionary { [nameof(Model.ProductSpecificationAttributeSearchModel.ProductId)] = Model.ProductSpecificationAttributeSearchModel.ProductId }),
                        Length = Model.ProductPictureSearchModel.PageSize,
                        LengthMenu = Model.ProductPictureSearchModel.AvailablePageSizes,
                        HeaderCallback = "dosomethingheadercallback",
                        ColumnCollection = new List<ColumnProperty>
                        {
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AttributeTypeName))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.AttributeType").Text,
                                Width = "150"
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AttributeName))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute").Text,
                                Width = "200"
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.ValueRaw))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.Value").Text,
                                Width = "200",
                                Encode = false
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.AllowFiltering))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.AllowFiltering").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.CenterAll,
                                Render = new RenderBoolean()
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.ShowOnProductPage))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.ShowOnProductPage").Text,
                                Width = "150",
                                ClassName = NopColumnClassDefaults.CenterAll,
                                Render = new RenderBoolean()
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.DisplayOrder))
                            {
                                Title = T("Admin.Catalog.Products.SpecificationAttributes.Fields.DisplayOrder").Text,
                                Width = "150",
                                ClassName =  NopColumnClassDefaults.CenterAll
                            },
                            new ColumnProperty(nameof(ProductSpecificationAttributeModel.Id))
                            {
                                Title = T("Admin.Common.Edit").Text,
                                Width = "100",
                                ClassName =  NopColumnClassDefaults.Button,
                                Render = new RenderButtonEdit(new DataUrl("~/Admin/Product/ProductSpecAttributeAddOrEdit?productId=" + Model.ProductSpecificationAttributeSearchModel.ProductId + "&specificationId=", true))  
                            }
                        }
                    })

                    <script>
                        function dosomethingheadercallback(tfoot, data, start, end, display) {
                                //write your code
                                if (data.some(e => e.AttributeName === 'Screensize')) {
                                    $("#product-info").hide();
                                }
                                else
                                {
                                    $("#product-info").show();
                                }
                            }
                    </script>

                </div>
                <div class="card-footer">
                    <a asp-action="ProductSpecAttributeAddOrEdit"
                       asp-route-productId="@Model.Id"
                       class="btn btn-primary">
                        <i class="fas fa-plus-square"></i>
                        @T("Admin.Catalog.Products.SpecificationAttributes.AddButton")
                    </a>

                </div>
            </div>


Here, dosomethingheadercallback function will be executed on every draw, you can write your required code there. I have also added condition to check attribute name.
1 week ago
rmahbub63 wrote:
Here, dosomethingheadercallback function will be executed on every draw, you can write your required code there. I have also added condition to check attribute name.

that is exactly what i need!
thank you so much dear! very appreciate your help! if i need any complex solutions, i will ask you for paid help!